Home > Web Front-end > JS Tutorial > body text

Detailed explanation of console.log() JavaScript debugging skills_javascript skills

WBOY
Release: 2016-05-16 16:55:09
Original
919 people have browsed it

1. What is console.log()?
Except for some very old versions of browsers, most browsers today have built-in debugging functions; even if they do not have debugging functions, they can be supplemented by installing plug-ins. For example, older versions of Firefox do not have built-in debugging tools. In this case, you can add debugging capabilities by installing the Firebug plug-in. On browsers with debugging capabilities, a member variable named console will be registered in the window object, which refers to the console in the debugging tool. Information can be printed in the console by calling the log() function of the console object. For example, the following code will print "Sample log" in the console:

Copy the code The code is as follows:
window .console.log("Sample log");

The above code can ignore the window object and be directly abbreviated as:
Copy code The 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 newline character n and tab character. The debugging information printed by the console.log() statement can be seen in the browser's debugging console. The behavior of console.log() may be different in different browsers. This article mainly discusses the use of console.log() in Firebug.
2. Compatible with browsers without debugging console
For older browsers that lack debugging consoles, the console object in the window does not exist, so console.log() is used directly. statement may cause an error within the browser (null pointer error) and eventually cause some older browsers to crash. In order to solve this problem, you can manually define the console object and declare the log function of the console object to be an empty function; in this way, when the console.log() statement is executed, these old versions of browsers will not do anything:
Copy code The 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 Removed from the code.
3. Using parameters
Similar to the alert() function, console.log() can also accept variables and splice them with other strings:
Copy code The code is as follows:
//Use variable
var name = "Bob";
console.log(" The name is: " name);

Different from the alert() function, console.log() can also accept variables as parameters and pass them into strings. Its specific syntax is the same as the printf syntax in C language. Consistent:
Copy code The 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 a variety of different log levels: debug, info, warn, error. The following code will print information about these different log levels in the console:
Copy the code The 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");

As you can see from the Firebug console, the colors and icons of the printed information of different log levels are different; At the same time, you can select different log levels in the console to filter this information:
Detailed explanation of console.log() JavaScript debugging skills_javascript skills
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template