JS Debug Console.log Use summary diagram

An example

print strings and objects;

Expandable objects to view internal conditions;

Look at the definition of the console object itself;

Output object condition;

The file where the Utag object resides;

Output object;

Two Console.log Summary 1
If you JS not to a state, I even teach you to debug bugs, crack some plug-ins and so on, you do not know what I am doing. My goal is only to let you know the console, let you get started debugging, then the road will depend on your own walk.

Whether it is Chrome Firefox IE (8 or above) or 360 Rapid browser Sogou browser and so on, just press F12 to open the console.
In fact for this F12, the most exact term is the Developer tool, console this is the console. Right-click the Clear Console menu or enter clear () and press ENTER to empty the console content.
Let's take the first step to output information with Console.log.
Enter Console.log ("hehe.") and Console.log ("hehe:", "haha ...") and press ENTER to see the output in the console.
is actually the output information and, very simple, with him instead of alert and document.write debugging, your work will become very easy.
For example, to debug a loop in this part of the code, but there are dozens of or even hundreds of elements in the array, alert you will be crazy,
Document.Write is not a good thing either, but for object output, you can only see things like [Object Object].

If you use Console.log instead of alert document.write to output object information, you can expand this object in the console to view specific information.
You can see the object information directly without displaying [object object] to make us confused.

It is now possible to view the objects in this array directly by clicking on the object, and even the loop output is saved.
That's the charm of the console, and it's just his basic function.

Can look at some dark and light-colored things, dark is we can directly call the method, the light color represents the default properties or methods, show no need to care, and later have the opportunity to say.
In fact, only log dir is commonly used, other really rarely used, to advanced debugging will be used.
Group,table, such as the auxiliary nature, can not be used, see you like it.
2

Before debugging the code, with the execution of the JS code, usually by using alert in the code block to see the execution of the JS code, and today also see a friend using the Console.log function printout function, variable, object, The following is a record of the use of Console.log, the specific syntax is:
Console.log ("Value:", FN);
Console.log () Can output variables, functions, arrays, objects, etc.

3

Console.log was originally the "patent" of Firefox, strictly speaking is installed after the firebugs Firefox unique debugging "trick".
This trick, IE8 learned, but use than firebugs trouble, only in the Debugging window (F12), the console.log can produce results, or error.
See Opera today also has a called Dragonfly, with this thing to see DOM, already can and Firebug comparable, however still can't use Console.log. So someone has provided two lines of code:

Window.console = Window.console | | {};
Console.log | | (Console.log = Opera.posterror);

After testing, the above code works.
At this point, Firefox/ie/opera can use Console.log.
Of course, IE and Opera under the Console.log than firebugs original Console.log, or is too simple, such as the parameter is an Object or an array without further display function.

Variable
var i = ' I am a string ';
Console.log (' variable: ', i);
Array
var arr = [1,2,3,4,5];
Console.log (' array: ', arr);
Object
var obj1 = {
Key1: ' value1 ',
Key2: ' value2 ',
Key3: ' Value3 '
};
var obj2 = {
Key6: ' Value4 ',
Key5: ' Value5 ',
Key4: ' Value6 '
};
var obj3 = {
Key9: ' Value7 ',
Key8: ' Value8 ',
Key7: ' Value9 '
};
Console.log (' object: ', obj1);
Object array
var objArr1 = [Obj1,obj2,obj3];
var objArr2 = [[Obj1],[obj2],[obj3]];
Console.log (' Object array 1: ', OBJARR1);
Console.log (' Object array 1: ', OBJARR2);
/*
Output:
Variable: I am a string
Array: [1, 2, 3, 4, 5]
Objects: Object {key1= "value1", key2= "value2", key3= "Value3"}
Object array 1:[object {key1= "value1", key2= "value2", key3= "Value3"}, Object {key6= "Value4", key5= "Value5", key4= "Value6"}, Object {key9= "Value7", key8= "Value8", key7= "Value9"}]
Object array 1:[[object {key1= "value1", key2= "value2", key3= "Value3"}], [object {key6= ' value4 ', key5= ' value5 ', key4= ' Value6 '}] , [Object {key9= "Value7", key8= "Value8", key7= "Value9"}]]
*/

Note: IE browser under the default is not support Console.log, but will because of this code error, all IE under the comment off the better

4

For JavaScript debugging, using Console.log () is a better approach than alert () because the alert () function blocks the execution of the JavaScript program, causing side effects, while Console.log () The information is printed only in the console, so no similar concerns are created

First, what is Console.log ()?
In addition to some very old browsers, most browsers now have debug capabilities, and even without debugging, you can add them by installing plugins. For example, the old version of Firefox does not have its own debugging tools, in which case you can add debugging features by installing the Firebug plugin. On a browser with debugging capabilities, a member variable named console is registered in the Window object, referring to the console in the debugging tool. You can print information in the console by invoking the log () function of the console object.

Console.log () can accept any string, number, and JavaScript object. Similar to the alert () function, Console.log () can also accept newline characters \ n and tab \ T. The debug information printed by the Console.log () statement can be seen in the debug console of the browser. The Console.log () behavior may vary in different browsers,
Second, compatible browser without debug console
For older browsers that are missing the debug console, the Console object in window does not exist, so using the Console.log () statement directly may cause errors inside the browser (null pointer errors) and eventually cause some older browsers to crash. 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, so that when the Console.log () statement executes, these older browsers will not do anything:
The code is as follows:
if (!window.console) {
Window.console = {log:function () {}};
}
However, in most cases, it is not necessary to do this compatibility work-console.log () and other debugging code should be removed from the final product code.
Third, the use of parameters
Similar to the alert () function, Console.log () can also accept variables and splice them with other strings:
The code is as follows:
Use variable
var name = "Bob";
Console.log ("The name is:" + name);

Unlike the alert () function, Console.log () can also accept variables passed as arguments to a string, with specific syntax consistent with the printf syntax in the C language:
Copy the code code as follows:
Use parameter
var people = "Alex";
var years = 42;
Console.log ("%s is%d years", people, years);
The above code executes as follows: "Alex is-years old."
Iv. use of other log levels
In addition to Console.log (), Firebug also supports a number of different log levels: Debug, info, warn, error. The following code prints information for these different log levels in the console:
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");

From the Firebug console, you can see that different log levels of printing information are not the same color and icon, and you can filter the information by selecting a different log level in the console

JS Debug Console.log Use summary diagram