Initial Knowledge of js debugging series Console

At the beginning: In fact, I was thinking about whether to write this thing, because it is really not difficult, but why are there so many people asking why they didn't ask how to use the console, but I don't know what the console can do. They also know that there is a console. but they do not know why to use such a long string to replace alert output information. In their eyes, alert is sufficient. Okay, I admit it's a little bit of a joke, but I'm only going to introduce the Basic Debugging knowledge in this series, and it won't be too deep, because the in-depth things are combined with js knowledge, if your JavaScript code hasn't reached a level, even if I teach you how to debug bugs and crack some plug-ins, you don't know what I'm doing. My goal is to let you know the console, let you get started with debugging, and you will have to go on your own.

Of course, you can also throw a sigh of relief ..

Js debugging series directory:

In fact, all web developers know this, whether it's front-end or back-end, but many people only stay on html viewing and css modification, and do not take advantage of the console at all.
Maybe some of the beginners do not know about this ..
The data of this item is captured on the Internet, but it does not talk about debugging. It just introduces how to use it ..

Whether chrome firefox ie (version 8 or later) or sogou browser, press F12 to open the console.
This article uses chrome as an example to explain why I like chrome .. Radish cabbage has their own love ..
Ps: ff used to be the world of firebug, and now the native is also very good.

Click F12 to open the Console and click Console.

I can see my avatar and several lines of text, but there are several lines below. We will ignore them for the moment and will explain them later.
In fact, for this F12, the most accurate name is the developer tool, the Console is the Console.
PS: as a basic tutorial, I will only introduce debugging on the Console and Sources. Learn more about other functions ..

Right-click the Clear console menu or enter clear () and press enter to Clear the console content.
Let's take the first step to output information using console. log.
Enter console. log ("hehe ..") and console. log ("hehe ..", "haha .."), and press enter to view the output result on the console.

It is actually the output information. It is very simple. You can use it to replace alert and document. write for debugging, and your work will become very easy.

For example, you can debug the code in a loop, but the array contains dozens or even hundreds of elements. If you use alert, you will be crazy,
Document. write does not work either, but for object output, you can only see something like [Object object.
This is a real problem many new friends encounter.

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

Var arr = [{name: "Nima", age: 22}, {name: "Nemi", age: 20}]; for (var I = 0; I <arr. length; I ++) {console. log (arr [I]);}

We can directly see the object information without displaying [Object object.

Did you suddenly think that console. log is too bad?
In fact, this is just the tip of his iceberg. I will try to show you some of his advantages.
Continue with the previous step. Now we enter arr and press Enter.

Is it even more difficult? Now you can click the Object to expand the Object in this array to view it, saving loop output.
This is the charm of the console, and it is only his basic function.

Let's first understand the methods available under the console object for our use.
Enter the console and press enter to expand the object,

You can see some dark and light-colored things. The dark colors are the methods we can call directly. The light colors indicate the default attributes or methods. You don't need to worry about the display. You will have the opportunity to talk about it later.
In fact, only log dir is commonly used. It is rarely used by other users and can be used by advanced debugging.
Group, table, and other auxiliary properties are available and not needed. I don't like it very much.

Let's take a step by step. We should start with log dir, and most of the debugging depends on them.
PS: Actually, I should give you official documentation, but Google cannot open it recently. So check the functions of each method on Baidu.

Find a Chinese version. It's not bad. Check console object first.

Come to a few exercises after class: (first open Baidu and then open the console)
1. view the element information with the ID of kw1 in the console
2. Use the console. dir method to view information about the kw1 element.