Chrome DevTools中的這些騷操作，你都知道嗎？

前端森林發表於2020-10-09
Chromedev

image

引言 ?

作為開發人員，平時用的最多的就是Chrome devtools了，但是可能很多同學都像我一樣平時用的最多也就只是Console和Elements皮膚了。

我整理了一些我平時用的比較多的一些除錯小技巧，相信對提高你的工作效率能起到不小的幫助！

命令（Command） 選單 ?

“命令”選單是最最常用的，本文也會多次用到，所以這裡先說一下開啟方式:

按Cmd + Shift + P（如果使用Windows，則按Ctrl + Shift + P）開啟“命令”選單。

截圖DOM元素 ?

當你只想對一個特別的 DOM 節點進行截圖時，你可能需要使用其他工具弄半天，但現在你直接選中那個節點，開啟 命令（Command） 選單並且使用 節點截圖 就可以了。

擷取特定節點對應上圖命令是Screenshot Capture node screenshot。

擷取特定DOM元素示例：

不只是這樣，你同樣可以用這種方式 實現全屏截圖 ：通過 Screenshot Capture full size screenshot 命令。

請注意，這裡說的是全屏，並不只是頁面可視區域，而是包含滾動條在內的所有頁面內容。

對應擷取全屏示例：

在控制檯中使用上次操作的值 ?

我是最近才發現這個技巧。使用$_可以引用在控制檯執行的前一步操作的返回值。如果您正在控制檯除錯一些JavaScript程式碼，並且需要引用先前的返回值，那麼這可能非常方便。

重新發起xhr請求 ?

在平時和後端聯調時，我們用的最多的可能就是Network皮膚了。但是每次想重新檢視一個請求，我們往往都是通過重新整理頁面、點選按鈕等方式去觸發xhr請求，這種方式有時顯得會比較麻煩，我們可以通過google提供的Replay XHR的方式去發起一條新的請求，這樣對於我們開發效率的提升是有所幫助的。
chrome-除錯-重新發起xhr請求

編輯頁面上的任何文字 ✍

在控制檯輸入document.body.contentEditable="true"或者document.designMode = 'on'就可以實現對網頁的編輯了。
chrome-除錯-網頁編輯

其實這個還是比較實用的，比如你要測試一個DOM節點文字太長時，樣式是否會混亂，或者要去直接修改頁面元素去滿足一些業務需求時。（我之前是在Elements皮膚一個一個去修改的，，，）

網路皮膚（Network）的幻燈片模式 ?

啟動Network 皮膚下的Capture screenshots就可以在頁面載入時捕捉螢幕截圖。有點幻燈片的感覺。

單擊每一幀截圖，顯示的就是對應時刻發生的網路請求。這種視覺化的展現形式會讓你更加清楚每一時刻發生的網路請求情況。

動畫檢查 ?

DevTools 中有一個動畫皮膚，預設情況下它是關閉的，很多人可能不太清楚這個功能。它可以讓你控制和操縱 CSS 動畫，並且視覺化這些動畫是如何工作的。

要開啟該皮膚，可以在 DevTools 右上角選單 → More tools 中開啟 Animations ：

預設情況下，DevTools 會“監聽”動畫。一旦觸發，它們將被新增到列表中。你能看到這些動畫塊如何顯示。在動畫本身上，DevTools 會向我們展示哪些屬性正在更改，例如 background-color 或 transform。

然後，我們可以通過使用滑鼠拖動或調整時間軸來修改該動畫。

遞增/遞減 CSS 屬性值 ?

作為前端開發，平時少不了通過Elements皮膚去查詢元素以及它的css樣式。有時調整畫素px會比較麻煩一點，這時就可以使用快捷鍵去幫你完成：

* 增量0.1
  * Mac： Option +向上和Option +向下
  * Windows： Alt +向上和Alt +向下
* 增量1
  * Mac：向上+向下
  * Windows：向上+向下
* 增量10
  * Mac：⇧+向上和⇧+向下
  * Windows：⇧+向上和⇧+向下
* 遞增100
  * Mac： ⌘+向上和⌘+向下
  * Windows： Ctrl +向上和Ctrl +向下

在低端裝置和弱網情況下進行測試 ?

