We use Chrome DevTools as about
- Quickly edit HTML elements
- Expand all child elements
- Relocation of the inspector
- DOM element search
- Palettes
- Multiple cursors
- Encode base64 image
- Pseudo-class switching
- Column selection
- Copy request for cURL
- Screen keyboard
- Screenshot of the whole page
- Emulation of touch devices
- Useful features
As the name implies, Chrome DevTools, or web inspector, is a tool designed for web developers and people associated with it. The web inspector allows you to do the following:
- Inspect the correctness of the display.
- Track the execution of scripts in JavaScript.
- View network activities.
When writing this article I used Canary - version of Chrome, where new features are tested, which then fall into a stable version of Chrome.
In order to start the inspector, you can right-click anywhere on the page and select "View item code", you can also just press Ctrl + Shift + C.
Quickly edit HTML elements
Let's start with the simplest: editing elements.
How to check:
- Select the Elements tab.
- Select any HTML element inside the panel.
- Double click on the tag and change, for example, the tag name.
When editing is completed, the closing tag will automatically update.
Expand all child elements
How to check:
- Go to the Elements panel.
- Select an element and, while holding Alt, click on the arrow to the left of the element.
Relocation of the inspector
The inspector panel can be pressed both to the bottom of the browser window and to its right side. For example, the location of the panel on the right is convenient when working on widescreen monitors. Also, the inspector panel can be placed in a separate window and, for example, transferred to another monitor.
How to check:
- Ctrl + Shift + D - Toggle Location
DOM element search
Probably not many for whom this will be a discovery, but in the “Elements” tab you can search by DOM.
How to check:
- Press Ctrl + F and enter the proposed search query.
Palettes
Select color from palette The choice of color in recent versions of Chrome has undergone some changes: added two palettes to facilitate the choice of color.
Multiple cursors
Move the cursor and, while holding Ctrl, click in the desired area to add a cursor. You can undo the action using Ctrl + U. Personally, I have never been useful.
Encode base64 image
How to check:
- Switch to the Network panel.
- Select image
- Right-click on the image and select ""
Pseudo-class switching
Pseudo-classes reflect the state of the elements and their relative positions.
How to check:
- Right-click on an element in the Elements panel and select a pseudo-class in the Force Element State list.
- You can also select a pseudo-class on the right side of the Elements panel.
Column selection
How to check:
- Go to the "Sources" panel.
- Select any file.
- Select the text by holding Alt.
Selecting a column also works when HTML is edited in the Elements panel.
Copy request for cURL
Any request in the Network tab can be copied and then pasted into the terminal for execution using curl.
Screen keyboard
If the Nexus 5X profile is selected, you can see how the site looks when the on-screen keyboard is active.
Chrome DevTools: On-Screen Keyboard
Screenshot of the whole page
Take a picture of the entire page is very simple. Just need ...
- Open Inspector.
- Go to console.
- Press Ctrl + Shift + P
- Type "screenshot"
- Select "Capture full size screenshot"
Screenshot of the whole page Emulation of touch devices
You can also simulate some sensors:
- Touch screen
- Coordinates for geolocation
- Accelerometer
How to try:
- Select the Elements panel.
- Press "Esc" and select "Emulation> Sensors".
Useful features
keys and values
The keys and values functions allow you to output the keys or values of the object to the console, respectively. 
Displaying keys and object values separately