js デバッグ シリーズ コンソール コマンド ライン API の使用方法_javascript スキル

まず Baidu を開き、F12 を押します。開いた後、コンソール項目ではない場合は、コンソールで操作するため、コンソール項目をクリックします。 。
以下を参照してください:

まずコンテンツをクリアしましょう。右クリックして [コンソールのクリア] メニューを選択するか、clear() と入力します。
次に、 document.getElementById('kw1'); と入力して Enter を押すと、kw1 という ID の要素情報が表示されます。

とても単純なことではありませんか。次のステップでは、console.dir を使用して要素情報を表示します。
console.dir(document.getElementById('kw1')); と入力して Enter を押すと、何か奇妙なものが表示されます。

これをクリックすると展開され、すべての属性メソッドがリストされます。簡単に言うと、この要素のdom属性メソッドです。
まあ、これについては詳しく説明しませんが、dir メソッドもデバッグ ツールの 1 つです。

これらの質問は、実際には今日の内容の伏線です。先ほど、コンソールで要素とその属性メソッドを表示する方法を説明しました。
実際、コンソールには多くのコマンドライン API が用意されており、簡単に言えば、それらはコンソールでのみ使用できる機能です。
現在のコンソールのメソッドとプロパティは次のとおりです: (chrome 34)

コードをコピーします コードは次のとおりです:

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy" 、"clear"、"getEventListeners"、"undebug"、"monitor"、"unmonitor"、"table"、"$0"、"$1"、"$2"、"$3"、"$4"、"$_"]

ps: これらの確認方法については、後で説明しますが、今は理解できないと思います。
「コンソール オブジェクト #3. コマンド ライン API」を参照して、その使用法の一部を確認することもできます。

私たちが一般的に使用するものは、実際には $、$_、$0 ～ $4、dir、key、value です。興味がある場合、または詳細を知りたい場合は、自分で情報を読むことができます。

コードをコピーします コードは次のとおりです:

$ // 簡単に理解すると、単なる document.querySelector です。
$$ // 簡単に理解すると、単なる document.querySelectorAll です。
$_ // は、前の式、コンソール オブジェクト #3 の値です。コマンド ライン API に指示があります。
$0-$4 // は、最後の 5 つの要素パネルで選択された DOM 要素です。これについては後で説明します。
dir // 実際には console.dir
キー // オブジェクトのキー名を取得し、キー名の配列を返します
value // オブジェクトの値を取得し、値の配列を返します

Okay, it’s really not difficult to understand in terms of explanation, but no one knows what will happen if you haven’t done it before.

Damn it, Baidu actually loaded jQuery 1.10.2. Originally, Baidu had a clean environment, so it was more appropriate to talk about this, but it turned out to be a scam. .
Let's switch to soso to explain it. . Open http://www.soso.com/ and then open the console.
Now we use $ to view the element with id query (which is a search box like Baidu's kw1 element), and then view the attribute methods of the element.

The same function as before, but now the code is very streamlined. The three console properties and methods $, dir, $_ are used. Does debugging become easier instantly?
Some people may say that jQuery is generally used nowadays. 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 previous one, because $('#kw1') gets the jQuery object in this step, so what we dir out is also the jQuery attribute method.
If you want to see the attribute methods of the real element, just add [0]

Of course, if you just want to look at jQuery objects, that's totally fine. . When it comes to debugging, of course you have to adjust and test at the same time. .
In fact, there is a very simple method, which is to click on the magnifying glass icon in the upper left corner and then select the input box.

In this way, we can directly use $0 to view. We have just introduced $0-$4. 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 directly in dir.

Copy code The code is as follows:

var obj = {name: 'Nima', age:22, desc: '屌丝一'};

I believe you are smart and can understand it at a glance.

Okay, that’s pretty much it for today. Of course, you have to try it yourself, otherwise you won’t be able to truly learn these knowledge points. .
If we could just read it, we would all be top scorers in the college entrance examination, right?

Finally, a little tip is that you don’t have to re-enter the commands you entered before. You can use the arrow keys ↑ and ↓ to search up and down. This function is similar to cmd and is very convenient. .

Exercise after class: (Now press F12 directly to open the console)
1. View the source code of the function called by Recommendation at the bottom of the article (Of course you can also click Recommend, I’m not stopping you. o(∩_∩)o )
2. Locate the file location where the function is located. (The climax is coming)
3. Modify the function to make it invalid. (In fact, it is a simple global modification and debugging.)

Finally, if something is wrong, or you can’t understand it, or you can’t keep up with the progress, etc., please comment in the thread.
Also, if you want me to add any content, or debug real projects or plug-ins, you can also leave a comment. Of course, if it is a very troublesome project, I can't write an article to introduce it, and I am not an article. . .