Loading...

Getting Tooled
A Comprehensive Dive into the Chrome Developer Tools

March 16th, 2013 - Darcy Clarke - @darcy

Some stuff

  • *Developer
  • *Designer
  • *UX Advocate
  • *@darcy

Some things

  • *Co-Founder of Themify
  • *Google, Microsoft, Nike, Samsung, Porsche, Ducati, Disney, Red Bull, CBS
  • *Fantasy Interactive (NY), Jet Cooper, Say Yeah!, Playground Interactive Inc., Blast Radius, Bnotions, Daily Challenge, Pinpoint Social, My City Lives, Viafoura
  • *jQuery Team Alumni (Web Team)

Some more things

  • *Polar Mobile (MediaEverywhere SDK)
  • *Front-end Developer Interview Questions
  • *Repo.js
  • *DSS
  • *github.com/darcyclarke

Chrome Dev Tools?

Firebug, Firefox, Dragonfly or _______ Dev Tools?

Just wings it?

Rest easy
Links available

What are the developer tools?

*Inspect, debug, optimize and build web sites & apps

*Tip: Incognito mode FTW!

Chrome Shortcuts

  • *New Tab
    cmd + T
  • *Close Tab
    cmd + W
  • *Next Tab
    cmd + shift + [
  • *Previous Tab
    cmd + shift + ]
  • *Quick Jump
    cmd + [1-9]

Flags
chrome://flags

*"Enable Developer Tools experiments."

Scratchpad
data:text/html, <html contenteditable>

Panels

  • *Elements
  • *Console
  • *Resources
  • *Network
  • *Sources
  • *Timeline
  • *Profiles
  • *Audits

Dev Tools Shortcuts

  • *Open Dev tools
    cmd + shift + J
  • *Close Dev tools
    cmd + W
  • *Toggle Shortcuts
    ?
  • *Next Panel
    cmd + [
  • *Previous Panel
    cmd + ]
  • *Toggle Console
    Esc
  • *Search
    cmd + F

Orientation

  • *Docked inline at the bottom
  • *Seperate window
  • *Docked inline to the right

Elements / DOM

Shadow DOM

Stylin'

Skin your chrome inspector
Chrome themes
console.log("%cBAM!!", "color: blue; font-size: 100px;");

Console

Firebug Command Line API

http://getfirebug.com/wiki/index.php/Command_Line_API

  • $0
  • $()
  • $$()
  • clear()
  • copy()
  • console.log()
  • console.dir()

Network

Sources

Sources

  • *Live Edit CSS/JS
  • *Breakpoints
  • *Pretty print
  • *Search
  • *Open
  • *Revision History

Remote Debugging

Performance

  • *60 FPS!
  • *16.7ms frame budget!!!
  • *High resolution timer (HTML5 Rocks!)
    • *Date.now() // 1337376068250 - Integer
    • *performance.now() // 20303.427000007 - Floating Point
  • *setTimeout()
  • *requestAnimationFrame() (Polyfill)

Task Manager

Timeline

Examples

Tips

  • *60 FPS!
  • *Stay away from:
    • *Gradients
    • *Shadows
    • *Large images
    • *Heavy computation reading/writing to the DOM
    • *Especially in rapidly firing events
  • *Optimize Images (Smush.it, ImageOptim etc.)
  • *WebP (26% smaller then .PNG, 34% smaller then .JPEG)

More Tips