How can we debug JavaScript using Firefox?

JavascriptWeb DevelopmentFront End Technology

In this tutorial, we will learn to debug the JavaScript code using the Firefox web browser. Generally, we debug the code to fix the unknown bugs and errors. Mostly it happens with beginner programmers, code works successfully until the last night and suddenly crashes in the morning

Programmers don’t need to worry now, even if code crashes. Once you learn to debug the code, you can fix any bugs in a few minutes and make it work fine

If users want to learn to debug the code, the first step is to produce the code example with the error. So, we have an example code below which contains some errors.

Example

In the below example, we will take two input strings from the user and match the string. If the string is equal, our program returns that “both strings are equal”. Otherwise, it returns the “Both strings are not equal.” Also, we have fixed a small bug to debug our code

<html> <head> <title> Debugging the JavaScript using FireFox. </title> </head> <body> <h2> Debugging the JavaScript using Firefox. </h2> <h4> Enter the values in input box to compare it. </h4> <!-- taking input strings from the user --> <input type = "text" id = "value1"> <input type = "text" id = "value2"> <button type = "submit" id = "submit">submit</button> <div id="result"> </div> <script> let submitButton = document.getElementById("submit"); // when user clicks on the submit button, we perform string matching operation. submitButton.addEventListener('click', function () { let value1 = document.getElementById("value1"); let value2 = document.getElementById("value2"); let result = document.getElementById("result"); // get value of both the input strings // here is the bug. we are converting one string to lowercase and another string to uppercase. let input1 = value1.value.toLowerCase(); let input2 = value2.value.toUpperCase(); try { if (input1 == input2) { result.innerHTML = "Both strings are equal." } else { result.innerHTML = "Both strings are not equal." } } catch (error) { result.innerHTML = "error occured." } }); </script> </body> </html>

In the above output, users can see that even if you enter the same string to the text box, it returns the message “Both strings are not equal.”

It is a bug in our code. Now, let’s start debugging the code to overcome the bug.

Debug Example with Firefox

To debug the code with Firefox, users need to open the developer tools in Firefox. Every modern browser contains a debugger and same as Firefox is also. To open the developer tools in Firefox, users can right-click on the screen and click on the ‘inspect’ option. After that, users can open the debugger panel in Firefox

  • RightClick  inspect  debugger.

Another way to open the developer tools in Firefox is to press cmd + shift + I in Mac, and ctrl + shift + I in Windows and Linux operating systems.

  • cmd/ ctrl + shift + I  debugger.

The debugger panel contains three parts. The first part contains the files and folders, and the middle part is the source code editor.

The debugger panel contains three parts. The first part contains the files and folders, and the middle part is the source code editor.

You can open any file in the middle part by clicking on the file from the first part. Also, you can change the code and test your code for various test cases. The third part contains all the essential tools for the debugger.

The third part shows us all breakpoints, values, and scope for variables. Also, we can set the breakpoints for any event using the third part of the source panel.

Set Break Point

An essential part while debugging the code is the breakpoints. Wherever the user will add the breakpoint, our code execution will stop there, and the user can observe the values of all variables when execution control reaches that line.

Users can set the breakpoint at any line of code by clicking on that line number. To set the breakpoint for any event, users can go to the event listener section in the third part and choose the breakpoint for any event. In our case, we will choose the breakpoint for the mouse click event, as shown in the image below. Users need to check the checkbox of the click event.

Start Debugging

Now, when we submit both strings, it will start to debug the whole event listener. Now, enter the values in the input and submit it.

Users can see it start debugging from the first line of the event listener. To move it line by line press the arrow button from the top-right as shown in the image below. Also,

Users need to observe the values of all variables in the scope section of the third part of the debugger panel.

In the below image, users can see that, when we move line by line and observer the values of every variable, input1 has values in lower case and input2 has values in upper case. It means it creates a problem while matching the string.

To overcome the above bug, we need to convert both the string in lower case; we have converted one string in the upper case by mistake which we need to improve.

In this tutorial, users have learned how we can fix every small bug in the code by debugging the code in Firefox. The developer tools are the precious gift of every browser for the programmers as we can solve any errors in no time.

Furthermore, the programmer can debug the code using the console. We can set the breakpoints in the code using the console.log(), check what code prints and what does not, and check the execution flow of the code. But this method will take time to find errors, so it is better to use the debugger tool in Firefox.

raja
Updated on 30-Aug-2022 07:02:27

Advertisements