Chrome 上開發(fā)調(diào)試的九個(gè)技巧

作者：Jimmy，鏈接：https://juejin.im/post/6881439870380834830

如果你是一個(gè)前端開發(fā)者，你接觸瀏覽器的時(shí)間會(huì)占用你工作時(shí)間的一半，甚至更多。那么我們推薦你使用谷歌瀏覽器，它是前端開發(fā)利器之一?開題前，請(qǐng)你更新谷歌瀏覽器的版本到最新。截止本文發(fā)布，鄙人window上谷歌瀏覽器為最新版本 - 版本 85.0.4183.121（正式版本）（64 位），mac上谷歌瀏覽器為最新版本 - Version 85.0.4183.121 (Official Build) (64-bit)

問：為啥要更新？答：一是為了統(tǒng)一操作講解；二是產(chǎn)品升級(jí)總會(huì)解決些遺留的問題吧，技術(shù)向前看

感興趣的伙伴可以看看官網(wǎng)的更新記錄?google web下面直接進(jìn)入正題 ?以下的操作都是在mac的谷歌瀏覽器上進(jìn)行的。window上大同小異，請(qǐng)自行腦補(bǔ)~

1. 允許重復(fù)聲明 let 和 class

在更新版本之前，我們?cè)诠雀铻g覽器上使用let或class對(duì)變量進(jìn)行二次聲明，會(huì)出現(xiàn)錯(cuò)誤信息。如下：

let?i?=?"jia"

let?i?=?"reng"

//?報(bào)錯(cuò)
//?Uncaught?SyntaxError:?Identifier?'i'?has?aready?been?declared
復(fù)制代碼

導(dǎo)航條 => 更多圖標(biāo) => Settings => About Chrome => Update

升級(jí)后，重復(fù)聲明不會(huì)報(bào)錯(cuò)，解決了在一個(gè)控制面板里面console調(diào)試中不能覆蓋同一個(gè)變量的煩惱。

2. 過濾請(qǐng)求

網(wǎng)頁請(qǐng)求服務(wù)器，有時(shí)候發(fā)起的請(qǐng)求太多，我們想知道哪些請(qǐng)求返回阻塞了。我們可以對(duì)請(qǐng)求的網(wǎng)絡(luò)進(jìn)行過濾，來定位問題。

控制面板 => Network => filter圖標(biāo) => is:running => 刷新監(jiān)控的頁面

3. 展開所有的子節(jié)點(diǎn)

在進(jìn)行DOM節(jié)點(diǎn)元素調(diào)試的時(shí)候，我們需要對(duì)每個(gè)節(jié)點(diǎn)進(jìn)行展開查看，如果只是逐個(gè)點(diǎn)擊目標(biāo)元素下面的子元素展開，耗費(fèi)時(shí)間。可以嘗試下面的快捷操作～

控制面板 => Elements => 按option + 點(diǎn)擊要展開的元素圖標(biāo)

4. 滾動(dòng)元素到視圖

在調(diào)試DOM元素的時(shí)候，我們已經(jīng)聚焦到相關(guān)的DOM結(jié)構(gòu)上了，但是對(duì)應(yīng)的元素并沒有在可視窗口上展示，那么我們可以將其快速滾動(dòng)到可視窗口。

控制面板 => Elements => 右擊選中的DOM節(jié)點(diǎn) => Scroll into view

5. 預(yù)設(shè)設(shè)備

在進(jìn)行調(diào)試的時(shí)候，我們手頭上沒有那么多設(shè)備。特別是開發(fā)移動(dòng)端的猿兒，在沒有充足調(diào)試機(jī)的情況下，我們就靠調(diào)試工具進(jìn)行模擬。那么，除了谷歌瀏覽器默認(rèn)設(shè)備的幾個(gè)值，比如iPhone X, iPad。我們還可以自定義自己需要的設(shè)備。

控制面板 => setting圖標(biāo) => Devices => Add custom device...

我們添加一個(gè)一個(gè)尺寸為300 * 800且DPR為3的設(shè)備。之后，在調(diào)試設(shè)備的時(shí)候，我們可以選擇預(yù)設(shè)設(shè)備進(jìn)行預(yù)覽～

6. 預(yù)設(shè)網(wǎng)絡(luò)狀況

我們不能把控用戶使用我們產(chǎn)品的網(wǎng)絡(luò)下載速度，所以我們得模擬不同網(wǎng)速下面的產(chǎn)品表現(xiàn)情況，以檢查我們對(duì)產(chǎn)品的優(yōu)化是否符合預(yù)期效果。同理，我們也可以自定義網(wǎng)絡(luò)的狀況，一般情況下默認(rèn)是online。

控制面板 => setting圖標(biāo) => Throttling => Add custom profile...

7. 捕獲快照

communication省心省力的原則之一是：圖文并茂地溝通。在跟上下流的人員進(jìn)行溝通的時(shí)候，推敲產(chǎn)品的途中，少不了對(duì)一個(gè)產(chǎn)品的截圖。作為一個(gè)開發(fā)者，你還在使用截圖工具或聊天工具進(jìn)行操作？我們有更加方便的方案～

7.1 捕獲全屏快照

控制面板 => command + shift + p => capture full size screenshot

下面是截取自己掘金個(gè)人資料頁面的圖片。在進(jìn)入個(gè)人資料頁面后，設(shè)置成移動(dòng)設(shè)備調(diào)試，之后在控制臺(tái)上按照上面的步驟執(zhí)行capture full size screenshot，即可生成完整的個(gè)人資料頁面圖片。

?? 不限制移動(dòng)端調(diào)試操作，PC端也可以，這里為了方便貼圖，才選擇移動(dòng)端調(diào)試而已

當(dāng)然，我們使用局部截圖更加頻繁，那就使用到了下面的小技巧。

7.2 捕獲局部快照

控制面板 => 審查元素 => command + shift + p => capture node screenshot

我選擇掘金個(gè)人資料的頭像部分進(jìn)行截取示范～正確操作后，截取到的就是目標(biāo)審核元素，如下圖：

8. 快速清空站點(diǎn)緩存

有時(shí)候開發(fā)調(diào)試，我們需要清空緩存信息。與其手動(dòng)一個(gè)個(gè)信息清空，還不如一步到位，直接清空這個(gè)站點(diǎn)的信息 ?

控制面板 => command + shift + p => clear site data

嗯～就此打住吧，寫了不少了～等等，才八個(gè)技巧而已么，得加一條 ?Because NINE is my lucky number.

9. 更改調(diào)試面板主題

在開發(fā)調(diào)試中，默認(rèn)主題難免讓眼睛審美疲勞。而且，作為一個(gè)開發(fā)者，要高冷，高冷，高冷...暗黑色調(diào)妥妥的。通過下面的操作，你可以選擇適合自己的風(fēng)格。

控制面板 => setting設(shè)置圖標(biāo) => Preferences => Appearance => Theme