Chrome Dev Tools

Intro

Last time we learned about the DOM.

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
• see more commands for the DOM here

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