How to debug JavaScript using console. log ()

1. What is console. log ()?
In addition to some older browsers, most browsers now have built-in debugging functions. Even if there is no debugging function, you can install plug-ins to supplement it. For example, in earlier versions of Firefox, there is no built-in debugging tool. In this case, you can install the Firebug plug-in to add debugging functions. In a browser with debugging functions, a member variable named console is registered in the window object, which refers to the console in the debugging tool. You can print information on the console by calling the log () function of the console object. For example, the following code prints "Sample log" on the console ":
Copy codeThe Code is as follows: window. console. log ("Sample log ");
The preceding code can ignore the window object and be abbreviated:
Copy codeThe Code is as follows: console. log ("Sample log ");
Console. log () can accept any string, number, and JavaScript Object. Similar to the alert () function, console. log () can also accept line breaks \ n and tabs \ t. The debugging information printed by the console. log () statement can be seen in the debugging console of the browser. The console. log () behavior may vary in different browsers. This article mainly discusses the use of console. log () in Firebug.
2. Compatibility with Browsers without the debugging Console
For browsers of earlier versions that lack the debugging console, the console object in the window does not exist, so you can directly use the console. the log () statement may cause errors (NULL pointer errors) inside the browser, and eventually crash in some older browsers. To solve this problem, you can manually define the console object and declare that the log function of the console object is an empty function. In this way, when the console. when the log () Statement is executed, these old browsers will not do anything:
Copy codeThe Code is as follows: if (! Window. console ){
Window. console = {log: function (){}};
}
However, in most cases, there is no need to do this compatibility work-debugging code such as console. log () should be removed from the final product code.
3. Use Parameters
Similar to the alert () function, console. log () can also accept variables and splice them with other strings:
Copy codeThe Code is as follows: // Use variable
Var name = "Bob ";
Console. log ("The name is:" + name );
Unlike the alert () function, console. log () can also pass variables as parameters to strings. The syntax is the same as that of printf in C:
Copy codeThe Code is as follows: // Use parameter
Var people = "Alex ";
Var years = 42;
Console. log ("% s is % d years old.", people, years );
The execution result of the above Code is: "Alex is 42 years old ."
4. Use other log levels
In addition to console. log (), Firebug also supports different log levels: debug, info, warn, and error. The following code prints information at different log levels on the console:
Copy codeThe Code is as follows: // Use different logging level
Console. log ("Log level ");
Console. debug ("Debug level ");
Console.info ("Info level ");
Console. warn ("Warn level ");
Console. error ("Error level ");
You can see from the Firebug console that the color and icon of printed information at different log levels are different. You can also select different log levels in the console to filter the information: