14 JavaScript Debugging Tips you may not know

knowing your tools can greatly help you accomplish your task. Although JavaScript debugging is cumbersome, you can still solve these errors (errors) and problems (bugs) with as little time as possible with the skill (tricks).

we'll list 14 debugging tips You might not know about, but once you know it, you'll be eager to use them the next time you need to debug your JavaScript code!

Start now.

While many techniques can also be used on other inspection tools, most of the techniques are used in Chrome Inspector and Firefox.

1. ' Debugger; '

' Debugger ' Is my favorite debugging tool outside of Console.log, simple violence. As long as it's written in the code, Chrome automatically stops there when it runs. You can even wrap it up with conditional statements so you can execute it when you need it.

2. Export the objects to a table

Sometimes you may have a bunch of objects to look at. You can use Console.log to output each object, you can also use the console.table statement to output them directly as a table!

Output Result :

3. Try all the dimensions

while it's cool to put all kinds of mobile phones on the table, it's unrealistic. Why not choose to directly adjust the interface size ? The Chrome Browser offers everything you need. Go to the Check panel and click on the ' Switch device mode ' button so you can resize the window!

4. How to quickly locate DOM elements

On The element panel, mark a DOM element and use it in Concole. The history of Chrome Inspector holds the latest five elements, the last marked element is counted as "$", the penultimate one is labeled "$", and so on.

If you mark the elements in order as follows ' item-4′, ' item-3 ', ' item-2 ', ' item-1 ', ' item-0 ', you can get to the DOM node in Concole:

5. Test cycle time with Console.time () and Console.timeend ()

This tool can be very useful when you want to know the execution time of some code, especially when you're positioning a very time-consuming loop. You can even set up multiple timer by tag . The demo is as follows:

Operation result :

6. Get stack trace information for a function

you may know The JavaScript framework generates a lot of code--quickly.

It creates a view trigger event and you end up wondering how the function call happened.

because JavaScript is not a very structured language, and sometimes it is difficult to fully understand what is going on and when it happens. This is the time for Console.trace (only trace at the terminal) to debug JavaScript.

Let's say you want to see a car instance call the full stack trace information for the Funcz function on line 33rd:

33 Rows output:

you can see that func1 called Func2, and Func2 called Func4 again. Func4 created an instance of car, then called method Car.funcx, and so on.

Although you feel you have a good understanding of your scripting code, this analysis is still useful. For example, you want to optimize your code. Gets the stack trace information and a list of all related functions. Each line is clickable, and you can travel back and forth between them. It feels like a menu specially prepared for you.

7. Formatting code makes debugging JavaScript easy

Sometimes you find that the product has a problem, and the source map is not deployed to the server. Don't be afraid. Chrome can format JavaScript files to make them easy to read. The formatted code may not be as readable as the source code--but at least you can observe the errors that occur. Click the Beautify code button {} below the source viewer.

8. Quickly find the Debug function

To see how to set breakpoints in a function.

There are usually two ways to do this:

1. Locate a line of code in the viewer and add a breakpoint here
2. Add debugger to the script

Both of these methods must find the line in the file that needs to be debugged.

using the console is a less common approach. Using Debug (funcName) in the console, the code stops when it enters the function specified here.

This operation is fast, but it cannot be used for local functions or anonymous functions. However, if this is not the case, this may be the quickest way to debug a function. (Note: This is not a call to the console.debug function).

Enter debug (car.funcy) in the console and the script will stop running when it enters car.funcy in debug mode:

9. Block irrelevant code

today, multiple libraries or frameworks are often introduced into your application. Most of them are well tested and relatively free of defects. However, the debugger still enters files that are not related to this debugging task. The solution is to screen out scripts that do not require debugging. This, of course, can include your own scripts as well. Click here to read more about debugging irrelevant code (http://raygun.com/blog/javascript-debugging-with-black-box/).

10. Find the key in the complex commissioning process

in more complex debugs, we sometimes need to output a lot of lines. The thing you can do is to keep a good output structure and use more console functions such as console.log,console.debug,console.warn,console.info,console.error and so on. Then, you can quickly browse through the console. But sometimes, some Javascrip debugging information is not what you need.

now, you can beautify the debugging information yourself. When debugging JavaScript, you can use CSS and customize the console information:

Console.todo = function (msg) {

Console.log ('% c% s% s% s ', ' color:yellow; background-color:black; ', ' – ', MSG, ' – ');

}

Console.important = function (msg) {

Console.log ('% c% s% s% s ', ' Color:brown; font-weight:bold; text-decoration:underline; ', '-', MSG, '-');

}

Console.todo ("This was something that's need to be fixed");

Console.important (' This was an important message ');

Output:

For example:

In Console.log (), you can set the string with%s, set the number%i, set the custom style in %c, and much better use of the Console.log () method. If you are using a single-page application framework, you can create a style for the view message, create another style for the model (models), collection (collections), Controller (controllers), and so on. Maybe you can play your imagination like Wlog,clog and Mlog!

11. View the specific function call and its parameters

in the Chrome browser console, you will focus your attention on specific functions. Each time this function is called, its value is recorded.

Then output:

This is a good way to see which parameters are passed to the function. But I have to say, if the console can tell us how many parameters we need, that's fine. In the above example, the function 1 expects 3 parameters, but only 2 parameters are passed in. If the code is not processed in the code, it may cause a bug.

12. Quick access to elements in the console

A faster way to execute queryselector in the console is to use the dollar symbol. $ (' Css-selector ') will return the first matching CSS selector. $$ (' Css-selector ') will return all. If you use an element more than once, it is worth being used as a variable.

Postman is great (but Firefox is faster)

Many developers use Postman to handle Ajax requests. Postman really good, but every time you need to open a new browser window, write a new request object to test. It's kind of annoying.

Sometimes it is easier to use the browser directly in use.

In this case, if you want to request a page that is secured by a password, you no longer need to worry about verifying The issue of cookies. This is how you edit and resend the request in Firefox.

Open the profiler and go to the Network page, right-click the request you want to process, select Edit and Resend. Now you can change how you want to change it. You can modify the header information, or you can edit the parameters and click Resend. Now I've sent the same request two times, but with different parameters:

14. Interrupt when node changes

DOM is an interesting thing. Sometimes it changes, but you don't know why. However, if you need to debug javascript,chrome, you can pause processing when the DOM element changes. You can even monitor its properties. On the Chrome Profiler, right-click an element and select the break option to use:

The text is reproduced from the public number: front-end development.

14 JavaScript Debugging Tips you may not know