9Debugging JavaScript Tips Using Chrome and Firefox Built-in Debugging Tools

We usually use Chrome or Firefox's built-in debugging tools to debug JavaScript. This article lists several debugging tips for JavaScript. Mastering them will help us spend less time solving errors and bugs, thereby improving development efficiency.

1. debugger

In addition to console.log, debugger is our favorite and fastest debugging tool. Chrome will automatically stop at the execution point after the code is executed. You can even encapsulate it into a conditional statement to run it only when needed.

if (thisThing) { 
 debugger; 
}

2Display objects in a table

Sometimes, there is a group of complex objects to view. You can use console.log to view and scroll through them, or use console.table to expand and see the content being processed more easily!

var animals = [ 
 { animal: 'Horse', name: 'Henry', age: 43 }, 
 { animal: 'Dog', name: 'Fred', age: 13 }, 
 { animal: 'Cat', name: 'Frodo', age: 18 } 
]; 
console.table(animals); 

3Use different screen sizes

It's great to install different mobile device simulators on the desktop, but it is not feasible in reality. How to adjust the window size? Chrome provides everything you need. Go to the console and click the 'Toggle Device Mode' button. Observe the window changes!

　

4Use console.time() and console.timeEnd() to test loops

It is very useful to know the execution time of certain code, especially when debugging slow loops. You can even set multiple timers by passing different parameters to the method. Let's see how it works:

console.time('Timer',1); 
var items = []; 
for(var i = 0; i < 100000; i++{ 
 items.push({index: i}); 
} 
console.timeEnd('Timer',1); 

The following results were produced:

　

5Format the code before debugging JavaScript

Sometimes the code may have issues in the production environment, but your source maps are not deployed in the production environment. Don't worry. Chrome can format your JavaScript files. Although the formatted code is not as useful as the real code, it can at least show what has happened. Click the {} button in the Source Code Viewer in the Chrome console.

　

6Observe the invocation and parameters of a specific function
In the Chrome console, you can observe specific functions. Each time the function is called, the parameters passed in will be printed.}}

var func1 = function(x, y, z) { 
//.... 
}; 

Output:

　

This is a good way to see the parameters passed to the function. However, it would be better if the console prompts us with the number of formal parameters. In the above example, func1expected3parameter, but only2parameter. If this parameter is not handled in the code, it is likely to cause an error.

7Quickly access elements in the console

A faster method than querySelector in the console is to use the dollar sign, $('css-selector') will return the first matching item of the CSS selector. $$('css-selector') will return all matching items. If you use an element multiple times, you can save it as a variable.

　

8Postman is great (but Firefox is faster)

Many developers use Postman to view AJAX requests. Postman is really great. But opening a new window, writing a request object, and then coming back to test them seems麻烦.

Sometimes it's easier to use a browser.

When you view using a browser, if you request a password verification page, you don't need to worry about authentication cookies. Below is how to edit and resend a request in Firefox.

Open the console and switch to the Network tab. Right-click on the required request, then select Edit and Resend. Now you can change anything you want to change. Change the title and edit the parameters, then click Resend.

Below are the two requests I initiated with different properties:

　

9Breakpoint on Node Change

DOM is an interesting thing. Sometimes it changes, and you don't know why. However, when you are debugging JavaScript, Chrome can pause when the DOM elements change. You can even monitor its properties. In the Chrome console, right-click on the element, then select Breakpoint in the settings:

The web debugging tools built into Chrome and Firefox are very powerful, with many very practical features waiting to be discovered by everyone.