Details of console commands to make debugging JavaScript code easier

Console. Log (object [, object,...])
Output a message on the console. If multiple parameters exist, the output parameters are separated by spaces.

The first parameter can be a string that contains the formatted placeholder output, for example:

Console. Log ("The % s jumped over % d Tall Buildings", Animal, count );

The above example can be output with the following unformatted placeholderCodeReplace:

Console. Log ( " The " , Animal, " Jumped Over " , Count, " Tall Buildings " );

In addition, these two methods can be used in combination. If a placeholder is formatted and the number of parameters provided is greater than the number of placeholders, redundant parameters are appended to the string by space separation, like:

Console. Log ( " I am % s and I have: " , Myname, thing1, thing2, thing3 );

If the parameter is a javascript object, the output on the console is not a static text, but an interactive hyperlink. Click the hyperlink to view the HTML, CSS, script, and Dom windows of the object, you can use the formatted string % O to replace JavaScript objects.

Console. Log ( " Body Tag is % O " , Document. Body );

Format the string list:

Format a string	Type
% S	String
% D, % I	INTEGER (number type not supported currently)
% F	Floating point type (number type not supported currently)
% O	Link object

Console. debug (object [, object,...])
Output a message on the console, containing a hyperlink pointing to the location where the code is called. If you enter this command directly on the console, there will be no hyperlink (the same as console. Log ).

Console.info (object [, object,...])
Output a message with the "information" icon on the console and a hyperlink pointing to the Code call location.

Console. Warn (object [, object,...])
Output a message with a "warning" icon on the console and a hyperlink pointing to the Code call location.

Console. Error (object [, object,...])
Output a message with an "error" icon on the console and a hyperlink pointing to the Code call location.

Console. Assert (expression [, object,...])
Test whether expression is true. If not, a message is written in the console and an exception is thrown.

Console. dir (object)
Output all attributes of an object in the form of a list, which is somewhat similar to viewing the DOM window.

Console. dirxml (node)
Output the XML of an HTML or XML ElementSource code. Similar to what you see in the HTML window.

Console. Trace ()
Prints an interactive stack trace of javascript execution at the point where it is called.

The stack trace details the functions on the stack, as well as the values that were passed as arguments to each function. you can click each function to take you to its source in the script tab, and click each argument value to inspect it in the Dom or HTML tabs.

Console. Group (object [, object,...])
Output a message and open a nested block. The content in the block is indented. Call console. groupend () to disable the block. This command can be nested.

Console. groupend ()
Close the last block opened by console. Group.

Console. Time (name)
Create a timer named name, call console. timeend (name) to stop the timer, and output the consumed time (milliseconds ).

Console. timeend (name)
Stop the timer with the same name and output the time (in milliseconds ).

Console. Profile ([title])
Turn on the Javascript Performance Test switch. The title of the optional parameter is output at the beginning of the report when the performance test report is printed.

Console. profileend ()
Disable the Javascript Performance Test switch and output the report.

Console. Count ([title])

Writes the number of times that the line of code where count was called was executed. The optional argument title will print a message in addition to the number of the count.

Firebug is a powerful tool for web development and can greatly improve work efficiency.

However, it is not easy to get started. I have translated an article "firebug Getting Started Guide" and introduced some basic usage. Today, we will continue to introduce its advanced usage.

==========================================

Firebug console details

Http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html

The console is the first and most important panel of firebug. It is mainly used to display various types of information generated during webpage loading.

1. Command for displaying information

Firebug has a built-in console object, which provides five methods for displaying information.

The simplest method is console. Log (), which can be used to replace alert () or document. Write (). For example, if you use console. Log ("Hello World") in a web script, the console automatically displays the following content during loading.

In addition, according to the different nature of information, there are four methods for displaying information in the console object, namely the general information lele.info () and the debugging information console. debug (), warning console. warn (), error prompt console. error ().

For example, insert the following four lines in a web script:

Console.info ("this is Info ");

Console. debug ("this is debug ");

Console. Warn ("this is warn ");

Console. Error ("this is error ");

When loading, the console displays the following content.

You can see that there are different icons in front of different types of information, and each piece of information is followed by a hyperlink. Click it and jump to the corresponding line of the web page source code.

2. placeholders

Any of the above five methods of the console object can use a printf-style placeholder. However, there are few placeholders. Only characters (% s), integers (% d or % I), floating point numbers (% F), and objects (% O) are supported.

For example,

Console. Log ("% d", 2011,3, 26 );

