JS Debug Series: Primary Knowledge console

Write at the beginning: In fact, I was thinking about whether to write this thing, because this thing is really not difficult, but why there are so many people ask, they ask not how to use the console, but do not know the console can do, they also know that there are console.log and other things, But they don't know why they use such a long string instead of the alert output message. There was enough alert in their eyes. OK, I admit the small spit trough, but this series I only intend to introduce the basic knowledge of debugging, will not involve too deep, because the depth of things combined with JS knowledge, if you JS not to a realm, 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.

Of course, the warrior will float over, or spit a trough a line.

In fact, do web development know this thing, whether it is the front-end or the background, but a lot of people only stay in the HTML view and CSS modification, completely did not use the console.
Maybe some people just get started and don't know about this stuff.
This thing the information on the net catch a lot of, but do not talk about debugging, just introduce basic how to use it.

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.
Our article takes chrome as an example to explain why, because I like Chrome. Turnip cabbage each their own.
Ps:ff used to be the world of Firebug, and now the original is very good.

Now let's press F12. Open the console and click Console.

Can see my head and a few lines of text, but there are a few lines below, we temporarily ignore, will be explained later.
In fact for this F12, the most exact term is the Developer tool, console this is the console.
PS: As a basic tutorial, I only introduce the Console and Sources aspects of debugging, other functions to understand it.

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.") separately.  and console.log ("hehe .", "haha..") Then 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].
This is the real problem that many new friends meet.

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.
For example:

var arr = [{name: "Nina", age:22}, {name: "Nikki Mei", Age:20}];for (var i=0; i<arr.length; i++) {console.log (arr[i]);}

You can see the object information directly without displaying [object object] to make us confused.

Did you suddenly feel like the console.log dick blew?
In fact, this is just the tip of his iceberg, I will try to show you some of his advantages.
To continue with the steps just now, we enter arr directly and then enter.

is not more hanging, now you can directly click on the object to expand the array of objects to view, even the loop output is saved.
That's the charm of the console, and it's just his basic function.

Let's get to know the next console object and how we can use it.
Enter console and enter to expand this object,

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. I don't like to use it very much.

Let's go one step at a glance, anyway, starting with log dir, most of the debugging depends on them.
PS: In fact, should give you official documents, but recently Google can't open, so self-Baidu to view the function of each method.

Have a couple of lessons to practice: (open Baidu First, then open the console)
1 viewing element information with ID KW1 in the console
2 Then use the Console.dir method to view information about the KW1 element