20 x Chrome Devtools Debugging Tips

Translator by:Chrome Devtools is powerful and can even replace the IDE!

• Original: Art of debugging with Chrome DevTools

In order to ensure readability, this paper uses free translation rather than literal translation. In addition, the copyright of this article belongs to the original author, translation is only used for learning.

Google Developer Tools offers a range of features to help developers debug Web applications efficiently, allowing them to find and fix bugs faster. There are a lot of useful gadgets in Google's developer tools, but many developers don't know about them. Through this article, I share with you the features of the highly efficient debug Chrome developer tools I use.

For the sake of brevity, I'll use it 开发者工具 to 谷歌开发者工具 refer to it next .

Before we start, you need to do some preparatory work.

using the Canary version

If you want to use the latest version of Google and developer tools, you can download the Canary version and even set it up to develop the default open browser. The canary version is designed to provide the latest updates to early adopters. It may be unstable, but most of the time it's fine. You should get used to using the latest and strongest Google Chrome.

1. Open the experimental features of the developer tools

You can go to the chrome://flags page and then turn on the Developer Tools experiments options.

When turned on, on the Developer Tools Settings page, you can find one more Experiments option. If I use some features you do not see, then please go to the Experiments window to open.

2. Super Experimental function

If the feature I use is not in the Experiments list, then it may be a WIP feature (WIP refers to working in progress). You can turn it on: Experiments the page is in the interface, tapping the shift key 6 times to turn on the WIP feature.

Console

When we debug, we are dealing with the console most of the time. We often insert many console logs in our code to debug by printing variable values. Given that the console is so important to us, it is necessary to understand the relevant APIs and shortcut keys provided by all developer tools.

3. Always Print objects

My first advice is not really about developer tools, but a technique I've been using. When used console.log(); , not only the variables are printed, but the objects are printed, and {} the variables are enclosed in curly braces (). The advantage is that not only will the value of the variable be printed, but the variable name will also be printed.

4. Use console.table to print multi-item data

If the variable you want to print is an array, each element is an object. I recommend that you use console.table it to print, and that its tabular rendering is more readable and aesthetically pleasing.

5. Add color to log

Log sometimes becomes very much, including your own, some third-party extensions or browser logs. In addition to using filters, you can also use colors to better differentiate between them.

6. $ and $$

If you do not have any libraries under the $ console $$ , you can use them as document.querySelector() document.querySelectorAll() shortcut keys for each.

In addition to providing a quicker way, there is a benefit of $$ returning an array instead of Array-like nodelist. So you can use the map, reduce, and filter functions directly.

You can use $$ the invalid link in the check page:

Promise . All ( $$ (' a ') . Map (link = link.href) . map (href = fetch (HREF)) ) . Then (console.log (' all links working ')) . catch (console.error (' Some links are broken '));

7. $

If you want to reference a DOM element, use the $0 . $0points to the element you are currently selecting in element. If specified $0 , $1 points to the previously selected element. And so on, until $4 you can use them.

8. $_

$_The last expression evaluated on the console was recorded.

9. Geteventlisteners ()

getEventListeners(domElement)Returns all the events registered on the DOM element. Take a look at the following example:

You may have noticed that when I enter an expression in the console, the result is immediately calculated. You can see that I didn't hit the enter key and the result was shown. This is a new feature of the Canary version, called "Eager Evaluation".

Debug (FN)

In the example above, if you want to pause during the execution of a button, you can use the debug function. debug(fn)receives a function as a parameter, and every time the function is called, debugger interrupts execution on the first line of the function.

Imagine that you have a problem with debugging a button, but you don't know where the event function for this button is located in the code. In addition to the large number of source code to find out slowly, there is a clever way. Use getEventListeners the function and then debug inject the method in. This way, when you click on the button, it will stop at the first line of the function.

One. Copy (obj)

copy(anything)is a useful tool function for you to copy anything to the system's Clipboard staging.

copypassing in an unformatted JSON to the function returns the formatted result:

Top-level await

async/awaitMakes asynchronous operations easier and more readable. The only problem is that await it needs to be used in the async function. If we are going to use it in the Devtools console, we need some special treatment, using immediately invoked Async Function E Xpression (Iiafe). It's not convenient at all. Fortunately Devtools has supported the direct use of await.

