Five JavaScript debugging tools that are useful to know

You look at the code and can not understand - why! Why he does something unexpected, and in general, if the deadline is not near, interesting. However, all these surprises, in any case, need to get rid of.



Before you, having thrown everything else, will rush to put in a heap the lines of programs found somewhere that seem to be able to solve your problem, please answer three questions:
')

1. What actions do you expect from your program?
2. Why do you expect this from the program?
3. Does the program do what you expect from it?

If you can’t answer the first two questions - good luck with copy-paste, but if you know what you expect from the code and why - there are tools that can help you understand whether the code does what is expected of it.

After you are convinced that your expectations regarding a certain fragment of the program were met, or you were able to correct the error, go to the next fragment and check it. Here are some useful tools to help you get the bugs out of the blue.

Checking variable values

Let's start, beyond the main list of debugging tools, from the simplest and most obvious. The console.log() command can be very useful for checking things like variables declared with var and let , constants declared using const , arguments objects and this . At the time of the output of the values ​​of these data are relevant, but be aware that sometimes the Chrome console displays the data updated after the execution of the program. Be careful about the data, followed by a light blue icon with a white letter “i”.


Work in the browser : be careful with the displayed data, after which there is a light blue icon with a white letter "i". This data may have been updated after program execution.

# 1: Chrome Developer Tools - Debugger

A more reliable alternative to using console.log() is the Chrome debugger. In order to use it, add the debugger command to the line of your code in which you would like to examine the values ​​of variables. Save the file, then open the Chrome developer toolbar, for example, with the following commands:

 iOS: Cmd + Opt + I Windows: Ctrl + Shift + I 

Go to the page whose code you are exploring, say, it could be something like localhost:PORT_NUMBER or the address of the page on the site being developed, or, if the page is already open, reload it. The execution pauses with the debugger command and you can explore the program.


Work in the browser : execution will pause at the debugger command and you will be able to explore the program

Using the debugger command is similar to adding a breakpoint from the Sources panel in the browser, but the main difference to which you should pay attention is that the breakpoints are tied to line numbers. Suppose you set a breakpoint on line 20, and then reworked the code and deleted line 8. What was on line 20 will now be on line 19 and you will have to move the breakpoint to a new place. Details on debugging in Chrome and various useful information about this process can be found in the documentation .

Please note that similar debugging tools are available in Firefox , Safari and Edge browsers .

Chrome Developer Tools - Network tab

If you don’t know if a server request has been made, go to the Network tab of the Chrome developer tools. Look at the call list for the request that you are not sure about. You can check the status code of the request, view the request headers and other information about it.


Browser operation : The Network tab of the Chrome developer tools shows server requests. Clicking the query string allows you to view headers and other information.

# 2: React Developer Tools

If your application is based on React and you need to check the values ​​of properties or states, you should get acquainted with the React Developer Tools extension for Chrome. It will immediately become your best friend.

By adding this extension to Chrome and navigating to the page created with React, you will see the React tab in the developer console, which displays the property and state values ​​for the item you click.


Browser operation : React tab shows property values ​​and states if they exist for the selected item

# 3: Debugging Server Code and Node Inspect

So, you are sure that the program works, that the data goes to the server, but you do not know whether Node or Express correctly routes and processes the request. If you are using an application whose source code you cannot take a look at, for example, it is some kind of API of a third-party service, then read the documentation. If you develop and maintain the server yourself, then you should get acquainted with Node Inspect.

Node Inspect is similar to the Chrome developer tools, but it is intended for server-side code. Before using this tool, check the version of Node, it should be at least 6.6, and the version of Chrome, which should be at least 55. If these requirements are met, open a command prompt and execute the following command:

 node --inspect PATH_TO_YOUR_SERVER_FILE 

After that you should see a message in which the link is most interesting to us.


Debug Server Code : Enable the Node Debugger

This link should be opened in the browser, after which you can use familiar tools to debug the server code.

If you want to be at the forefront of debugging progress, take a look at this material , which discusses setting up an environment for debugging client-side and server-side JavaScript programs in the same window of Chrome’s developer tools at the same time.

# 4: checking server response - Postman

If you are sure that the request has been sent to the server, but you don’t know exactly what it looks like in response, or even if anything has come at all, Postman will help you understand the situation. Although this comrade is not a superman from comics, he definitely saved several developers.

Postman is a desktop application, it must be downloaded and installed. It allows you to select the type of request (among them - GET, POST, PUT, PATCH, DELETE), add the endpoint you need, and if necessary, enter the data for authentication, and send the request to the server. The server response will appear in the application on the Body tab.


Work in Postman : select the type of request, enter information about the end point, data for authentication, and click the Send button. The server response will appear on the Body tab.

This tool is very useful in cases where you need to make sure that what you expect from it comes from the server, that is, to make sure that the function on the client that processes the server’s responses can deal with the data received. Details about working with Postman can be found in his documentation .

# 5: syntax errors and webpack

In dealing with syntax errors, a linter connected to a text editor, such as ESLint , is very useful. Error messages in the browser console or on the command line also usually help to understand what you should pay attention to and what line to look for in the text to correct the syntax error. Another useful syntax checker, although less well known for this quality, is Webpack . Yes - this is the same Webpack that is used to compile modules.

If the Webpack cannot assemble a module, it will give an error message from which you can learn a lot of useful information. Therefore, if you refresh the page and nothing new appears in the browser, take a look at what Webpack displays in the terminal and see if it can compile what you are trying to work with.


Working with Webpack : If Webpack cannot compile the code, it will generate an error and information about exactly where, up to the character in the string, it occurred.

Results: what to do if the error does not disappear

If you, in spite of everything, cannot cope with an error, prepare a short and precise question, ask it to the manager, a colleague, or ask for advice in any suitable forum. Your problem will surely be solved.

Dear readers! How are you looking for errors in javascript code?