browser developer tools

19
Browser Developer Tools Christian Rokitta Development 2014 :

Upload: christian-rokitta

Post on 01-Nov-2014

599 views

Category:

Technology


0 download

DESCRIPTION

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)

TRANSCRIPT

Page 1: Browser Developer Tools

Browser Developer

Tools Christian Rokitta

Development 2014

:

Page 2: Browser Developer Tools

Oracle Application Express

Page 3: Browser Developer Tools

Oracle Developer

IDE’sSQL Developer, TOAD, PLSQL Developer, SQL-Plus …

EditCompileDebugSearch

Export/Import…

Page 4: Browser Developer Tools

Oracle APEX Developer

Application BuilderDevelopment Framework

EditRun

DebugSearch

Export/Import…

APEXDeveloper Addonby Peter Raganitsch

Page 5: Browser Developer Tools

Web Development

HTML

APEX → Web Application

CSS JavaScriptStructure Presentation Interaction

Web Browser

Page 6: Browser Developer Tools

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()

Page 7: Browser Developer Tools

Your Favorite Browser?

Page 8: Browser Developer Tools

Browser Development Tools

• HTML– inspect/edit

• CSS– inspect/edit (/validate)

• JavaScript– inspect/edit/debug/console

• Network– monitor/trace/performance

Page 9: Browser Developer Tools

Browser Development Tools

• Responsive Web Design– Resize?!– Build-in tools

• Browser Version emulation– IE11

• Mobile Device emulation/integration

Page 10: Browser Developer Tools

Device Emulation

Page 11: Browser Developer Tools

Device Integration

Page 12: Browser Developer Tools

Demo

Page 13: Browser Developer Tools

Tips & Tricks

Use the console in any panelIn 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 propertiesChrome, 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.

Page 14: Browser Developer Tools

Tips & Tricks

Reference the current or previously selected DOM elementIf 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 elementRetrieve elements you have previously highlightedby using $1 - $4. In Firebug, use $n(2) - $n(5).

Page 15: Browser Developer Tools

Tips & Tricks

Chrome's WorkspaceAllows 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.

Page 16: Browser Developer Tools

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

Page 17: Browser Developer Tools

Productivity

Page 18: Browser Developer Tools

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/

Page 19: Browser Developer Tools

Questions & Discussion

http://rokitta.blogspot.com

@crokitta

[email protected]

http://www.themes4apex.com

? ? ?

http://plus.google.com/+ChristianRokitta

http://nl.linkedin.com/in/rokit/