All You Need Is DevTools

Intro Notes

  • We’ll focus on Chrome but other browsers can be very powerful for specific tasks, too.
  • Grid/Flexbox: Firefox
  • iOS apps debugger: Safari
  • We focus on the performance part

Browser Profiles

  • Dedicated browser profiles for:
  1. accessibility testing
  1. debugging
  1. performance audits
  1. happy customers (slow articles on a fast, decent connection) — with a few popular extensions, ad-blockers, tab management, Google Docs offline, LastPass, VPN, Browserstack, Grammarly etc. No throttling in use.
  1. unhappy customers (heavy articles on a slow, poor connection) to test our heaviest pages.


Experimental Settings

  • Jump to experimental settings: Settings → Experiments, Shift + ?



Bookmarklets / Diagnostics.css

  • ContentEditor Bookmarklet
  • Bookmarklet Creator
  • You can also run them as snippets
  • Editing: Console: document.designMode = "on" or contenteditable="true" on HTML

Interface

  • Switching the state of the dock: Cmd + Shift + D
  • Command Palette: Cmd/Ctrl + Shift + P / Cmd/Ctrl + P
  • Search tabs in the right upper corner
  • Add new groups of tabs in Chrome/Firefox

Network Panel

  • Sort by Waterfall activity. By default, the Waterfall is sorted by timeline, but we can sort it by total duration. The lighter portion of each bar is time spent waiting. The darker portion is time spent downloading bytes.
  • Cog in the right upper corner, choose “Use large request rows” and “Show overview”
  • Size column and Time column
  • Size column: When the size at the bottom is higher (images)? How is it smaller? (At the top data + headers + cookies, at the bottom only data)
  • Time column: first number is how time it took for 100% of the file to be transferred, from the moment it was requested to the moment 100% of it was finished; underneath: how much of that time was spend not downloading the file (Latency + Waiting / Time to First Byte, Roundtrip time, DNS, TCP, TLS)