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).
- Add Breakpoints
- View and Modify Global, Local, and Closure Properties
- Develop, Save and Run Snippets
- View the Call Stack
- Black Boxing
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
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.
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.
- Set Breakpoint
- Start debugging
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.
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.