前言：
除了我們?nèi)粘Ｊ褂玫恼{(diào)試方法，在Chrome中，其含有一些有意思的方法，有助于提高我們的開發(fā)調(diào)試效率。

Sources頁

command + p 文件跳轉(zhuǎn)

使用Sublime的人或習慣用command + p 進行文件的跳轉(zhuǎn)，在chrome dev tools中其實也有類似的跳轉(zhuǎn)方法。

command + p command + p + 文件名 + : + 數(shù)字

command + shift + o 任意方法跳轉(zhuǎn)

Sublime中使用command +R 進行方法跳轉(zhuǎn)，而在dev tools中，可以使用command + shift + o 進行任意方法的跳轉(zhuǎn)。

command + shift + o // 跳轉(zhuǎn)到任意方法

注： 查找某文件中的方法，使用command + p 和 command + shift + o 更配哦~

Elements頁

• 使用方向鍵快，上下鍵導航，左右鍵收起展開；

• H鍵快速隱藏dom（效果相當于給DOM加入visibility:hidden屬性，有別于display:none）

• Enter進行快速編輯屬性；

• 鼠標右擊使用各類方法…

Console頁

$_ 表示上次的計算結(jié)果

舉個栗子

15 * 15 $_ * 10

$0 獲取當前選中的DOM

選中DOM之后，在控制臺輸入$0。

$0

注：$1 $2 $3 是獲取前幾次選的dom，不常用

$(selector) 與 $$(selector) 獲取當前選中的DOM

當頁面沒有引入jQuery等類庫的時候，這是我們一般會用
document.querySelector() 或是 document.querySelectorAll() 來作用dom選擇器。
而在Chrome調(diào)試中我們可以使用是$(selector) 與 $$(selector)來作為選擇器，省去大串代碼，如下。

$('body')$$('body')

由上圖實際結(jié)果看出，$()和$$()獲取得到的都是滿足選中條件元素的一個集合，相當于document.querySelectorAll()
注: 實驗所用chrome版本：40.0.2214.111 (64-bit)

copy(Object) 拷貝對象

copy(document.body)copy($0)

注: 可搭配$0來拷貝當前選擇的dom，記得手動黏貼~

console.time & console.timeEnd 計算耗時

對代碼執(zhí)行的耗時情況進行測試時，處理手工在代碼中創(chuàng)建前后兩個時間戳進行對比，在dev tools中，我們可以使用console.time與 console.timeEnd實現(xiàn)。

console.time("測試用時"); var array= new Array(1000000); for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object(); }; console.timeEnd("測試用時");

關(guān)閉Console界面

ESC…

總結(jié)

以上是生活随笔為你收集整理的Chrome 调试技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。