First open Baidu, then press F12 to open it. If it is not the Console item, click the Console item because we want to operate it in the console. .
See the following content:
Okay, let’s clear the content first, you can right-click and select the Clear console menu, or enter clear().
Next, we enter document.getElementById('kw1'); and then press Enter to see the element information with id kw1.
Isn't it very simple? The next step is to use console.dir to view the element information.
Enter console.dir(document.getElementById('kw1')); and then press Enter and something strange comes out.
You can click this thing, and it will expand and list all the attribute methods. Simply put, it is the dom attribute method of this element.
OK, I won’t go into detail about this. Anyway, the dir method is also one of the debugging tools.
These questions 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 us with many command line APIs. To put it simply, it is a function that only the console can use.
Currently, the console methods and properties are: (chrome 34)
The code copy 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 them later. I am afraid that you will not understand them for the time being.
You can also refer to "Console Object #3. Command Line API" to see some of its usages.
What we often use is $, $_, $0-$4, dir, keys, values. If you are interested or want to learn in depth, please read the materials yourself.
The code copy is as follows:
$ // Simply understand it is document.querySelector.
$$ // Simply understand it is document.querySelectorAll.
$_ // is the value of the previous expression, and the console object #3. command line API is explained.
$0-$4 // is the DOM element selected in the last 5 Elements panels, and will be discussed later.
dir // It's actually console.dir
keys // Take the key name of the object, return an array composed of key names
values // Remove the value of the object and return an array of values
OK, it is indeed not difficult to understand from the explanation, but it has not been done before, and no one knows what will happen.
Damn Baidu, it actually loaded jQuery 1.10.2. Originally, Baidu's environment is clean and it is more appropriate to talk about this, but it turned out to be a fool. .
Let's change to soso to explain. . Open http://www.soso.com/ and then open the console.
Now we use $ to view the element with id query (like the kw1 element in Baidu), and then check the attribute method of the element.
The same function as before, but the code is now very simple. Using the three console properties and methods of $, dir, $_, does it instantly make debugging easier?
Some people may say that nowadays, jQuery is usually used, what should I do if I want to check this?
Back to Baidu, let’s do the operation just now.
It's a little different from the one just now, because the $('#kw1') step gets a jQuery object, so the jQuery attribute method we dir also comes with.
If you want to see the attribute method of the real element, add a [0]
Of course, if you just want to see the jQuery object, then there is no problem. . As for debugging, of course you have to try it while adjusting. .
In fact, there is another very simple method, which is to click the magnifying glass icon in the upper left corner and select the input box.
In this way, we can directly use $0 to view it. We have introduced $0-$4 just now. This is the function, it is simple.
Let’s briefly talk about keys and values, which will be used later. . But some people still like to view it directly.
The code copy is as follows:
var obj = {name: 'Nima', age:22, desc: 'Silk One'};
I believe that you can understand it at a glance and understand it at a glance.
Okay, today's content is almost all that. Of course, I have to try it myself, otherwise I will not be able to really learn these knowledge points. .
If we can just read it, we will all be the top scorers in the college entrance examination, right?
Finally, let me tell you a little trick, which is to use the commands I entered before, you don’t need to re-enter. You can search up and down through the arrow keys ↑ and ↓. This function is similar to cmd and is very convenient. .
After-class exercises: (Now press F12 directly to open the console)
1. Check the function source code recommended by this function below the article (of course you can click the recommendation, I didn't stop you. o(∩_∩)o )
2. Position to the file location where the function is located. (The climax is coming)
3. Modify the function to invalidate it. (In fact, it is just simple global modification and debugging.)
Finally, if what is said is wrong, or you can't understand, or you can't keep up with the progress, etc., please post and complain.
Also, if you want me to add something, or debug any real projects or plug-ins, you can also post it. Of course, if it is a very troublesome project, I can't write an article to introduce it. I'm not an article. . .