Developer Tools

DevTools is a set of web developer tools built directly into the browser.
DevTools is available on major browsers like Chrome, Edge, and Safari.

Open the DevTools

Applications

For useful applications, see the Application section.

Console

This panel is related to JavaScript

Messages generated by console.log() function will be logged to Console
The Console is also a REPL: you can run JavaScript in the Console to interact with the page that you're inspecting
You can open Console in the Drawer
- Drawer is a pane at the bottom of the DevTools that can be opened and closed by Esc
- Therefore you can access Console in any tab
In Console, you can reference the currently-selected node with $0
- When you inspect a node, the == $0 text will appear next to the node

The Source panel is like a lightweight IDE where you can debug JavaScript. It consists of three panes

Impt

This panel is related to HTML and CSS
On the left top corner, there is a inspect button for you to select any HTML Element in the page ①
The main pane shows the DOM of the page ②
- You can directly edit its HTML source code there
  - You can also drag the nodes to reorder them
- You can use the keyboard to navigate in the DOM
- You can right click on a node and click Scroll into view to sync it with the viewport
- You can find any node by Ctrl + F
- You can hide a node by selecting it and pressing H
Choose an HTML Element, all its CSS styles appear in the Styles side pane
- All styles including inline CSS
- The source of every set of rules will appear in the right top corner ③
- You can insert, edit, enable, and disable any rules
- You can add inline CSS rules in the top element style ④
- You can toggle element's states through the :hov button ⑤
- You can add classes to the element through the .cls button ⑥

And the Computed side pane will show all the rules applied to the element
- "computed" means rules link inherit and initial will be replaced by the computed values
- Click on each rule so you can see the uncomputed value and source, and go to the original rule set
- Check Show all to show all the rules the element implicitly inherits
- Check Group to group rules into different categories
Both in Styles and Computed tabs, there is a box model diagram showing the element's size, padding, border, and margin
- You can directly edit these properties by double clicking the values

The Coverage tab shows you what CSS a page actually uses.

In Command Menu run the Show Coverage command to enable the Coverage tab
Click the Refresh button (at the position of the red dot in the above figure) to reload the page and see the coverage info
Teal represents the used proportion; Red represents the unused proportion
Click any file (URL) to see a line-by-line breakdown of what code it uses
- #E In the above figure, CSS rules from lines 6 to 9 are applied, while other rules in the figure are not applied

In DevTools, there is a feature called the command menu that is similar to the **command palette in VSCode.

Ctrl + Shift + P to open the command menu when DevTools is focused
Prompt > means "run command", there are other prompts for other actions
- No prompt: open file
- @: go to symbol
- :: go to line
- !: run snippet

To view a page in print mode:

Open the Command Menu
Run command Emulate CSS print media type
1. Or start typing Rendering and select Show Rendering
2. For the Emulate CSS Media dropdown, select print

Click button ① to open the UI that enables you to simulate a mobile viewport
By default, the Device Toolbar opens in Responsive Viewport Mode ②
- You can change to other modes from the device list ③
- To show media query breakpoints above your viewport, click More options and then select Show media queries
You can show CSS Media Querys ⑤ in the more options menu ④
- Click a media query breakpoint to change the viewport's width so that the breakpoint gets triggered

Tip

by zcysxy