Browser built-in console function Usage Details

Source: Internet
Author: User

Browser built-in console functions are relatively easy to use:ChromeAndFirefox(Firebug plugin)

Using this function can be like running JS directly in the Panel (the writing method is different)

 

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.

Four other statements:

Console.info ("this is Info ");
Console. debug ("this is debug ");
Console. Warn ("this is warn ");
Console. Error ("this is error ");

 

2. placeholders

Only characters (% s), integers (% d or % I), floating point numbers (% F), and objects (% O) are supported.

 

3. group display

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

 

Iv. Console. dir ():Show all attributes and methods of an object

 

 

5. Console. dirxml ():Display HTML/XML Code contained by a page Node

 

 

6. Console. Assert (): Determines whether an expression or variable is true.

If the result is no, a message is output on the console and an exception is thrown.

 

7. Console. Trace () :Tracing function call traces

For example, the page has JS functions.

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

 

IX. Performance Analysis

Performance analysis (Profiler) is used to analyze the running time of each part of the program and 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 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" (Profiler) 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.

 

Source: http://www.cnblogs.com/see7di/archive/2011/11/21/2257442.html

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.