Firebug1.7 debugging tips-Web Front-end development 7 weapons

Firebug is the most prestigious debugger on the front end and has powerful functions. The official version of firebug1.7 has been released and is fully compatible with firefox4.0 (not compatible with versions earlier than firefox4.0). Because firebug is very easy to use, minghe does not describe firebug functions here, I will only introduce some practical firebug skills, some of which are only available in firebug1.7. some of which are common.

1. Use the "Debugger" keyword for fast breakpoint debugging

Normally, if we want to debugger the JSCodeFirst, go to the "script" Panel, find the JS file to be debugged, set the breakpoint in the line you need to debug, and refresh the page, for example:

Is there a faster breakpoint method? That is, use the "Debugger" keyword for fast breakpoint debugging, and then look down.
Add a "Debugger;" line before the code line you want to debug ;"For example

1. Debugger;
2. If(Steps.Length=0) Return False;
3. Self.Isrender=True;

Then refresh the page, such:

Disconnected! Is it very convenient? You don't need to switch to the script any more, and you need to find the corresponding debugging script. Here we only need to add a debugger; you can rest assured that the script will not report errors, of course, when you officially release the script, you must remove the debugger and keyword.

2. Quickly locate the code of the specified row

For example, you can perform the following operations to quickly locate the 122nd lines of code.
Enter "#122" in the search box to find the code of the specified line!

3. Only display the CSS attributes that work.

Firebug1.7 is enabled by default, for example:
When the first "only show applied style" option is selected, only the effective style is displayed. If we remove this option, check the effect.

If it is overwritten, the CSS attribute that does not work will appear.

4. How to view the CSS attributes of hover

If you move the mouse over a container with the hover attribute, the hover attribute will appear on the right side of the HTML panel. If you want to keep the hover attribute in the panel, see the following:

Select the last hover.

5. How to understand the "stack" in the script panel"

Stack, can be understood as the execution sequence, "monitoring" plays a micro role, let us know the assignment of variables, and monitoring plays a macro role, let us know, the script running process.
Is it rarely used? In fact, the stack information has already appeared on the panel for the first time, but few people pay attention to it. Let's take a picture and show it to you:

The highlighted part is the stack information!

6. Special debugging of the loop body

Debug the loop body. There is a cup of cake. You can set a breakpoint inside the loop. If you cycle 20 times, 20 breakpoints will be triggered ...... This is very sad and affects debugging efficiency. In fact, we only need to debug the situation of 2nd cycles.

Right-click the breakpoint and a blue pop-up layer will pop up, asking you to enter the monitoring expression. At this time, enter I = 2, and then press "F8 ", you will find that you have jumped directly to the second loop.
(The image cannot be cut down, so you cannot accept it .)

7. Open firebug in the form of an independent window

The panel of 1.7firebug can be changed to an independent window. The shortcut key is "Ctrl + F12". You can also click the position shown in figure.

8. output the log message to the console.

Output "36ria.com" in your code, as shown below:

1. Console.Log('36ria.com');
2. Console.Error('36ria.com');

The efficiency of using console. log is higher than that of the original Alert (). The key is that console. Log () will not be interrupted.ProgramRun.

9. Use the nameline tool to quickly locate objects

Step 1: This object is kissy. for an instance of STEP (), if you want to know the internal value assignment of this object, you only need to type "Step1" on the command line and the relevant information will appear on the console, then I click this information to go To the DOM details page.

 

Reprinted:

Minghe conclusion

I would like to write it here first. firebug also has other skills. I would like to add them later. I am very grateful to you for your help.

Ming River co-shadows

Ria home technology group: 24440797. You can contact minghe in the following ways: 1,Go to my weibo homepage and follow me2. My Email: riahome@126.com

In the course of hard coding, I want to subscribe... O (buy _ messages) O