devtools

devtools.md

Chrome devtools tips & tricks

Table of content

• Elements tab
• Console and logging
• Sources tab
• Network tab
• Commands
• Misc

Elements tab

Breakpoint on node change

• Change types: subtree change, attribute change, node removal
• Elements tab > right click on node > Break on > [change type]

Keep temporary elements on the screen

• For inspecting "tricky-to-catch elements" (e.g. when it appears periodically or randomly)
• Go to Sources tab > wait/prepare UI > press F8

Console and logging

Log variables with their name

• use console.log({variable}) instead of console.log(variable)

Timing

• start a "timer" width console.time(label) and when you run console.timeEnd(label) it will print how much time has passed

querySelector shorthand

• $(selector) is document.querySelector(selector)
• $$(selector) is $$querySelector(selector)
• PLUS the latter gives back a true array and not an array-like object (so you can easily use map and filter)

Get a reference for a node

• Select a node in the Elements tab > Switch to the console tag and the $0 variable holds the selected element
• $1, $2, etc also work for previous elements

Copy with copy()

• the copy() function copies its parameter to the clipboard

Get the result of your last expression

• $_ holds the value of the most recently evaluated expression

Declare the same variable mutliple times (new)

• Console tab > declare variable let a = 1 > declare variable again let a = 2 > no error (doesn't work with const)

Design mode

• document.designMode = 'on'

Sources tab

Pretty print source code

• Bottom left of source > { }

Watch a variables or even an expression

• Under the play/pause/skip button row > "Watch" tab > press the plus icon to add a variabla/expression

Event Listener Breakpoints

• Under "Watch" tab > "Event breakpoints"

Search in all sources

• Any tab > Cmd+Option+f

Network tab

Block request URL

• Right click on request > Block request URL

Copy request

• as cURL, as fetch, response, ...
• Right click on request > copy > [what to copy]

Misc

You can inspect the devtools window itself

• Undock the devtools panel > press Cmd+Shift+i

Slow network and cpu simulation

• Couple presets for a mix of both at the top, next to the zoom
• You can set it individually
  • for the network in the Network tab right to the disable cache checkmark
  • for the cpu in the Performance tab > click the gear icon > dropdown with "CPU" label

Commands

Open the command modal with Cmd+shift+p.

Capture screenshot

• Types: node, area, full
• Type in "screenshot" to see all screenshot command

Show FPS

• [Rendering] Show frames per second (FPS) meter