Use of commandlinie in firebug

Commandlinie is a useful feature in firebug. If you have experience using Microsoft Visual Studio, you will know "immediate window"
And "Watch window", I think of CommandLine in AutoCAD, through quick input command to complete the operation.

The command line in firebug is more like "immediate window", and you can detect the value in the code at any time. One advantage of firebug command line is that it can be "designed"
View the code. Another advantage is that you can write JS statements in the command line and execute them immediately.

The detailed API of firebug CommandLine can be seen in the official address: http://getfirebug.com/commandline.html

The following is a detailed introduction:

The type of the command line. Firebug has two types of command lines: 1. Single-line mode; 2. Multi-line mode;

1. Single Row mode. The single-line mode is the default command line mode of firebug. It allows us to enter a line of code at a time. The single-row mode supports Automatic completion.
This is very powerful. Just like in a terminal, you can also use the up/down key to call commands that have been recently used.
2. multiline mode. Multi-line mode is an enhanced version of single-line mode. It allows us to input multiple lines of code at a time and execute it immediately.
Both modes have their own advantages. You can select the appropriate mode based on your own situation.

CommandLine API example.

Before using the API, you need to remind me that although these Apis can be used at runtime and debug, they are especially useful in debug. Let's take a look at why.

API list:

1. $ (ID );
2. $ (selector );
3. $ X (PATH );
4. dir (object );
5. dirxml (node );
6. Cd (window );
7. Clear ();
8. Inspect (object [, tagname]);
9. Key (object );
10. Values (object );
11. debug (FN) & undebug (FN );
12. Monitor (FN) & unmonitor (FN );
13. monitorevents (object [, tagname]) & unmonitorevents (object [, tagname]);
14. Profile (title) & profileend ();

1. $ (ID ).
Those who have used prototype must be very friendly.
By the way, its usage is the same as $ in prototype. in single-line mode, the command prints the selected elements to the console.
In the multiline mode, you can use it as in prototype.
If you are not familiar with prototype, you can view connections in references to learn more.

2. $ ().
Returns the array of elements selected by the given CSS selector.
As for CSS selector, I believe that people who know CSS have some impressions. jqueyr makes CSS selector very popular.
I tried several common jquery statements on the console. It seems that the support is not good enough.

3. $ X (XPath ).
Returns the array of elements under the given XPath.
For example, in a div containing multiple p, we can use the following code to obtain each P.
VaR OBJ = $ X ('html/body/Div/p ');
Console. Log (OBJ [0]. ID );
Console. Log (OBJ [1]. ID );
Console. Log (OBJ [2]. ID );

4. dir (object ).
Print all attributes of an object. The result format is the same as that seen in the DOM tag.
In fact, this usage is the same as console. dir.
VaR OBJ = $ X ('html/body/Div/p ');
Dir (OBJ );

5. dirxml (note ).
Print the tree structure of XML or HTML elements. The printed result is as shown in the HTML Tag.
We have also touched on the console. dirxml () usage before, and these two methods are the same.

6. Cd (window ).
CD is used to switch between different windows in the frame layout, But it is said that it is not perfect.

7. Clear ().
Clear the console content, just like using console. Clear () in JavaScript.

8. Inspect (object [, tabname]).
You can detect an element in the most suitable tag. You can also use tabname to specify the tag to be opened.
For example:
Inspect ($ ('txt1'), 'html ');
The HTML Tag is opened and the element with the ID of txt1 is selected.

9. Keys (boject ).
Returns an array of names of all attributes of an object with the specified name. The specified name can be a JavaScript Object or HTML Dom element.
Function car (){
This. Model = "Old Model ";
This. getmanufactor = new function (){
Return "Toyota ";
}
}
VaR o = new car ()
We can use keys (o) to obtain all the attributes of the car object.

You can also obtain the names of all attributes of the HTML element, such as keys ($ ('txt5 '));

10. Values (object ).
Returns an array of attribute values contained in an object.
Like keys, we can either use JavaScript or HTML elements.

11. debug (FN) and undebug (FN ).
Add or delete breakpoints at the beginning of a program.

12. Monitor (functionname) and unmonitor (functionname ).
Enable or disable function call records.
Generally, if we want to know whether a function is executed, we will add an alert () or console. Log () to record it.
This is really a tiring job, especially when editing a large script file, we need to find this function and add it to alert, console. Log
Save and run again. We need to constantly save, modify, and run the function to check that it has been executed.
With firebug, you no longer need to be so tired. You only need to know this function, and then you can track it. As long as it is executed, the execution will be printed in
Console window. In addition, the console also provides a connection to this function.

Use method Monitor (func1); after finding the cause of the problem, we can also remove the function Tracing Through unmonitor (func1.

13. monitorevent (object [, Types]) and unmonitorevent (object [, Types]).
Enable or disable recording of object actions.

Types indicates the types of events we want to track. The most common types are 'mouse 'and 'key'
Complete parameter types include: "composition", "contextmenu", "drag", "Focus", "form", "key", "load", "mouse ", "mutation", "paint", "scroll", "text", "UI", and "XUL"

Unfortunately, this API does not work very well and I hope the author can improve it in subsequent versions.

14. Profile ([title]) and profileend ([title])
For this command, I 'd like to read the previous article to familiarize myself with it. This is the same as console. Profile (). It is used to record JS execution on the page.
Then, an analysis report is provided.

Finally, we hope that every developer who uses firebug can improve their development efficiency.

[References]
1. firebug CommandLine http://michaelsync.net/2007/09/15/firebug-tutorial-commandline-api
2. Prototype http://www.prototypejs.org/

 

[From]: http://www.cnblogs.com/cocowool/archive/2009/05/23/1487569.html