I believe some netizens are not familiar with the debugging tools in Firefox. In fact, it is very simple to operate. Next, the editor will explain how to use the debugging tools in Firefox. I believe it will definitely help. you.
First open the debugging tool of Firefox browser. Below is the debugging toolbar.
Because debugging basically only uses the first four icons, only the first four are introduced here.
1. Select an element from the page
After clicking this icon with the mouse, you can select an element with the mouse on the page. Clicking on the selected element will quickly locate the code of the element. When there are many page elements, it is very convenient to use this method to select the element you want to find.
2. Viewer
The function of this icon is to display the structure of the web page code. When the mouse moves over an element in the code, the element of the web page will be highlighted.
3. Console
Generally, when debugging, you can use the console.log('content to be output') statement in the code to view the output in the console, which is used to debug simple errors.
The console page is in the same environment as the currently opened page. That is to say, the console of the current page is only valid for the current page. The console can be regarded as an extension of the js operation of the page. Moreover, the console can input and output, and can also change the display of the page.
As shown in the picture above, the display of the page has been changed. The function declaration may have different output depending on the browser version.
4. Debugger
Set breakpoint
These are the four icons in the upper left corner after the page is refreshed.
The first icon (F8), when you set two or more breakpoints, click once to run directly to the next breakpoint.
The second icon (F10), when clicked, is equivalent to the execution of one function after another.
The third icon (F11), when clicked, is equivalent to step-by-step execution.
The above three icons are often used together. When using them, observe the display on the right column.
Click to add a monitoring expression and write the variables you need to monitor.
5. Conditional breakpoint
Right-click on the line number, select Add Conditional Breakpoint, enter the condition in the pop-up input box, and when the condition is met, the breakpoint will stop execution.
Friends who don’t know how to use the debugging tools in Firefox yet, don’t miss this article brought by the editor.
