Chrome 除錯技巧

2021-09-19 15:52:11 字數 1703 閱讀 5773

前言:

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

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

command + p  

command + p + 檔名 + : + 數字

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

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

注: 查詢某檔案中的方法,使用command + p 和 command + shift + o 更配哦~

舉個栗子

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

$0
注:$1 $2 $3 是獲取前幾次選的dom,不常用

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

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

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

由上圖實際結果看出,$()和$$()獲取得到的都是滿足選中條件元素的乙個集合,相當於document.queryselectorall()

注: 實驗所用chrome版本:40.0.2214.111 (64-bit)

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

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

console.time("測試用時");

var array= new array(1000000);

for (var i = array.length - 1; i >= 0; i--) ;

console.timeend("測試用時");

Chrome 除錯技巧

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

chrome 除錯技巧

利用devtool 提供的copy 實現快速複製。ctrl shift p 搜尋screen下的capture full size screenshot實現快速截圖。ctrl shift p 搜尋 theme 相關的選項,實現明亮 暗黑兩種主題之間的切換 console.log li 會直接渲染成e...

Chrome 除錯技巧

寫在前面本文包括瀏覽器除錯,不包括web移動端除錯。本文除錯均在chrome瀏覽器進行 這個不用多說了,不言自明 注意上面輸出的error和throw出的error不一樣,前者只是輸出錯誤資訊,無法捕獲,不會冒泡,更不會中止程式執行。除此以外,console還支援自定義樣式和類似c語言的 print...