How to Debug JavaScript   

Writing codes frequently results in errors, which may be logical or of the syntax type. These errors can greatly complicate both users’ and programmers’ logic and understanding. Additionally, there may be mistakes in the code that are unnoticeable to the programmer’s sight yet nonetheless cause havoc. To debug is difficult. But fortunately, there is a JavaScript debugger included in every current browser. Debuggers that can examine the complete program or code, find the mistakes, and correct them are needed to find these errors. 

This guide will take you through JavaScript debugging in different browsers.

How to Debug JavaScript

The console.log() method can be used to troubleshoot the code. You can use the console.log() method to examine the value you want to be sure is right.

You can pass an object or just a message string to console.log(object, message).

The debugger keyword terminates the code’s execution and invokes the debugging function. Nearly all JavaScript engines offer a debugger. 

You can also set a breakpoint to debug JavaScript. At each breakpoint, JavaScript will pause execution so that you can inspect the values. After that, you can continue running the code.

How To Debug JavaScript in Chrome  

Here are some fast ways to use DevTools for debugging JavaScript with Chrome if you’re planning to debug JavaScript in Chrome.

1. Add Breakpoints 
2. View and Modify Global, Local, and Closure Properties
3. Develop, Save and Run Snippets 
4. View the Call Stack 
5. Black Boxing

Add Breakpoints

Adding Breakpoints mostly serves to pause the code. Testing each line of code before continuing is helpful for developers. Breakpoints can help debug large JavaScript programs by pointing out errors.

To access the lines of code to create a breakpoint, click the left navigation panel and choose the.js file in the DevTools Sources Panel.  Select “Add Breakpoint” from the context menu when you wish to add a breakpoint to a line.  As a result, after placing a breakpoint, the code pauses at the breakpoint. 

View and Modify Global, Local, and Closure Properties 

When the code has been paused by the addition of breakpoints, you can see and modify the local, closure, and universal properties. You can test the features in this phase to evaluate if the result is sufficient or requires more editing. It is simpler to execute the precise section of code to verify functions when there are breakpoints. 

When the “Scope” panel is clicked, a new panel appears with information that can be used to remedy errors.

Develop, Save and Run Snippets

Snippets can now be used to create, store, and run scripts in any area. Click on the Snippets menu on the left side to add a snippet. In the middle panel, click “+ New Snippet,” and then type the code. Press Ctrl + S (Windows) or Command + S (Mac) to save the sample. Click “Run” and then press Command + Enter (Mac) or Ctrl + Enter (Windows) to launch the snippet.

View the Call Stack  

It is possible to view the call stack using Chrome DevTools. It is primarily utilised by JavaScript programs with a high number of asynchronous functions and errors.

The call stack is a fantastic tool for debugging large programs since it allows you to see the program’s functions and makes it simple to determine which routines are causing problems.

You can view the functions by opening the Call Stack by clicking the “Source” Panel.

Black Boxing

Some scripts in the JavaScript software work without displaying any errors and must be disregarded while debugging. In order to avoid debugging these particular scripts, you can employ black boxing in this situation.  

How To Debug JavaScript in Firefox? 

Users must open the developer tools in Firefox in order to debug the code with that browser. A debugger can be found in any modern browser, and Firefox is no exception. 

Developers can right-click on the screen and select “inspect” to launch the developer tools in Firefox. After that, users can launch Firefox’s debugger panel.

Press cmd + shift + I on a Mac or ctrl + shift + I on a Windows or Linux computer to access Firefox’s developer tools.

Three sections make up the debugger panel. The files and directories are in the first part, while the source code editor is in the middle.

By selecting the file from the first part, you can open any file in the middle section. Additionally, you can modify the code and test it using different test cases. The debugger’s essential tools are all included in the third section.

The final section displays all of the variables’ breakpoints, values, and scope. In addition, we can use the third section of the source panel to establish breakpoints for any event.

1. Set Breakpoint
2. Start debugging

Set Breakpoint 

Breakpoints are a crucial component of code debugging. The code will stop running whenever the user places a breakpoint, allowing them to see the values of all elements when execution control hits that line.

By clicking on the line number, users can set the breakpoint at any line of code. Users can go to the event listener area in the third portion and select the breakpoint for any event there to set the breakpoint for any event. In our instance, we’ll pick the breakpoint indicated by the arrow in the image below for the mouse click event. Users must choose the click event’s checkbox.

Start Debugging 

Now, it will begin to debug the entire event listener when you submit both strings. Put the values in the input box now, then hit submit. 

Users can watch it begin debugging on the event listener’s first line. Press the arrow button in the top-right corner to view the debugging process. 

The third component of the debugger panel’s scope section requires users to keep track of the values of all the variables.

Additionally, the programmer can use the console to debug the code. Using console.log(), you can establish breakpoints in the code, see what code outputs and what doesn’t and examine the way the code runs. It will take some time to detect faults using this method, so it is preferable to utilise Firefox’s debugger feature.

Conclusion

We hope this guide helped you understand debugging in JavaScript better. So, play with the console, and try on how to debug your code.

5 Day Coding Challenge – learn JavaScript basics

Code Institute’s free 5 Day Coding Challenge can offer you some insights into HTML, CSS & JavaScript. The best thing about the challenge, other than learning the basics, is that it’ll let you know if you have an aptitude for software development. Register for this weekly challenge through the form below. Alternatively, if you want to learn more about our Full Stack Software Development programme, follow this link.