Console. Log ("the circumference rate is % F", 3.1415926 );

% O placeholder, which can be used to view the internal situation of an object. For example, there is such an object:

VaR dog = {};

Dog. Name = "Mao ";

Dog. color = "yellow ";

Then, use the o % placeholder for it.

Console. Log ("% O", dog );

3. group display

If there is too much information, it can be displayed in groups. The methods used are console. Group () and console. groupend ().

Console. Group ("group 1 information ");

Console. Log ("first group 1 ");

Console. Log ("the first group and the second group ");

Console. groupend ();

Console. Group ("group 2 information ");

Console. Log ("second group first ");

Console. Log ("second entry in the second group ");

Console. groupend ();

Click the group title. The group information is folded or expanded.

Iv. Console. dir ()

Console. dir () can display all attributes and methods of an object.

For example, add a bark () method for the dog object in section 2.

Dog. Bark = function () {alert ("Wang Wangwang ");};

Then, the content of the object is displayed,

Console. dir (DOG );

V. Console. dirxml ()

Console. dirxml () is used to display the HTML/XML Code contained by a node on a webpage.

For example, first obtain a table node,

VaR table = Document. getelementbyid ("Table1 ");

The Code contained in the node is displayed.

Console. dirxml (table );

6. Console. Assert ()

Console. Assert () is used to determine whether an expression or variable is true. If the result is no, a message is output on the console and an exception is thrown.

For example, the following two results are no.

VaR result = 0;

Console. Assert (result );

VaR year = 2000;

Console. Assert (year = 2011 );

7. Console. Trace ()

Console. Trace () is used to track the call track of a function.

For example, there is a multiplier function.

Function add (a, B ){

Return A + B;

}

I want to know how this function is called. Just add the console. Trace () method to it.

Function add (a, B ){

Console. Trace ();

Return A + B;

}

Assume that the call code of this function is as follows:

VaR x = add3 (1, 1 );

Function add3 (a, B) {return Add2 (a, B );}

Function Add2 (a, B) {return Add1 (a, B );}

Function Add1 (a, B) {return add (a, B );}

After running, the call track of add () is displayed, from top to bottom: add (), Add1 (), Add2 (), and add3 ().

8. Timing Function

Console. Time () and console. timeend () are used to display the code running time.

Console. Time ("timer 1 ");

For (VAR I = 0; I <1000; I ++ ){

For (var j = 0; j <1000; j ++ ){}

}

Console. timeend ("timer 1 ");

IX. Performance Analysis

Performance analysis (Profiler) is an analysisProgramThe running time of each part to identify the bottleneck. The method used is console. Profile ().

Assume that there is a function Foo (), which calls the other two functions funca () and funcb (), where funca () calls 10 times and funcb () calls once.

Function Foo (){

For (VAR I = 0; I <10; I ++) {funca (1000 );}

Funcb (10000 );

}

Function funca (count ){

For (VAR I = 0; I <count; I ++ ){}

}

Function funcb (count ){

For (VAR I = 0; I <count; I ++ ){}

}

Then, you can analyze the Running Performance of Foo.

Console. Profile ('performance analyzer 1 ');

Foo ();

Console. profileend ();

The console displays a performance analysis table, as shown in.

The title bar prompts that a total of 12 functions were run, which took 2.656 milliseconds. Among them, funca () runs 10 times, taking 1.391 milliseconds, the shortest running time is 0.123 milliseconds, the longest running time is 0.284 milliseconds, and the average running time is 0.139 milliseconds; funcb () runs 1 time, taking Ms milliseconds.

In addition to the console. Profile () method, firebug also provides a "Profile" button. Click this button for the first time to start with "Performance Analysis". You can perform some operations (such as Ajax operations) on the webpage, and then click this button for the second time to end with "Performance Analysis, all operations caused by this operation perform performance analysis.

10. Attribute menu

There is an inverted triangle behind the name of the console panel. After you click it, the attribute menu is displayed.

By default, the console only displays JavaScript errors. If JavaScript warnings, CSS errors, and XML errors are selected, the related prompts are displayed.

What is useful here is "display xmlhttprequests", that is, display Ajax requests. After selection, all Ajax requests on the webpage will be displayed on the console panel.

For example, if you click a Yui example, the console will tell us that it uses ajax to send a GET request, HTTP request and response header information and content body.

[References]

* Firebug tutorial-logging, profiling and CommandLine (part I)

* Firebug tutorial-logging, profiling and CommandLine (Part II)

(End)