Chrome Dev Tools: Tips and Tricks

by Peter Wong

Home, Sweet Home!

Tip: Quickly inspect;;libh

Cmd + Option + C

Tip: Debugging styles

Tip: Styling interactive elements

Tip: Find element changers

The Sources Panel

Tip: Navigate the source

Cmd-p

Cmd-Shift-p

Tip: Controlling the debugger

Step In/Out: Cmd-; / Cmd-Shift-;

Step Over: Cmd-'

Stack: Ctrl-, / Ctrl.

Tip: Console commands for JS

$_

copy()

console.table(array, [properties])

            window.exampleData = {
              "campaigns": [
                {
                  "name": "Campaign 1",
                  "agency_id": 736526454,
                  // ... More attributes
                  "created_at": "2014-01-15T22:22:06Z",
                  "updated_at": "2014-01-15T22:22:06Z",
                  "uuid": "e9e5014e-8a4b-4cb2-bb9e-2280be9e220c"
                }
                // ... More
              ]
            };
          

Tip: Console commands for Elements

$ and $$

inspect()

$0

dir()

Tip: Jank busting with Timeline

How to stay current?

• Chrome evangelists
  • Paul Irish (@paul_irish)
  • Illya Grigorik (@igrigorik)
  • Addy Osmani (@addyosmani)
  • Paul Lewis (@aerotwist)
  • Jake Archibald (@jaffathecake)
  • Nat Duca (+NatDuca)
• Rockstar, ninja, wizard frontend devs
  • Lea Verou (@LeaVerou)
  • Ana Tudour (@thebabydino)
  • Nicole Sullivan (@stubornella)
  • Jonathan Snook (@snookca)
  • Chris Coyier (@chriscoyier)
  • Dion Almaer (@dalmaer)
  • Simurai (@simurai)
  • Fabrice (@FWeinb)