Chrome Dev Tools: Tips and Tricks

by Peter Wong

Home, Sweet Home!

Tip: Quickly inspect;;libh

Cmd + Option + C

Tip: Debugging styles

.my-example-text { text-align: right; }

Tip: Find element changers

Why is it flashing red?

The Sources Panel

Tip: Navigate the source

Go to the magnify() function in zoom.js

Cmd-p

Cmd-Shift-p

Tip: Controlling the debugger

Put a breakpoint in a() in controlling-the-debugger.js

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

Why is scrolling so janky?