我們平時開發一般都是在辦公室（wifi 網速加快），而且裝置一般都是市面上較新的。但是產品的研發和推廣，一定要考慮低裝置人群和弱網的情況。

在Chrome DevTools中可以輕鬆調節CPU功能和網路速度。這樣，我們就可以測試 Web 應用程式效能並進行相應優化。

具體開啟方式是：在Chrome DevTools中通過CMD/Ctrl + Shift + p開啟命令選單。然後輸入Show Performance開啟效能皮膚。

copying & saving ?

在除錯的過程中，我們總會有對 Dev Tools 裡面的資料進行 複製 或者 儲存 的操作，其實他們也是有一些小技巧的！

copy()

可以通過全域性的方法 copy() 在 console 裡 copy 任何你能拿到的資源
chrome-除錯-copy

Store as global variable

如果在console中列印了一堆資料，想對這堆資料做額外的操作，可以將它儲存為一個全域性變數。只需要右擊它，並選擇 “Store as global variable”選項。

第一次使用的話，它會建立一個名為 temp1 的變數，第二次建立 temp2，第三次 ... 。通過使用這些變數來操作對應的資料，不用再擔心影響到他們原來的值。

自定義 devtools ?

大家平時用的最多的Chrome 主題可能就是白色/黑色這兩種了，但用的久了，難免想嘗試像IDE一樣切換主題。

開啟方式

  • 首先需要啟用實驗模式中的Allow custom UI themes

    • 位址列輸入如下url
    chrome://flags/#enable-devtools-experiments # 啟用實驗功能
    • 啟用實驗功能，並重啟瀏覽器

  • 控制檯中使用快捷鍵F1開啟設定，切換到Experiments 選項
  • 啟用Allow custom UI themes

  • 從Chrome商店安裝Material DevTools Theme Collection擴充套件程式

  • 選擇你喜歡的主題即可

CSS/JS 覆蓋率 ✅

Chrome DevTools 中的Coverage功能可以幫助我們檢視程式碼的覆蓋率。

開啟方式

  • 開啟除錯皮膚，用快捷鍵 shift+command+P （mac）輸入 Show Coverage調出相應皮膚

  • 點選reload 按鈕開始檢測

  • 點選相應檔案即可檢視具體的覆蓋情況（綠色的為用到的程式碼，紅色表示沒有用到的程式碼）

自定義程式碼片段 Snippets ?

在平常開發過程中，我們經常有些 JavaScript 的程式碼想在 Chrome Devtools中除錯，直接在 console 下 寫比較麻煩，或者我們經常有些程式碼片段(防抖、節流、獲取位址列引數等)想儲存起來，每次開啟 Devtools 都能獲取到這些程式碼片段，而不用再去google，正好Chrome Devtool 就提供了這種功能。

如圖所示，在 Sources 這個tab欄下，有個 Snippets 標籤，在裡面可以新增一些常用的程式碼片段。

將圖片複製為資料 URI ?

開啟方式

  • 選擇Network皮膚
  • 在資源皮膚中選擇Img
  • 右鍵單擊將其複製為資料URI（已編碼為base 64）

媒體查詢 ?

媒體查詢是自適應網頁設計的基本部分。在Chrome Devtools中的裝置模式下，在三圓點選單中點選 Show Media queries即可啟用：

Devtools會在樣式表中檢測媒體查詢，並在頂端標尺中將它們顯示為彩色條形:

那怎麼使用呢？其實也很簡單：

  • 點選媒體查詢條形，調整視口大小和預覽適合目標螢幕大小的樣式
  • 右鍵點選某個條形，檢視媒體查詢在 CSS 中何處定義並跳到原始碼中的定義

keys/values ?

這個是Devtools提供的快速檢視一個物件的key、values的API。用起來也很簡單：

你可能會說Object.keys()和Object.values()也可以實現啊，但這個不是更簡單點嗎 ?

table ?

Devtools提供的用於將物件陣列記錄為表格的API:

❤️ 愛心三連擊

1.如果覺得這篇文章還不錯，來個分享、點贊、在看三連吧，讓更多的人也看到～

2.關注公眾號前端森林，定期為你推送新鮮乾貨好文。

3.特殊階段，帶好口罩，做好個人防護。

4.新增微信fs1263215592，拉你進技術交流群一起學習 ?
前端森林公眾號二維碼2

相關文章