Chrome DevTool is an essential production tool for Web development. Its functions include debugging, performance analysis, page optimization, and custom stylesheets. There are plenty of handouts for DevTool on the web, especially debugging tips. This article does not want to belabor such general knowledge, but only introduces some small features that I find convenient.

Dom breakpoint

Dom breakpoints are arguably the second most important feature after JS Debug. I am a code farmer who has been maintaining legacy applications for 20 years. The features of this legacy system are: the response entry of JS cannot be found through the normal way; But the work still has to be done, right? So, “locating triggering events via Dom representations” becomes my regular debugging tool. For example, if I want to view “events for removing elements”, I can navigate to the target Dom -> right mouse button -> Break on -> Node Removal, and then the action page will automatically help me locate the relevant JS code.

The monitor function

The monitor function is a listener that comes with Chrome DevTool (😅). You can add it manually in the Console TAB, or use it in the source code. The method of use is very simple, look at a simple example to understand:

As shown in the figure above, we use the monitor Hello function to print function XXX called when it is called; With parameters, you can also display the specific content.

If you don’t want to listen, unmonitor(hello).

The console output

A relatively small number of people use the monitor function, and many feel that a console.log in the function body can also be monitored without requiring additional recognition. I don’t want to argue about details here, but efficiency. However, even with console objects that are used everywhere, you can focus on some simple practices:

  • Console. log is well known, but it is recommended to print with curly braces

    As shown below, there is a difference in development experience between simply “printing two values” and “printing key-value pairs”.

  • Console. table: Prints the object as a form

  • Info & WARN & Error: Three hierarchical displays of logs

    The three log background colors are different and the output can be graded by clicking Default levels

Keep the log

Speaking of logs, have you ever encountered a problem when viewing logs: after submitting a form, the current page automatically relinks, and the log disappears before you have a chance to look at it? It’s easy to crash, but don’t worry, Chrome already has a solution for you. There is a check box for Preserve Log under the Network TAB. Just check it. However, with this enabled, the clear() method is no longer usable — after all, two mutually exclusive operations.

Copy resource path strength

I often copy the static resource path in the page and open it in a new TAB. The traditional way to do this is to click Edit as HTML and then scroll through the Edit box. I recently noticed that Chrome has added a new feature called Copy Link Address that you can click to Copy to your clipboard.

If you can copy static resource paths, you can also copy dynamic resources. This needs to be found in the Network TAB, right-click the resource in response, there is a copy drop down option, copy link address is in its secondary options; The other secondary options are also useful, so you can try them one by one.

The command box

Finally, the Command box for Chrome DevTool — the shortcut CTRL + Shift +P (Windows) or CMD +P (Mac) — is the same as VS Code; You can search for all of DevTool’s features. Just to name one or two features I use most often.

  • screenshots

    A lot of people install screenshots extensions in the Chrome App Store that actually call the DevTool API. People can use this function by typing in the Screenshot from the command box.

  • Switch dock position

    This is a personal hobby of mine, and I let Devtool’s dock jump around. You can use the mouse to click on the top right corner of the three dots to switch; Sometimes you don’t want to use the mouse, just try this keyboard operation.

summary

Some time ago, I read the history of human development, which mentioned that mastering and skillfully using tools was a key step in human evolution. I personally am a big fan of productivity tools, and using comfortable production tools can significantly enhance the development experience and make work less boring. However, not everyone has this urgent need. I’ve seen a lot of older people who have been working in the industry for a long time and have a very wooden perception of development tools, such as IE DevTool and Chrome Devtool, which is also interesting.

Okay, so today I’ve covered a few little features that I think are a little bit interesting. Do you have your favorite function? Let us know in the comments.

This article was posted on Github by an-Onion. Code word is not easy, welcome to like.