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

引言 🏂

做爲開發人員，平時用的最多的就是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的方式去發起一條新的請求，這樣對於咱們開發效率的提高是有所幫助的。

編輯頁面上的任何文本 ✍

在控制檯輸入document.body.contentEditable="true"或者document.designMode = 'on'就能夠實現對網頁的編輯了。 其實這個仍是比較實用的，好比你要測試一個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 任何你能拿到的資源

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: