Introduction: Chrome’s own developer tool is a simple and practical debugging tool, let’s see how to use this powerful tool

Developer tools

Open Chrome and press Ctrl + Shift + I or F12 to open developer tools. The following uses Chrome’s official website as an example

You can see that the developer tools are shown in the bottom half of the page. The red box is the toolbar, which we will introduce below

2. Two gadgets

On the far left side of the toolbar are two of the more common widgets, review elements and Select devices

(1) Review elements

When we click the Review Element button (or Ctrl + Shift + C shortcut), we can select the element on the page

The developer tool will then automatically jump to the Element panel for display (which we’ll explain later).

(2) Select equipment

When we click the Select Device button (or Ctrl + Shift + M shortcut), we can display different devices on Chrome

And you can choose from different screen sizes, which makes it easier to adapt for different devices

3. Element panel

In the Element panel, we can view the structure and style of web elements (usually see some excellent web design can also learn).

At the same time, we can directly modify the attributes and styles of elements, such changes can be displayed in the browser, greatly improving our development efficiency

4. Console panel

This is where the console.log() printout is printed, which is also a good way to debug

In addition, if there is an error in the program, the error message will be printed in this place, we can locate the problem based on the error message

5. Source panel

Here you can see the code source file (usually compressed), and click the curly braces below to format the code

We can also put breakpoints on the code to help debug and locate errors

6. Network panel

The Network panel displays detailed request information about all resources and is generally used to determine whether the returned data is correct

In addition, you can also set up simulated low-speed network, which facilitates network performance testing of applications