Ten must master the Chrome Developer Tools

Some debugging features Chrome provides when troubleshooting fault code is very helpful. In fact, because Google browser debugging tools provide too much, many have been hiding, waiting for you to explore.

Disclaimer: This article has been author Ferenc Almasi translation authorization.

Author | Ferenc Almasi

Translator | obviously moon, Zebian | Guo Rui

Head Figure | CSDN download from Eastern IC

Exhibition | CSDN (ID: CSDNnews)

The following is the translation:

Chrome DevTools (Developer Tools) team (monthly https://developers.google.com/web/updates/capabilities ) will be posted on their website update, you can also on their official Twitter account ( HTTPS: // twitter.com/chromedevtools ) to find some great tips on. If you would like more information about the tools provided by Chrome, I highly recommend viewing these two sources of information.

In this article, I collected 10 I often use, but others may not know the function. They help me simplify the workflow, you can get more done in a shorter period of time.

Log holding

Here start talking about keeping the log in the console. Assuming that there was a problem occurs before or navigate to reload the page, you will try to log into the console, but everything was cleared. The solution is simple, but I do not know a long time ago:

Keeping the log in the console

Event Listener breakpoint

Typically, the problem occurs when a user interaction occurs. Capture these events to check the location and content running in the interaction very helpful. Fortunately, we can open a file by accessing js Sources tab with Ctrl + P, and examine related events in which:

Add a breakpoint event listeners

DOM breakpoint operation

For DOM manipulation can also add a breakpoint. Breakpoints may generally be in a node receiving the property changes, such as adding a certain class. In a large code repository search the relevant code will spend a lot of time, in fact, you can simply add a breakpoint for the element, then the rest to DevTools process.

Add breakpoint operation DOM node

Code coverage

Sometimes we optimize the performance of the code, the code will lead to a lot of no use but not promptly removed. With the help of coverage tool, you can analyze resources and see which line is not executed. If your concern is not all interactions, performed only interaction your concerns action helps you get accurate coverage. You can click Ctrl + Shift + P to open the Tools panel, and click the reload icon to start recording, all content is displayed in red it will not be executed.

Use DevTools View Code Coverage

Re-painting show

Unnecessary redraw can lead to performance problems. Suppose there is a countdown on your page, each update will cause the entire page redrawn. You can enable the "paint flashing" in the Render tab to solve these problems, and see which elements triggering these problems.

Similarly, Ctrl + Shift + P will pop-up toolbar.

Enable redrawn on the Rendering tab

Movie review

Now that discussed above rendering, so let's look at how to debug CSS animations. With Ctrl + Shift + P to open the Tools menu, enter "animation" Animation tag it will open for you, it will record any animation takes place on the site. You can replay them and see the extent of their loose, and then adjusted according to the time or duration:

In DevTools debug animation

Screenshots

We often need to share screenshots with others to validate changes. If you have to repeat multiple steps, this task may be time-consuming:

Open the third-party applications
Trim parts selected
Save the picture and send

This can be done in-house DevTools. You can create the entire page image view from a single node (selected nodes) or:

Create the screenshot DevTools

black box

Suppose you are debugging a problem, and you have two breakpoints in the code. You stack trace in progress, you'll find most of the information stack from the core framework document, such as React or jQuery. In order to avoid including these core files in the debugger, you can deal with them black box, which means DevTools will skip these files, so that you can concentrate on your own code.

Devtools script in black box

Local coverage

Local coverage is one of my favorite, I find myself using it more and more frequently. It is a powerful tool that enables you to load a local copy of the production files, and use them to replace the bundled copy. When a problem occurs only in certain circumstances and can not, this is especially useful in the current local multiplex.

You can enable the "Overrides" (rewritten) in the "Source" tab. If you do not see Overrides link, click on the icon Page jagged right. You can copy files to your beautiful print local files and extend it. Rewrite will reload the page maintained by.

Overwrite the files in the DevTools

Lighthouse

I find myself have been using Lighthouse panel, which is to audit your site in a variety of indicators: performance, PWA, accessibility, or search engine optimization. You can also choose to audit different devices and analog network connection, it provides what could be improved and how to improve reference for you. You can enter the "lighthouse" in the "Audits" tab, if you do not see the label, just click on the symbol to show hidden jagged label.

After the report is generated, you can save the results as JSON file import for later comparison.

The above is the need to know the 10 characteristics of Chrome development tools, they help me simplify the workflow and complete more work in less time.

What is the function of Chrome developer tools you use every day? Let us know in the comments.

Original: https: //medium.com/better-programming/10-must-know-features-of-chrome-devtools-94e4a4e530c5

About the Author: Ferenc Almasi, Hungary, front-end developers, keen to develop new designs and interactive applications. He also likes to try new technologies, create simple but attractive stuff.

Translator: Obviously moon, well-known Internet companies Java senior development engineer, CSDN blog expert.

【End】