Home

Awesome

Learning Chrome DevTools

Just one of the things I'm learning. https://github.com/hchiam/learning

Live expressions

Good as variable watch substitute when debugging live.

  1. Ctrl+Shift+i
  2. Ctrl+Shift+P
  3. Search "create live expression"

For example: document.activeElement with automatically show the currently-focused element.

Print preview

  1. Ctrl+Shift+i
  2. Ctrl+Shift+P
  3. Search "print media type"
  4. To undo, search "not emulate CSS media type" (to not emulate CSS media type)

Code coverage

  1. Ctrl+Shift+i
  2. Ctrl+Shift+P
  3. Search "coverage" (but watch out: it can be slow to open files to show you which lines got (un)used)

Access local servers with port forwarding

Connect a localhost port on your laptop to your cellphone! Laptop Chrome -> mobile Chrome (or Firefox!).

  1. Enable developer options on an Android mobile device: https://developer.android.com/studio/debug/dev-options
  2. Set up remote debugging on an Android mobile device: https://developers.google.com/web/tools/chrome-devtools/remote-debugging
  3. Set up access to local servers: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server

Find performance bottlenecks

  1. Performance tab
  2. record and stop
  3. look for full CPU levels or dropped frames
  4. see Main tab for long rectangles (long = slow. directly above = caused lower rectangles)
  5. see Summary tab for link to initiator or source function.