作者：Jimmy
如果你是一個前端開發者，你接觸浏覽器的時間會占用你工作時間的一半，甚至更多。那麼我們推薦你使用谷歌浏覽器，它是前端開發利器之一🚀開題前，請你更新谷歌浏覽器的版本到最新。截止本文釋出，鄙人
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
或
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 => 重新整理監控的頁面
filter
3. 展開所有的子節點
在進行
DOM
節點元素調試的時候，我們需要對每個節點進行展開檢視，如果隻是逐個點選目标元素下面的子元素展開，耗費時間。可以嘗試下面的快捷操作～
控制台 => Elements => 按option + 點選要展開的元素圖示
expand
4. 滾動元素到視圖
在調試
DOM
元素的時候，我們已經聚焦到相關的
DOM
結構上了，但是對應的元素并沒有在可視視窗上展示，那麼我們可以将其快速滾動到可視視窗。
控制台 => Elements => 右擊選中的DOM節點 => Scroll into view
scroll
5. 預設裝置
在進行調試的時候，我們手頭上沒有那麼多裝置。特别是開發移動端的猿兒，在沒有充足調試機的情況下，我們就靠調試工具進行模拟。那麼，除了谷歌浏覽器預設裝置的幾個值，比如
iPhone X, iPad
。我們還可以自定義自己需要的裝置。
控制台 => setting圖示 => Devices => Add custom device...
我們添加一個一個尺寸為300 * 800且
DPR
為3的裝置。
之後，在調試裝置的時候，我們可以選擇預設裝置進行預覽～
6. 預設網絡狀況
我們不能把控使用者使用我們産品的網絡下載下傳速度，是以我們得模拟不同網速下面的産品表現情況，以檢查我們對産品的優化是否符合預期效果。同理，我們也可以自定義網絡的狀況，一般情況下預設是
online
。
控制台 => setting圖示 => Throttling => Add custom profile...
custom_network
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
theme