Skip to content

Instantly share code, notes, and snippets.

@balzss
Last active March 27, 2020 10:55
Show Gist options
  • Save balzss/e770881c68d8683263e017f7c56e3014 to your computer and use it in GitHub Desktop.
Save balzss/e770881c68d8683263e017f7c56e3014 to your computer and use it in GitHub Desktop.
devtools

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment