Usage of the Firebug console

Firebug has become an indispensable tool for web developers, but in my day-to-day work, I often feel that I have not been able to dig deep into her potential, and today I spent some time carefully studying the role of console and command line usage in improving productivity,
Write it down and share it with you.

Firebug has a total of console,html,css,script,dom,net six tab, today's emphasis on the use of console.

In fact, we should be very familiar with the console, because this is firebug give a variety of information window, and this is the main purpose of console, logging (Logging).
In addition, the console provides a way to debug JavaScript through a command-line approach. Let's learn how to use the console.

1, Firefox log record (Logging in Firefox).

With the console recording method, we can no longer use annoying alert or document.write methods for debugging.
The Firebug provides five types of logs:

• Console.log: Record a line of information, without any icon hint;
• Console.debug: Record a line of information, with hyperlinks, you can link to the place where the statement calls;
• Console.error (): Write error message to console, with Error icon display and highlight code link;
• Console.info (): Write hints to the console, with information icon display and highlighting code links;
• Console.warn (): Write a warning message to the console, with a warning icon to display and highlight code links;

The Consle print string supports string substitution, which is used like printf in C ("%s", a), and the supported types include:

• %s String, string
• %d,%i Integral type
• %f floating-point
• %o Object

If you use%o, the object will be represented by a green hyperlink, and the click will take you to the DOM view.

2, grouping (Grouping).

If a particular type of information is particularly long, grouping is advantageous to the logical division.
It's simple to use, see Code.

function Consolegroup () {
var groupname = "Group 1";
Console.group ("message group%s", GroupName);
Console.log ("This are the 1 message in%s", GroupName);
Console.log ("This are the 2 message in%s", GroupName);
Console.log ("This are the 3 message in%s", GroupName);
Console.groupend ();

Goupname = "Group 2";
Console.group ("message group%s", Goupname);
Console.log ("This are the 1 message in%s", goupname);

var subgroupname = "Sub Group 1";
Console.group ("message group%s", Subgroupname);
Console.log ("This are the 1 message in%s", subgroupname);
Console.log ("This are the 2 message in%s", subgroupname);
Console.log ("This are the 3 message in%s", subgroupname);
Console.groupend ();

Console.log ("This are the 2 message in%s", goupname);
Console.groupend ();
}

3, Console.dir and Console.dirxml

Console.dir can print all the methods and properties of an object, this method is very useful, we no longer need to object.tostring such a method to support, as long as there is firebug, viewing the object also becomes very easy at the same time, we can also print the elements of the page as an object, But you have to be careful, because this will output a lot of information, you may be lost in the complex information and can not find the items you need. We can put this large amount of information into a group by grouping, which can be logically clearer.

Function Consoledir () {
    function car () {
        this . Model = "old model";
       This.getmanu = function () {
             return "Toyota";
      }
    }
                
      var objcar = new car ();
     Console.dir (Objcar);
     Console.dir (Zoo);
                
      var groupname = "Css Style";
     Console.group ("the button Style", groupname);
     Console.dir (document.getElementById (' Consoledir '). style, GroupName);
     console.groupend ();
}

Console.dirxml prints the XML representation of an HTML element.