Chrome除錯小技巧

2022-03-29 06:37:05 字數 2003 閱讀 3406

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

command + p檔案跳轉

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

command +p  

command +p +檔名+:+數字

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

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

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

$_表示上次的計算結果

舉個栗子

15*15$_ *10

$0獲取當前選中的dom選中dom之後,在控制台輸入$0

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

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

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

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

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

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

由上圖實際結果看出,$()$$()獲取得到的都是滿足選中條件元素的乙個集合,相當於document.queryselectorall()注: 實驗所用chrome版本:40.0.2214.111 (64-bit)

copy(object) 拷貝物件

copy(document.body)copy($0)

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

console.time & console.timeend 計算耗時

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

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

關閉console介面esc…

原文源自:alloyteam——

Chrome除錯小技巧

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

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中...