快捷導(dǎo)航

js調(diào)試系列控制臺(tái)命令行API使用方法

更新時(shí)間：2014年06月18日 11:06:52 投稿：mdxy-dxy

上次初步介紹了什么是控制臺(tái)，以及簡單的 console.log 輸出信息。最后還有兩個(gè)小問題，我們就當(dāng)回顧，來看下怎么操作吧

先打開百度，然后按 F12 打開后，如果不是 Console 項(xiàng)的就點(diǎn)擊 Console 這項(xiàng)，因?yàn)槲覀円诳刂婆_(tái)操作。。
看到如下內(nèi)容：

好了我們先清空內(nèi)容，可以右擊選 Clear console 菜單，或者輸入 clear() 都行。
接著，我們輸入 document.getElementById('kw1'); 然后回車，就可以看到 id 為 kw1 的元素信息了。

是不是很簡單。下一步是用 console.dir 查看該元素信息。
輸入 console.dir(document.getElementById('kw1')); 然后回車，出來一個(gè)奇奇怪怪的東西。

你可以點(diǎn)這個(gè)東西，然后他會(huì)展開，列出所有屬性方法。簡單說就是這個(gè)元素的 dom 屬性方法。
好了，這個(gè)我就不詳細(xì)說了，反正 dir 方法也是調(diào)試?yán)髦弧?/p>

這些問題其實(shí)是今天內(nèi)容的一個(gè)伏筆，剛才我們看到如何在控制臺(tái)查看一個(gè)元素以及他的屬性方法。
其實(shí)控制臺(tái)為我們提供了很多命令行api，簡單點(diǎn)說就是只有控制臺(tái)能用的函數(shù)。
目前控制臺(tái)方法和屬性有：(chrome 34)

復(fù)制代碼代碼如下:

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

ps: 至于怎么查看這些東西，以后會(huì)講，暫時(shí)怕各位理解不了。
你也可以參閱《console對(duì)象#3.命令行API》來看下他的一些用法。

我們常用的其實(shí)就是 $, $_, $0-$4, dir, keys, values 這些，其他的有興趣或者想深入學(xué)習(xí)的，自己去翻閱資料吧。

復(fù)制代碼代碼如下:

$ // 簡單理解就是 document.querySelector 而已。

$$ // 簡單理解就是 document.querySelectorAll 而已。

$_ // 是上一個(gè)表達(dá)式的值，console對(duì)象#3.命令行API 里有說明。

$0-$4 // 是最近5個(gè)Elements面板選中的DOM元素，待會(huì)會(huì)講。

dir // 其實(shí)就是 console.dir

keys // 取對(duì)象的鍵名, 返回鍵名組成的數(shù)組

values // 去對(duì)象的值, 返回值組成的數(shù)組

好了，從解釋上來說確實(shí)不難理解，但是沒操作過，誰也不知道會(huì)發(fā)生什么。

該死的百度，竟然加載了 jQuery 1.10.2，本來說百度環(huán)境干凈，比較合適講這個(gè)，結(jié)果尼瑪坑啊。。
我們換soso來講解好了。。打開 http://www.soso.com/ 然后打開控制臺(tái)。
現(xiàn)在我們通過 $ 來查看 id 為 query 的元素(和百度的 kw1 元素一樣都是搜索框)，然后查看該元素的屬性方法。

和剛才一樣的功能，但是現(xiàn)在的代碼已經(jīng)非常精簡了，用到了 $, dir, $_ 這個(gè)三個(gè)控制臺(tái)屬性和方法，是不是瞬間讓調(diào)試變的簡單了？
可能有人會(huì)說，現(xiàn)在一般用的都是jQuery，要查看這個(gè)怎么辦？
回到百度，我們來做剛才的那個(gè)操作。

和剛才的有一點(diǎn)點(diǎn)不一樣，因?yàn)?$('#kw1') 這一步得到的是 jQuery 對(duì)象，所以我們dir出來的也是jQuery屬性方法。
如果要看真實(shí)元素的屬性方法，加一個(gè)[0]即可

當(dāng)然如果你就是要看 jQuery對(duì)象，那就完全沒問題了。。調(diào)試嘛，當(dāng)然要一邊調(diào)，一邊試?yán)病！?br /> 其實(shí)還有一個(gè)非常簡單的方法，就是點(diǎn)擊左上角那個(gè)放大鏡圖標(biāo)，然后選擇那個(gè)輸入框。

這樣我們可以直接用 $0 進(jìn)行查看，剛才已經(jīng)介紹了 $0-$4 了，就是這個(gè)功能，簡單吧。
我們來簡單說下 keys 和 values 吧，這個(gè)之后也會(huì)用到。。但是有些人還是喜歡直接dir查看。

復(fù)制代碼代碼如下:

var obj = {name: '尼瑪', age:22, desc: '屌絲一個(gè)'};

相信聰明的你一看就懂，一點(diǎn)就通。

好了，今天的內(nèi)容差不多就這些了，當(dāng)然自己要去試一遍，不然沒法真正學(xué)到這些知識(shí)點(diǎn)的。。
要是光看就會(huì)了，我們就全是高考狀元了，不是么。

最后說個(gè)小技巧，就是之前輸入過的命令，不必重新輸入，可以通過方向鍵 ↑ 和 ↓ 進(jìn)行上下查找，這個(gè)功能和 cmd 類似哦，非常方便。。

課后練習(xí)：（現(xiàn)在直接按F12打開控制臺(tái)）
1. 查看文章下方推薦這個(gè)功能所調(diào)用的函數(shù)源碼 (當(dāng)然你點(diǎn)下推薦也可以哦，我沒攔著你。o(∩_∩)o )
2. 定位到函數(shù)所在文件位置。(高潮要來了)
3. 修改函數(shù)使其無效。(其實(shí)就是簡單的全局修改調(diào)試。)

最后，，如果哪里講的不對(duì)，或者理解不了，或者進(jìn)度跟不上等等等等，請(qǐng)跟帖吐槽。
還有如果你希望我加入什么內(nèi)容，或者調(diào)試什么真實(shí)項(xiàng)目或者插件，也可以跟帖哦，當(dāng)然如果非常麻煩的項(xiàng)目，我也沒辦法寫文章介紹了，，我又不是文章。。。

您可能感興趣的文章: