Hidden Gems in
Browser Tools

Adam Tuttle

For NCDevCon 2012

@AdamTuttle
adam (at) fusiongrokker.com

« {{activeSlide + 1}} / {{totalSlides}} »

Alternate Titles

When a man loves a browser...


It's 106ms to the server. I've got a full laptop charge, half a case of Mountain Dew, it's dark, and I'm wearing sunglasses.


Hey Girl... You can have all of my cache

Obligatory "About Me" Slide

Atwood's Law

Any application that can be written in JavaScript, will eventually be written in JavaScript.

–Jeff Atwood, in his 2007 blog post:
The Principle of Least Power

JavaScript? ...Really?!

JS was invented 17 years ago. During that year:

ColdFusion 1.0 debuted

Then and Now

Come a long way since 1995

We're Living in the Future


... But debugging difficulty is related to complexity.

Welcome to Alerts Anonymous

Do you debug your JavaScript by adding code like this?


There's no shame in this... In fact, it resembles:

Tools to the Rescue!


* Not covered here in great detail

Market Share


Source: Adobe SiteCatalyst NetAverages as of March 18, 2012 (sadly discontinued)

Hidden Gems in Browser Tools

The part that you've all been waiting for...


But first a disclaimer:
Accurate as of Early September 2012.

Tip Legend

Hidden Gems » Console

Step 1:
Give up your alerts, switch to console.log!

May you never alert() again! Amen.

Console »
Console Everywhere!


In any dev-tools tab other than the console,
hit Esc to open a mini-console.

Console »
Log Labels!

console.log() takes multiple arguments.
Label your debug output!

Console »
Simple Timing

Console »
Bling Bling!

Similar to jQuery DOM selection, but without jQuery.

Console »
Inspect

Jump to DOM node in Elements panel from console

Console »
KB Shortcuts


⬆ + ⬇ arrow keys scroll through command history

Console »
Settings

Persist contents after redirect

Console »
Dealing w/ Frames

Console »
Copy to Clipboard

Copy the result of a console command to the clipboard:

Console »
Math

Just type in your math problem and get the answer:

Hidden Gems » Scripts

Recently renamed to "Sources" in Chrome
image credit

Scripts »
Step Debugger

Line Breakpoints
Break on JS Errors
Break on DOM change
Break on XHR url match

Scripts »
Step Debugger

Almost Universal Keyboard Shortcuts:

  • F8 Pause/Continue ("Run") - Except IE: F5
  • F10 Step Over
  • F11 Step Into

: ⌘/, ⌘', ⌘; respectively

Scripts »
Variable "Watches"

Auto-updating value list for specified variables. Exactly like variable watches in every other step debugger ever.

Scripts »
Un-minify

  • { } button
  • Tools icon > Format JavaScript

Hidden Gems »
Elements / HTML / Documents

... because apparently we can't even agree on a standard for tab names.

HTML »
Element Dimensions


  • Select the element to see its dimensions, or use the magnifying glass icon in bottom toolbar

  • Layout tab or list of computed styles

HTML »
Expand HTML

  • Pressing  *  on the numpad expands everything but inline scripts & stylesheets. Add shift to include those.

  • Button on documents tab

HTML »
Real Time Editing

Add, Edit, & Delete HTML & CSS inside the browser

HTML »
Increment Numeric Prop Vals

  • ⬆/⬇ change by 1
  • Shift+⬆/⬇ change by 10
  • Alt+⬆/⬇ change by 0.1
  • Shift+PgUp/PgDn change by 100

  • Also works on colors

HTML »
Element State


Preview focused, hover, active, visited states

Screen Shots: chrome, firebug


HTML »
Color definition mode

Clicking color swatches: toggle between hex, short hex, RGB, HSL, named, etc. (Shift+click on Chrome)
Clicking the swatch brings up a color selection dialog

Hidden Gems » Resources


Lists stylesheets, scripts, images, etc used on the page


Firefox & IE don't have a "Resources" tab but some functionality is implemented in other tabs

Resources »
Cookies & Storage

Resources tab shows local storage, cookies, caches, etc.

Storage tab does same thing

Hidden Gems » Network


Panel must be open before page loads to work (just refresh)

Network »
Disable cache

  • Settings cog
  • Tab menu
  • Under "cache" in menu bar
  • Develop Menu > Disable Cache
  • Can't disable; only clear

Network »
Clear cache

Ctrl+Shift+Del

⌘+Shift+Del

Dialog to clear cache & other data


Network »
Spoof User-Agent

  • Settings cog (as of February)
  • User-Agent Switcher (extension)

Network »
Latency

Displays are all slightly different but all show wait time, download time, etc for each external resource

Network »
Events

  • DomContentLoaded
  • Load (images, subframes, etc)

Oh noes, my tools crashed!


Often, using the keyboard shortcut to toggle them off & on will fix it

Pop Quiz, Hot Shot!

What was the one slide/feature that Chrome does not have which at least one other browser does?

Answer

Expand HTML with  *  ... Chrome is awesome!

Bonus Tips

Un-dock dev tools


Increase Dev tools font size: Chrome, FireBug.


Stupid Chrome Tricks

Dev Tools of the Dev Tools (undocked)

Fín

Slides:


Inspired by: 25 Secrets of the Browser Developer Tools