Go-Go Gadget

Learn about Inspectors


Jorge Rimblas


rimblas.com/blog
@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)


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


Source: https://developer.chrome.com/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 post
rimblas.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
discover-devtools.codeschool.com/

Chrome DevTools
developer.chrome.com/devtools/index

Firebug
getfirebug.com/

Browser Logos
github.com/alrra/browser-logos

fullCalendar plugin
enkitec.com/products/plugins/fullcalendar

Resources

Sticky Hide and Show Regions in APEX
Jeff Eberhard

Easy prototyping when using APEX DA triggeringElement
Jorge Rimblas



Q&A



Jorge Rimblas

rimblas.com/blog
@rimblas





find  orclapex in meetup.com
Find the one near you!