JS Debug Series console command line API usage method _javascript Tips

First open Baidu, and then press F12 Open, if not the console item on the click Console this, because we want to operate in the console.
See the following:

All right, let's just clear the contents, you can right-click on the Clean Console menu, or enter clean ().
Next, we enter document.getElementById (' KW1 '); Then enter, and you can see the element information with ID KW1.

is not very simple. The next step is to view the element information with Console.dir.
Input Console.dir (document.getElementById (' kw1 ')); Then enter the car and come out with a weird thing.

You can order this thing and then he will expand and list all the property methods. Simply put, this is the DOM attribute method for this element.
OK, this I will not elaborate, anyway Dir method is also one of the debugging tools.

These questions are actually a foreshadowing of today's content, and just now we see how to view an element and his property methods at the console.
In fact, the console provides us with a lot of command-line APIs, simply speaking, only the functions that the console can use.
The current console methods and properties are: (chrome)

Copy Code code as follows:

["$$", "$x", "dir", "Dirxml", "Keys", "values", "Profile", "Profileend", "monitorevents", "unmonitorevents", "inspect", " Copy "," Clear "," geteventlisteners "," Undebug "," Monitor "," Unmonitor "," Table "," $ "," $ "," $ "," $ "," $ "," $_ "]

PS: As to how to view these things, will speak later, temporarily afraid you can not understand.
You can also refer to the Console object #3. command line API to see some of his usage.

What we often use is $, $_, $0-$4, dir, keys, values, and others who are interested or want to go deep into their studies.

Copy Code code as follows:

$//Simple understanding is document.queryselector.
$$//Simple understanding is document.queryselectorall.
$_//Is the value of the previous expression, and the console object #3. The command line API has instructions.
$0-$4//Is the DOM element selected by the last 5 elements panels, which will be spoken later.
Dir//is actually console.dir.
Key of the keys//Fetch object, returns an array of key names
Values//Go to the value of the object, an array of returned values

Well, it's not hard to understand from an explanation, but there's no action, no one knows what's going to happen.

Damn Baidu, unexpectedly loaded JQuery 1.10.2, originally said that Baidu environment clean, more appropriate to say this, the results of the pit AH.
Let's change the Soso to explain it well. Open the http://www.soso.com/and open the console.
Now we go through $ to see the element with ID query (just like the kw1 element of Baidu is the search box), and then look at the attribute method for that element.

And just the same function, but now the code has been very streamlined, using the $, dir, $_ this three console properties and methods, is not a moment to make debugging easy?
Some people may say, now generally use jquery, to see this How to do?
Back to Baidu, we do just that operation.

And just a little bit different, because $ (' #kw1 ') This step to get the jquery object, so we dir out is also the jquery attribute method.
If you want to see the property method of the real element, add a [0]

Of course, if you just want to see the jquery object, then there is no problem at all. debugging, of course, to the side of the tune, while trying.
In fact, there is a very simple way, is to click on the top left corner of the magnifying glass icon, and then select the input box.

So we can directly use the $ $ to view, just have introduced the $0-$4, is this function, simple.
Let's simply say keys and values, which will be used later. But some people prefer to see it directly with Dir.

Copy Code code as follows:

var obj = {name: ' ni ma ', age:22, desc: ' Cock silk one '};

Believe that you can understand the smart, a bit on the pass.

Well, today's content is almost all, of course, I have to try it, otherwise can not really learn these points of knowledge.
If we just look at it, we will all be top of the college entrance examination, right?

Finally said a small trick, is the previous input of the command, do not have to re-enter, you can go up and down through the arrow keys ↑ Search, this function and cmd similar oh, very convenient.

After class Practice: (Now press F12 to open the console directly)
1. View the article below recommend this function called the function source code (of course, you point to recommend also can Oh, I did not stop you.) O (∩_∩) o)
2. Navigate to the location of the file where the function resides. (The climax is coming)
3. Modify the function to invalidate it. (In fact, is simply a global modification debugging.) )

Finally, if what is wrong, or understand, or progress to keep up and so on and so on, please thread spit slot.
And if you want me to add what content, or debug what real projects or plug-ins, you can also thread oh, of course, if the project is very troublesome, I have no way to write the article introduced, and I am not an article ...