Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How can we debug JavaScript using Firefox?
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.
2K+ Views
