Chrome Dev Tools
Tags: beginners, tutorial, javascript, webdev
Published: 2019-11-07 17:15:54

---
title: "Chrome Dev Tools"
description: "Chrome Dev Tools"
published: true
tags: ["Beginners", "Tutorial", "JavaScript", "Webdev"]
---

## Intro

[Last time we learned about the DOM.](https://miku86.com/posts/dom-manipulation/)

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](https://developers.google.com/web/tools/chrome-devtools/shortcuts)

### 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 `h2`s
- 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