Chrome開發調試的九個技巧

開發調試的九個技巧【谷歌浏覽器】

• 1. 允許重複聲明let和class
• 2. 過濾請求
• 3. 展開所有的子節點
• 4. 滾動元素到視圖
• 5. 預設裝置
• 6. 預設網絡狀況
• 7. 捕獲快照
• • 7.1 捕獲全屏快照
  • 7.2 捕獲局部快照
• 8. 快速清空站點緩存
• 9. 更改調試面闆主題

Chrome版本

window

上

谷歌浏覽器

為最新版本 - 版本

85.0.4183.121

（正式版本）（64 位），

mac

上

谷歌浏覽器

為最新版本 - Version

85.0.4183.121

(Official Build) (64-bit)

Chrome版本更新參考如下

導覽列 => 更多圖示 => Settings => About Chrome => Update

以下的操作都在

mac

的谷歌浏覽器上。

window

上大同小異

1. 允許重複聲明let和class

在

更新版本之前

，我們在谷歌浏覽器上使用

let

或

class

對變量進行

二次聲明

，會

出現錯誤資訊

。如下：

let i = "healo"
let i = "world"
// 報錯
// Uncaught SyntaxError: Identifier 'i' has aready been declared
           

Chorme浏覽器

版本更新

後，

重複聲明不會報錯

，解決了在一個控制台裡面console調試中不能覆寫同一個變量的煩惱。

2. 過濾請求

網頁請求伺服器，有時候發起的請求太多，我們想知道哪些請求傳回阻塞了。我們可以對請求的網絡進行過濾，來定位問題。

控制台 => Network => filter圖示 => is:running => 重新整理監控的頁面

3. 展開所有的子節點

在進行

DOM節點元素調試

的時候，我們需要對

每個節點進行展開檢視

，如果隻是逐個點選目标元素下面的子元素展開，耗費時間。可以嘗試下面的快捷操作～

控制台 => Elements => 按option(Alt鍵) + 點選要展開的元素圖示

4. 滾動元素到視圖

在

調試DOM元素

的時候，我們已經

定位

到相關的

DOM結構

上了，但是

對應的元素并沒有在可視視窗上

展示，那麼我們可以将其

快速滾動到可視視窗

控制台 => Elements => 右擊選中的DOM節點 => Scroll into view

5. 預設裝置

在進行

移動端調試

的時候，我們手頭上沒有那麼多裝置。在沒有充足調試機的情況下，我們就靠

調試工具進行模拟

。那麼，除了谷歌浏覽器預設裝置的幾個值，比如iPhone X, iPad。我們還可以自定義自己需要的裝置。

控制台 => setting圖示 => Devices => Add custom device…

我們添加一個一個

尺寸為300 * 800且DPR為3

的裝置。

之後，在調試裝置的時候，我們可以選擇預設裝置進行預覽～

6. 預設網絡狀況

我們不能把控使用者使用我們産品的網絡下載下傳速度，是以我們得模拟不同網速下面的産品表現情況，以檢查我們對産品的優化是否符合預期效果。同理，我們也可以

自定義網絡

的狀況，一般情況下

預設是online

。

控制台 => setting圖示 => Throttling => Add custom profile…

7. 捕獲快照

communication

省心省力的原則之一是：

圖文并茂地溝通

。在跟上下流的人員進行溝通的時候，推敲産品的途中，少不了對一個産品的

截圖

。

7.1 捕獲全屏快照

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

輸入完執行後,會自動下載下傳全屏圖檔到本地

7.2 捕獲局部快照

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

8. 快速清空站點緩存

有時候開發調試，我們需要清空緩存資訊。與其手動一個個資訊清空，還不如

一步到位

，

直接清空這個站點的資訊

9. 更改調試面闆主題

控制台 => setting設定圖示 => Preferences => Appearance => Theme

謝謝你閱讀到了最後~

期待你關注、收藏、評論、點贊~

原文位址

開發調試的九個技巧【谷歌浏覽器】