Debugging in the Sources panel

In the source panel, using Breakpoints,stepping-into, Stepping-over, and so on, you can control the execution state of the program very well to discover the code problem. Next I will not introduce the basic content that everyone knows, but some of the tips and tricks that I often use.

13. Turn on Auto-pretty print

In the Canary version of experimental mode, you can turn on the auto-beautify code mode.

14. Use conditional breakpoints to inject console logs in a production environment

Breakpoints are a great feature. But there's a better one: conditional breakpoints. The interrupt will only be executed if the set condition is met. This means that Devtools does not interrupt the execution of the program every time, but only when you want it to break. To learn more: check here.

In a production environment, because the source code cannot be modified, I prefer to use conditional breakpoints to inject console.log. If my breakpoint is just a console.log,devtools not interrupted, because console.log returns undefined, it is a false value. But it executes the expression I injected, and I can see the output.

Why not just use normal breakpoints and look at the variables? Sometimes I don't want to do that. For example, when I was analyzing frequently performed operations, such as touch or swipe. I don't want to cause the debugger trigger to break every time, but I want to see the results of the program output.

15. Pause UI display results in hover State

It's hard for us to examine an element that is only shown in the hover state. For example, how to check a tooltip? If you right-click and select Check, the element has disappeared. Well, is there a way?

That's how I do it:

1. Open the Sources panel
2. Show tooltip
3. Use the shortcut key to pause the execution of the script (hover over the paused icon to see the shortcut key)
4. Go back to the elements panel and check the elements as usual.

XHR Breakpoints

If you want to understand how a request is performed, you can use the XHR breakpoints of the sources panel.

17. Using Devtools as the IDE

Devtools's source panel can be said to be quite powerful. You can quickly find, jump to a line, a function, execute a piece of code, use a multiline cursor, and so on. These features are described in detail in this medium article.

So why not move the entire development here? This makes it unnecessary to waste time switching between the IDE and the browser.

If you have a project built using Create-react-app or VUE-CLI, you can simply drag the entire folder down to the sources panel. Devtools will automatically map all the files. So, you can change the file under Devtools and view it now. In this way, the overall development efficiency, especially the debugging efficiency has definitely improved.

18. Use network overrides to easily debug production code

If you are debugging a bug in a production environment, you can use it network overrides to debug instead of building the entire configuration locally.

You can easily download a local version of any remote resource, and then you can edit it under Devtools, and Devtools will update the file to show your edits.

In a production environment, it can also be easily debugging, and doing some performance testing has become easier.

Nodejs Debugging

If you want to use Devtools's debugger to debug the node. JS application, you can use --inspect-brk flag to open:

Node--inspect-brk script.js

Jump to the chrome://inspect page, in the Remote Target options, you can see the node program.

Also, in Devtools you will see a green node icon, and clicking on the icon will open the Chrome Debugger for node.

If you want to debug your unit test with Devtools debugger, you need to call this:

Node--inspect-brk./node_modules/.bin/jest

However, this is actually very troublesome, we need to find the corresponding path. Googlechromelabs recently released a new tool that is very useful, called: NDB. With NDB, you only need to:

NDB npx Jest

If you have a custom script, you can call this:

NDB NPM Run Unit

Even better, if you downgrade in a configured package.json project ndb , he will even automatically analyze the scripts in Package.json to make it easier for you to use Devtools directly.

20. Use Snippets to assist debugging

Devtools provides a tool to create and save small pieces of code, and I like to use them to speed up my work. For example lodashify?—? can add Lodash to any application quickly.

(function () { ' Use strict '; Document.createelement (' script '); "Https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"; "Text/javascript"; Document.head.appendChild (Element); })();

Another small tool function is used to enhance the properties of the object, each time it is accessed or modified, it will provide me with sufficient information, such as who visited, who changed it. It's very useful in debugging.

const traceproperty = (object, property) = { let value = Object[property]; object.defineproperty (Object, property, { get () { console.trace ( ' ${ Property} requested '); return value; Console.trace ( ' setting ${property} to ', newvalue); value = newvalue;

There are also a lot of very useful devtools code snippets that you can take directly to use.

20 x Chrome Devtools Debugging Tips