Browser Developer Tools
Upcoming SlideShare
Loading in...5
×
 

Browser Developer Tools

on

  • 556 views

Mit Oracle Application Express entwickelt man Webapplikationen die im Browser aufgerufen und ausgeführt werden. Das Entwickeln im Browser erfordert andere, für den klassischen Oracle Entwickler oft ...

Mit Oracle Application Express entwickelt man Webapplikationen die im Browser aufgerufen und ausgeführt werden. Das Entwickeln im Browser erfordert andere, für den klassischen Oracle Entwickler oft neue, Techniken und Tools. Nahezu alle modernen Browser besitzen integrierte Development Tools, die es uns möglich machen das Verhalten und Styling einer APEX Applikation im Browser zu untersuchen und zu beeinflussen. In meiner Präsentation werde ich die verschieden Tools und ihren Einsatz mit Oracle Application Express vorstellen, mit Tipps und Tricks für sowohl den beginnenden als auch den fortgeschrittenen Entwickler.

(DOAG 2014 Development - Community-Konferenz für Entwickler)

Statistics

Views

Total Views
556
Views on SlideShare
410
Embed Views
146

Actions

Likes
3
Downloads
3
Comments
0

2 Embeds 146

https://twitter.com 145
https://tweetdeck.twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Browser Developer Tools Browser Developer Tools Presentation Transcript

  • Christian Rokitta Development 2014
  • Oracle Application Express
  • Oracle Developer IDE’s SQL Developer, TOAD, PLSQL Developer, SQL-Plus … Edit Compile Debug Search Export/Import … View slide
  • Oracle APEX Developer Application Builder Development Framework Edit Run Debug Search Export/Import … View slide
  • Web Development HTML APEX → Web Application CSS JavaScript Structure Presentation Interaction Web Browser
  • What are Browser Developer Tools? • Built in to the browser • Usually reached with: – F12 on Windows – ⌘, ⌥ and "i" on Mac – Right Click > Inspect Element • No more alert()
  • Your Favorite Browser?
  • Browser Development Tools • HTML – inspect/edit • CSS – inspect/edit (/validate) • JavaScript – inspect/edit/debug/console • Network – monitor/trace/performance
  • Browser Development Tools • Responsive Web Design – Resize?! – Build-in tools • Browser Version emulation – IE11 • Mobile Device emulation/integration
  • Device Emulation
  • Device Integration
  • Demo
  • Tips & Tricks Use the console in any panel In Chrome and Opera, press the Esc key. In IE11, the keyboard shortcut is Ctrl + '. Safari has a small console prompt available below the main panel by default. View available CSS properties Chrome, IE11, Opera 15 and Safari: view the available CSS properties on an attribute by pressing Ctrl and Space when the CSS attribute field is blank.
  • Tips & Tricks Reference the current or previously selected DOM element If you have an element currently selected in your DOM, you can use the reference $0 to call it within your code. Reference the current or previously selected DOM element Retrieve elements you have previously highlighted by using $1 - $4. In Firebug, use $n(2) - $n(5).
  • Tips & Tricks Chrome's Workspace Allows you to make changes from the developer tools and automatically update your source files. In Sources menu and right-click on one of your CSS or JavaScript files. Select Map to Network Resource and from the file list that appears and choose the file that matches your selection. You can now make changes to your CSS and JavaScript from within the developer tools and your files will automatically update.
  • Compare Developer Tools* • Chrome Developer Tools have the best feature set and the most frequent updates. • Firefox Developer Tools are catching up; no real need for FireBug anymore. • Opera (21) Dev Tools = Chrome Dev Tools • I don’t like Safari Developer Tools, I’m using FireBug Lite extension. • Internet Explorer 11 has great Developer Tools, IE9/10 were poor. * my personal opinion
  • Productivity
  • Training • Einführung in Oracle Application Express: 08.-12. September – online • HTML, CSS und Javascript in Oracle Application Express: 06.-10. Oktober – online • Advanced Oracle Application Express (APEX) Workshop: 22.-26. September - online http://www.skillbuilders.com/
  • Questions & Discussion http://rokitta.blogspot.com @crokitta christian@rokitta.nl http://www.themes4apex.com http://plus.google.com/+ChristianRokitta http://nl.linkedin.com/in/rokit/