For debugging of JavaScript programs, using console.log() is a better way than alert(), because: the alert() function will block the execution of JavaScript programs, causing side effects; while console.log() only prints relevant information in the console, so it will not cause similar concerns.
What is console.log()?
Except for some very old versions of browsers, most browsers nowadays come with debugging functions; even if there is no debugging function, they can be supplemented by installing plug-ins. For example, the old version of Firefox does not come with debugging tools. In this case, you can add debugging functions by installing the Firebug plug-in. On a browser with debugging function, a member variable named console will be registered in the window object, referring to the console in the debugging tool. By calling the log() function of the console object, you can print information in the console. For example, the following code will print "Sample log" in the console:
The code copy is as follows:
window.console.log("Sample log");
The above code can ignore the window object and directly abbreviated as:
The code copy 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 newlines/n and tab characters/t.
The debugging information printed in the console.log() statement can be seen in the debugging console of the browser. For specific viewing methods in each browser, please refer to the following web page:
http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it
The behavior of console.log() may vary in different browsers. This article mainly discusses the use of console.log() in Firebug.
Compatible with browsers without debug console
For older browsers that lack debug console, the console object in window does not exist, so using the console.log() statement directly may cause errors (null pointer errors) inside the browser and eventually cause crashes 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; this way, when the console.log() statement is executed, these old versions of browsers will not do anything:
The code copy 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.
Usage parameters
Similar to the alert() function, console.log() can also accept variables and splice them with other strings:
The code copy is as follows:
//Use variable
var name = "Bob";
console.log("The name is: " + name);
Unlike the alert() function, console.log() can also accept variables as parameters to pass into strings, and its specific syntax is consistent with the printf syntax in C language:
The code copy 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."
Use other log levels
In addition to console.log(), Firebug also supports a variety of different log levels: debug, info, warning, error. The following code will print these different log levels in the console:
The code copy 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");
From the Firebug console, you can see that the colors and icons of printing information at different log levels are different; at the same time, you can select different log levels in the console to filter this information: