Go-Go Gadget
Learn about Inspectors
Jorge Rimblas
Agenda
What are inspectors?
Browser Support
Why use them?
Panels (HTML, CSS, Console, ...)
Development with APEX
Tips and tricks
Q&A
Goal?
Inspector
Tool that allows us to examine, modify and interact with the contents of a webpage
View Source
vs
Inspect
Inspect
Dynamic
Live data
Current state
and more...
Demo
Other Names
Firebug: getfirebug.com
Firefox Developer Tools
Chrome Developer Tools
(DevTools for short)
(DevTools for short)
IE Developer Tools
Dragon Fly
Web Inspector
Pretty Good Support
but many names
Stick with DevTools or Inspector
Inspector
Tool that allows us to examine, modify and interact with the contents of a webpage
...but wait, there's more...
"DevTools, are a set web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. Use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization." - Google Chrome DevTools
Tabs / Panels Pattern
HTML/Document
Console
Scripts
Network
Learn the keystrokes
Manipulate CSS values via arrow keys
⬆︎ ⬇︎
⬆︎ ⬇︎
Activate
Firebug and IE
F12
Open DevTools
(Firefox, Chrome & Opera)
(Mac)
⌘ + Opt - I
(Win)
Ctrl + Shift - I
Open DevTools Console
(Chrome & Opera)
(Mac)
⌘ + Opt - J
(Win)
Ctrl + Shift - J
* This is my default keystroke.
Open DevTools in Inspect Mode
(Chrome & Opera)
(Mac)
⌘ + Opt - C
(Win)
Ctrl + Shift - C
Many more...
Panels
Console
HTML
CSS
Script
DOM
Net
Cookies/Storage
Errors
HTML Panel
demo
CSS Panel
demo
Cookies
Storage
Resources
demo
("Sticky Hide and Show Regions in APEX")
Console Panel
demo
Console API
console.log
console.log("I am here!");
// I am here!
var a = 4;
console.log(a + 3);
// 7
Console API
console.table *
var a = [{"id":1,"code": "OPEN", "openStatus": true}
, {"id":2,"code": "CLOSED", "openStatus": false}
, {"id":3,"code": "REJECTED", "openStatus": false}
];
console.table(a); * console.table available in Chrome and Firebug
console
console.table
console.table(
$("#calendar").fullCalendar('clientEvents')
);
console
console.clear();
console.count(label);
APEX API
Using $v, $s, $x and others
demo
APEX API
$s(pNd, pValue, pDisplayValue, pSuppressChangeEvent)Debugging
apex.debug.getLevel();
apex.debug.log("Made it this far!");
apex.debug.log("ID:", $v("P10_ID");
Cool Features!
Last Selection
Use $0
Use Case
$0 ≈ this.triggeringElement
Blog postrimblas.com/blog/2014/06/easy-prototyping-when-using-apex-da-triggeringelement/
HSL Rocks!
- Hue
- Saturation
- Lightness
Use HSL to find complementary hover or highlight colors
Preserve Log
Troubleshooting AJAX
Responsive Design
Safari & iOS Devices
Safari & iOS Devices
Resources
Discover DevTools with Code School
Chrome DevTools
Firebug
Browser Logos
fullCalendar plugin
Resources
Jeff Eberhard
Jorge Rimblas
Q&A
Jorge Rimblas
find orclapex in meetup.com
Find the one near you!
Go-Go Gadget Learn about Inspectors Jorge Rimblas rimblas.com/blog @rimblas
Go-go-gadget
By Jorge Rimblas
Go-go-gadget
Learn about Web Inspectors and DevTools with a focus on Oracle APEX development.
- 13,000
