How to Use the command line API of the js debugging Console

Open Baidu first, press F12, and click Console if it is not a Console item, because we need to operate on the Console ..
See the following content:

Let's Clear the content first. Right-click and select the clear console menu, or enter Clear.
Then, enter document. getElementById ('kw1'); then press enter to see the element information with id kw1.

Is it easy. The next step is to use console. dir to view the element information.
Enter console. dir (document. getElementById ('kw1'); then press enter to create a strange thing.

You can click this item to display and list all attribute methods. In short, it is the dom attribute method of this element.
Well, I will not elaborate on this. Anyway, the dir method is also one of the debugging tools.

These problems are actually a foreshadowing of today's content. We just saw how to view an element and its attribute methods on the console.
In fact, the console provides a lot of command line APIs. Simply put, only functions that can be used in the console.
Currently, the console methods and attributes include: (chrome 34)

Copy codeThe Code is as follows:
["$", "$ X", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents ", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table ", "$0", "$1", "$2", "$3", "$4", "$ _"]

Ps: As for how to view these things, I will talk about it later. I am afraid you will not understand it for the time being.
You can also refer to console object #3. Command Line API to view some of its usage.

What we usually use is $, $ _, $0-$4, dir, keys, and values. If you are interested or want to learn more, read the materials by yourself.

Copy codeThe Code is as follows:
$ // Simply put, it is document. querySelector.
$ // Simply refer to document. querySelectorAll.
$ _ // Is the value of the previous expression. console object #3. The command line API contains the description.
$0-$4 // It is the DOM element selected in the last five Elements panels and will be discussed later.
Dir // is actually console. dir
Keys // get the key name of the object, an array composed of the Return key names
Values // The value of the de-object, an array composed of return values

Well, it is not difficult to understand from the explanation, but no one knows what will happen without any operation.

The damn Baidu has loaded jQuery 1.10.2. It was originally said that the Baidu environment is clean. It is more appropriate to talk about this. As a result, Nima pitfall ..
Let's change soso to explain it .. Open the http://www.soso.com/and then open the console.
Now we can use $ to view the element whose id is query (similar to Baidu's kw1 element, it is a search box), and then view the attribute method of this element.

The functions are the same as those of the previous one, but the code is already very simplified. I used the $, dir, $ _ console attributes and methods to instantly make debugging easier?
Some people may say that jQuery is usually used now. What should I do if I want to check this?
Back to Baidu, let's do the operation just now.

It is a little different from the previous one, because $ ('# kw1') obtains the jQuery object, so we dir out the jQuery attribute method.
If you want to see the attribute method of the real element, add a [0 ].

Of course, if you just want to look at the jQuery object, it's okay .. Debugging. Of course, you have to try it at the same time ..
In fact, there is also a very simple method, that is, click the magnifier icon in the upper left corner, and then select the input box.

In this way, we can directly use $0 for viewing. We have introduced $0-$4 just now. This is the function, which is simple.
Let's simply talk about keys and values, which will be used later .. However, some users prefer to directly view the dir.

Copy codeThe Code is as follows:
Var obj = {name: 'nima ', age: 22, desc: 'silk '};

Believe that you can understand what you are smart, and you can understand it at a glance.

Well, today's content is almost the same. Of course you have to try it on your own. Otherwise, you cannot really learn these knowledge points ..
If we look at it alone, we will all be the top candidates for the college entrance examination, right.

The last tips are the commands you have previously entered. You do not have to re-enter them. You can use the arrow keys "Seek" and "Seek" to perform up and down searches. This function is similar to cmd and is very convenient ..

Exercises after class: (Press F12 to open the console now)
1. Check the function source code recommended for this function at the bottom of the article. (Of course, you can click here to recommend it. I didn't block you. O (worker _ worker) o)
2. Locate the file where the function is located. (The climax is coming)
3. Modify the function to make it invalid. (In fact, it is simple global modification debugging .)

Finally, if you cannot understand or keep up with the progress, and so on, please follow the instructions.
Also, if you want me to add some content or debug some real projects or plug-ins, you can also follow the thread. Of course, if it is a very troublesome project, I cannot write an article to introduce it ,, I am not an article...