Chrome除錯小技巧

前言：

除了我們日常使用的除錯方法，在chrome中，其含有一些有意思的方法，有助於提高我們的開發除錯效率。

sources頁

command + p檔案跳轉

使用sublime的人或習慣用command + p進行檔案的跳轉，在chrome dev tools中其實也有類似的跳轉方法。

command 

+p  
command +p 
+檔名+:
+數字

sublime中使用command +r進行方法跳轉，而在dev tools中，可以使用command + shift + o進行任意方法的跳轉。

command 

+shift 
+o  
// 跳轉到任意方法

elements頁

console頁

$_表示上次的計算結果

舉個栗子

15*15

$_ *
10

選中dom之後，在控制台輸入$0。

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

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

當頁面沒有引入jquery等類庫的時候，這是我們一般會用。

document.queryselector()或是document.queryselectorall()來作用dom選擇器。

而在chrome除錯中我們可以使用是$(selector)與$$(selector)來作為選擇器，省去大串**，如下。

$

('body'
)（資質代辦）$$(
'body'
)

copy(object) 拷貝物件

copy

(document
.body
)copy($0
)

console.time & console.timeend 計算耗時

對**執行的耗時情況進行測試時，處理手工在**中建立前後兩個時間戳進行對比，在dev tools中，我們可以使用console.time與console.timeend實現。

console

.time
("測試用時"
);var
array
=new
array
(1000000
);for
(vari =
array
.length -1
;i >=0;
i--)
;console
.timeend
("測試用時"
);

Chrome除錯小技巧

除了我們日常使用的除錯方法，在chrome中，其含有一些有意思的方法，有助於提高我們的開發除錯效率。command p檔案跳轉 使用sublime的人或習慣用command p進行檔案的跳轉，在chrome dev tools中其實也有類似的跳轉方法。command p command p 檔名 數...

Chrome 除錯技巧

可快速關注 alert console 基本輸出 console.log在控制台輸出點東西，其實console還有其它的方法 console.log 列印字串 在控制台列印自定義字串 console.error 我是個錯誤 在控制台列印自定義錯誤資訊 console.info 我是個資訊 在控制台列...

Chrome 除錯技巧

前言 除了我們日常使用的除錯方法，在chrome中，其含有一些有意思的方法，有助於提高我們的開發除錯效率。使用sublime的人或習慣用command p 進行檔案的跳轉，在chrome dev tools中其實也有類似的跳轉方法。command p command p 檔名 數字 sublime中...