【Chrome】871- 9 個常用 Chrome 調試技巧

原創

2021-02-18 21:21

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

如果你是一個前端開發者，你接觸瀏覽器的時間會佔用你工作時間的一半，甚至更多。那麼我們推薦你使用谷歌瀏覽器，它是前端開發利器之一🚀開題前，請你更新谷歌瀏覽器的版本到最新。截止本文發佈，鄙人window上谷歌瀏覽器爲最新版本 - 版本 85.0.4183.121（正式版本）（64 位），mac上谷歌瀏覽器爲最新版本 - Version 85.0.4183.121 (Official Build) (64-bit)

問：爲啥要更新？答：一是爲了統一操作講解；二是產品升級總會解決些遺留的問題吧，技術向前看

感興趣的夥伴可以看看官網的更新記錄👉google web下面直接進入正題 💓以下的操作都是在mac的谷歌瀏覽器上進行的。window上大同小異，請自行腦補~

1. 允許重複聲明 `let` 和 `class`

在更新版本之前，我們在谷歌瀏覽器上使用let或class對變量進行二次聲明，會出現錯誤信息。如下：

let i = "jia"

let i = "reng"

// 報錯
// Uncaught SyntaxError: Identifier 'i' has aready been declared
複製代碼

導航條 => 更多圖標 => Settings => About Chrome => Update

升級後，重複聲明不會報錯，解決了在一個控制面板裏面console調試中不能覆蓋同一個變量的煩惱。

2. 過濾請求

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

控制面板 => Network => filter圖標 => is:running => 刷新監控的頁面

3. 展開所有的子節點

在進行DOM節點元素調試的時候，我們需要對每個節點進行展開查看，如果只是逐個點擊目標元素下面的子元素展開，耗費時間。可以嘗試下面的快捷操作～

控制面板 => Elements => 按option + 點擊要展開的元素圖標

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

下面是截取自己掘金個人資料頁面的圖片。在進入個人資料頁面後，設置成移動設備調試，之後在控制檯上按照上面的步驟執行capture full size screenshot，即可生成完整的個人資料頁面圖片。

⚠️ 不限制移動端調試操作，PC端也可以，這裏爲了方便貼圖，才選擇移動端調試而已

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

7.2 捕獲局部快照

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

我選擇掘金個人資料的頭像部分進行截取示範～正確操作後，截取到的就是目標審覈元素，如下圖：

8. 快速清空站點緩存

有時候開發調試，我們需要清空緩存信息。與其手動一個個信息清空，還不如一步到位，直接清空這個站點的信息 💨

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

嗯～就此打住吧，寫了不少了～等等，才八個技巧而已麼，得加一條 🐱Because NINE is my lucky number.

9. 更改調試面板主題

在開發調試中，默認主題難免讓眼睛審美疲勞。而且，作爲一個開發者，要高冷，高冷，高冷...暗黑色調妥妥的。通過下面的操作，你可以選擇適合自己的風格。

控制面板 => setting設置圖標 => Preferences => Appearance => Theme

本文分享自微信公衆號 - 前端自習課（FE-study）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.