Chrome Dev Tools

Intro

Today we'll learn about a tool, which we can use to actually work with the DOM - Chrome and its Dev Tools.

Suggestion

Open Chrome or Chromium now and try this stuff out. Learning by doing. If you find an error or have a suggestion, I'd love to read your comment.


General Shortcuts

  • Open selected DOM element: Right Click => Inspect
  • Open Last Opened Panel: F12 or Ctrl + Shift + I
  • Open Elements Panel: Ctrl + Shift + C
  • Open Console Panel: Ctrl + Shift + J
  • Open/close additional Console Panel in any other Panel: Esc
  • Open Command Menu (from any Panel): Ctrl + Shift + P
  • Open Mobile View (from any Panel): Ctrl + Shift + M
  • Open Sensors (from any Panel): Ctrl + Shift + P and type sensors
  • Dock to right (from any Panel): Ctrl + Shift + P, type right
  • Dock to bottom (from any Panel): Ctrl + Shift + P, type bottom
  • Undock to separate window (from any Panel): Ctrl + Shift + P, type separate

For Mac, use Command + Option instead of Ctrl + Shift

Source

Elements Panel

  • shows the DOM and its Markup and Styles
  • selected elements get highlighted in the viewport, including margins (orange) and paddings (purple)
  • change markup temporary by adding/deleting/editing the HTML nodes
  • change styles temporary by (un)checking the boxes or adding/deleting/editing the properties
  • numbers in the Styles can get changed by using arrows (use Ctrl or Shift additionally and see what will happen)

Console Panel

  • shows output of code the developer added with console, errors etc.
  • you can run JavaScript here
  • you can programmatically access and modify the DOM, e.g. getting all h2s
  • you can replace document.querySelector() with $()
  • you can replace document.querySelectorAll() with $$()
  • if you use a method to find a DOM element, you will see a preview of the result
  • $0 gives you the last selected element from the Element Panel

Sources Panel (awesome for Debugging)

  • shows all the served files from the currently opened page
  • you can go into a .js file, set a breakpoint and reload the page, the js code will stop
  • you can hit F9 and go step-by-step through the code, seeing the internals of the code
  • when you click on Snippets, you can write and save custom snippets
  • you can run a script with Ctrl + Enter

Network Panel

  • shows the network activity between client (our browser) and the server(s) (where we get our data from)
  • shows the load time, the size of sent data, the amount of requests etc.
  • we can filter the type of resources
  • we can see our requests to the server(s) and their responses
  • red font color means something didn't (intentionally) work, e.g. adblocker blocked a file
  • you can simulate different internet speeds to see which resources slow down your page
  • you can search for specific files with Ctrl + F, even with Regex

Application Panel

  • shows manifest and service workers of the page
  • shows storage, e.g. Local Storage, Session Storage, IndexedDB, Cookies of the page
  • shows cache, e.g. of the service worker
  • shows background services, e.g. sync, notifications, push messages
  • you can delete all your stored data from a page here

Audit Panel

  • you can get a audit of you page here (performance, accessibility etc.)
  • doesn't work on a local page
  • gives feedback on how to optimize your page

Sensors

  • you can change your location, e.g. if you want to check if your webpage's geo location is working properly