JS Debugging Series initial knowledge of console _javascript skills

Write at the beginning: In fact, I was thinking about whether to write this thing, because this thing is not difficult, but why there are so many people ask, they are not asking how to use the console, but do not know what 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 alert output information. Alert enough in their eyes. Okay, I'll admit the little spit. 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 debug bugs, cracked some plug-ins and so on, you do not know what I am doing. My purpose is to let you know the console, let you get started debugging, after the road still depend on your own walk.

Of course, the Warrior, please drift, or spit a slot can also do.

JS Debug Series Directory:

In fact, do web development know this thing, whether front-end or backstage, but many people only stay in the HTML view and CSS modification, completely did not use the console.
Maybe some of the beginners do not know there is this thing.
This thing's information on the internet a lot, but did not talk about debugging, just introduce the basic how to use it.

Whether it is chrome Firefox ie (more than 8 version) or 360 fast browser Sogou browser, and so on, as long as the press F12 can open the console.
Our article takes chrome for example, not why, because I like Chrome. Each of the Chinese radish cabbage.
Ps:ff used to be the firebug of the world, and now the original birth is very good.

Now we click F12 to open the console and click on the console.

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

Empty the console by clicking the Clear Console menu in the right mouse button or by entering clean () and pressing ENTER.
Let's do the first step with Console.log output information.
Enter Console.log ("hehe ...") and Console.log ("hehe ...", "haha ...") and then press ENTER to see the output in the console.

In fact, the output of information, very simple, with his replacement for alert and document.write debugging, your work will become very relaxed.

For example, to debug the part of a loop code, but there are dozens of or even hundreds of elements in the array, alert, you will be a little crazy,
Document.Write is not a bad thing, but for object output, you can only see something like [Object].
This is a real problem that many new friends encounter.

If you use Console.log instead of alert document.write output object information, you can expand this object to view specific information in the console.
For example:

var arr = [{name: "Ni", age:22}, {name: "Neo-Mi", age:20}];
for (var i=0; i<arr.length; i++) {
	console.log (arr[i]);

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

Does it suddenly feel like Console.log's dick is exploding?
In fact, this is just the tip of his iceberg, I will try to put some of his advantages to show you.
To continue with the steps just now, we enter arr directly and then return.

is not more hanging, now you can directly click the object to expand the array of objects to view, and even the circulation of the output is saved.
This is the charm of the console, and it is only his most basic function.

Let's get to the bottom of the console object and see how we can use it.
Type the console and then enter, expand the object,

Can look at some dark and light things, dark is that we can directly call the method, the light of the default properties or methods, show no care, and later have the opportunity to say.
In fact, the common only log dir, the other really rarely used, to advanced debugging will be used.
The auxiliary nature such as group,table, can not use, see you like. I don't like to use it very much.

Let's take one step at a moment, anyway, starting with log dir, most of the debugging depends on them.
PS: In fact, should give you the official document, but recently Google can't open, so its own Baidu view the functions of each method.

Find a Chinese version, not bad, you see first "console object."

After a few classes to practice: (first open Baidu, and then open the console)
1 Viewing the element information in the console with ID KW1
2 and then use the Console.dir method to view the information of the KW1 element