How to Debug JavaScript Functions

These days, scripting has now become a complete class of web development on its own. With the modern day libraries available, most HTML/CSS developers are taking great interest in coding JavaScript. This can be quite challenging for programmers to handle, particularly when it comes to JavaScript code debugging. The true skills of a programmers can be measured by how he/she deals with errors and bugs.

debug javascript

There is a great probability that a programmer will make a mistake when writing his/her program. This mistake in the script is known as a bug. The process of finding and even fixing these bugs is what is known as debugging and it is a normal part of your development process.

For those who are just starting out in the programming industry, checking out the various tutorials available can be quite daunting. This is because the same technique may not work at all times. However, programmers need to be patient as the debugging process will be much easier and clearer with lots of practice. These guidelines will help you achieve what you want.

For you to debug the JavaScript function, you should first invoke it and stop the execution of JavaScript inside the function’s body. You should set up a breakpoint at the start of the function's body, you can achieve this by clicking in the line number that is on the left side. If the breakpoint is properly set up, a blue marker will appear around that line number.

Perform a specific action that causes the function to launch, for example, you can click on the button on the web form, which is directly linked to the function.Some functions are not linked to a specific web element, however, they tend to be interconnected to a web page body or a global script. In such a case, you only need to press F5 so as to reload the webpage.

You can also invoke the function manually from the JavaScript console by typing the arguments and its name. You should look at the blue line and the red marker at the break point as this is an indication that you have entered your JavaScript function successfully.

debug javascript

You should then resume the execution of the script by clicking on the “Pause/Resume script execution”. This button is located on the top-right position of the Web Inspector window and it is below the field marked “Search Scripts”.

To execute your current JavaScript line you should click on the “Step over next function call” icon that is below the “Search Scripts” field. You can also click on the “Step out of current function” for you to get back to the parent function on the stack that invoked the function where the execution is stopped. To check out all the functions you can click on the “Call Stack” icon. This will display the function name, code line and module name where the execution was stopped.

You can also open and even inspect the JavaScript Console by clicking on the icon at the bottom of your Web Inspector window. This will allow you to check out the debugger messages, warnings and code errors. You can also set up additional breakpoints and continue drilling through your JavaScript functions even if the execution has already been stopped.

Image credits: Nathan SmithDmitry Baranovskiy