Web Dev Tools

To follow along with this example navigate to:

or git / zip:

The demo will be done with the following browsers. Ensure you have at least one of them. Both would be better. ;-)

Accessing

We'll start by accessing your last toolview or the inspector

OS X: Cmd + Opt + I
Firefox:
- Right-click on any page element and select Inspect Element.
- From the Firefox menubar: Tools > Web Developer > Inspector
- Windows and Linux: Ctrl + Shift + I
- Additional Firefox shortcuts https://developer.mozilla.org/en-US/docs/Tools/Keyboard_shortcuts
Chrome:
- Right-click on any page element and select Inspect.
- Open the Chrome menu (hamburger icon) at the top-right of your browser window, then select Tools > Developer Tools.
- Windows: F12, Ctrl + Shift + I
- Additional Chrome shortcuts https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts

select elements toolbar button
Inspector (Firefox) / Elements (Chrome)
HTML
CSS
- Rules (Firefox) / Styles (Chrome) - the css code
- Computed - the css result
- Box Model (under Computed in Chrome)
- Styles (Firefox-only)

Some examples to play with:
Button:
Color Pickers:

Console
- messages stack
- Split-console shortcut key - esc
Scratchpad then cmd-r (Firefox) /
Sources > Snippets then cmd-enter(Chrome)
Debugger (Firefox) / Sources (Chrome):
- in line - debugger
- in Web Dev Tools - breakpoints
- in Web Dev Tools - conditional breakpoints
Element awesomeness!
- inspect($0)
- $0
- copy(obj)
- "and many more" via help (Firefox-only)
Event awesomeness!
Debugger > Events (Firefox) /
Sources > Event Listener Breakpoints (Chrome)

DuckDuckGo !bangs
- !mdn: Mozilla Developer Network (MDN)
- !js: MDN JavaScript specific