7個能提升你生產力的隱藏Chrome DevTools功能

開發人員工具對於軟件開發是必不可少的。咱們須要它們來開發、測試和調試咱們的工做。做爲web應用程序開發人員，您使用Chrome DevTools的概率很是高。

本文將向您展現Chrome DevTools的一些隱藏功能，以幫助您提升生產力，有些你能夠能已經知道，有些你可能還不知道。

你將看到如下內容：

1. 在低端設備上測試Web應用性能
2. 捕獲不一樣設備大小的屏幕截圖
3. 更改用戶代理
4. 測試你的明亮(Light)和暗黑(Dark)主題
5. 爲視力障礙者測試您的Web應用程序
6. 按媒體資源過濾網絡請求
7. 在控制檯中獲取DOM節點引用

開始吧~~

---

在低端設備上測試Web應用性能

通常而言，咱們開發人員都是在具備高速網絡鏈接的高端設備上工做。但不幸的是，咱們的用戶並不能一直使用高端設備和高速互聯網鏈接。

隨着移動設備的興起，咱們都應該更加意識到這種狀況。並不是每一個人都擁有超貴的手機或始終能夠訪問4G。

您知道如何輕鬆模擬低端設備和低速網絡鏈接嗎？

你能夠很容易地在Chrome DevTools中控制CPU的能力和網絡速度。這樣，您能夠測試您的Web應用程序性能並根據其進行優化。你能夠這樣作：

1. 打開 Chrome DevTools，按下 CMD/CTRL + SHIFT + P 打開命令菜單。
2. 輸入 Show Performance，而後按回車鍵打開性能面板。

按右邊的齒輪圖標打開捕獲設置。如今，您能夠爲網絡和CPU選擇不一樣的限制選項。

還有一個更簡單的選項來模擬預約義的設備配置文件。

按下 CMD/CTRL + SHIFT + M 切換設備的工具欄，你能夠在中檔手機和低端手機之間進行選擇，這些選項將相對地設置網絡和CPU節流。

捕獲不一樣設備大小的屏幕截圖

您已經建立了外觀漂亮的網絡應用，並但願捕獲屏幕截圖。幸運的是，Chrome DevTools支持，你能夠很容易地爲你的web應用捕捉一個正常的、全尺寸的或區域的屏幕截圖。

打開 Chrome DevTools，按下 CMD/CTRL + SHIFT + P 打開命令菜單，輸入 screenshot 查看全部截圖捕捉選項，選擇其中之一來捕獲屏幕截圖。

還有一種更簡單的方法來捕獲普通和全尺寸的屏幕截圖。

按下 CMD/CTRL + SHIFT + M 切換設備的工具欄，按設備工具欄右側的三個點菜單，在這裏，您能夠在捕獲屏幕截圖和捕獲全尺寸屏幕截圖之間進行選擇。

這些選項將捕獲所選模擬設備視圖的屏幕截圖。

更改用戶代理

做爲Web應用程序開發人員，您須要編寫可在多個平臺上運行的應用程序。彷佛還不夠，您還須要考慮不一樣平臺上的不一樣瀏覽器。

您可能須要對特定瀏覽器的樣式表進行有條件的更改，多虧了Chrome DevTools，你能夠很容易地動態改變用戶代理並測試全部這些。你能夠這樣作：

1. 打開Chrome DevTools，按下 CMD/CTRL + SHIFT + P 打開命令菜單。
2. 輸入 Show Network conditions 按回車鍵打開網絡條件面板，取消選中 User agent 選項右邊的 Select automatically 複選框。

如今，您能夠從預約義的用戶代理列表中進行選擇。

測試你的明亮(Light)和暗黑(Dark)主題

preferreds-color-scheme CSS屬性可幫助您檢測用戶是否已請求系統使用淺色或深色主題。使用此屬性，您能夠輕鬆在暗色和亮色主題之間切換，而無需任何用戶交互。

要測試此行爲，您無需更改系統設置，Chrome DevTools可幫助您輕鬆實現。你能夠這樣作：

1. 打開 Chrome DevTools，按下 CMD/CTRL + SHIFT + P 打開命令行菜單
2. 輸入 Show Rendering 後回車打開渲染面板。

您能夠在其中使用 Emulate CSS media feature prefers-color-scheme 選項在 preferred-color-scheme:light 和 preferred-color-scheme:dark 之間進行選擇。

爲視力障礙者測試您的Web應用程序

做爲web應用程序開發人員，咱們有責任確保咱們的程序是可訪問的。若是咱們沒有任視力障礙，就很難理解它是什麼樣子並根據它來測試咱們的程序。幸運的是，Chrome DevTools也提供瞭解決方案。

使用視覺缺陷模擬，您能夠測試您的web應用程序的人誰有視力模糊，原色盲，後色盲，三色盲，色盲。

打開 Chrome DevTools，按下 CMD/CTRL + SHIFT + P 打開命令行菜單，輸入 Show Rendering 後回車打開渲染面板。

您可使用 Emulate vision deficiencies 選項在 Blurredvision，Protanopia，Deuteranopia，Tritanopia 和 Achromatopsia 之間進行選擇。

按媒體資源過濾網絡請求

您是否知道可使用屬性按照許多不一樣的條件過濾網絡請求？

Chrome DevTools提供了不少選項來過濾網絡請求。例如，您可使用 large-than:1k 屬性過濾大小大於 1kb 的請求。

打開 Chrome DevTools，按下 CMD/CTRL + SHIFT + P 打開命令行，輸入 Show Network 後回車打開網絡面板。將 larger-than:1k 寫入過濾器輸入，而後按Enter。

在控制檯中獲取DOM節點引用

您是否曾經想過在控制檯中獲取DOM節點引用以進行一些測試？您可使用JavaScript來作到這一點。您可使用諸如 document.getElementById 之類的方法，並將節點分配給變量。

可是某些節點可能沒有ID甚至沒有Class。與其與選擇器糾纏，不如想出一種更簡單的方法。在這種狀況下，您能夠利用Chrome DevTools。

Chrome DevTools具備一項稱爲 Store as global variable 的功能。您能夠輕鬆地在控制檯中獲取任何節點,你能夠這樣使用它：

1. 右鍵單擊要在屏幕上得到的任何節點，在菜單中選擇 檢查 以打開Chrome DevTools並選擇元素。
2. 右鍵單擊元素面板中的節點，選擇 Store as global variable ，以後，它將在控制檯中的全局變量中可用。

總結

Chrome DevTools功能強大。您可能還不知道不少其餘功能。請查看如下資源部分以瞭解更多信息。

資源：

• https://developers.google.com...
• https://twitter.com/ChromeDev...
• https://www.youtube.com/chann...

---

若是對你有所啓發和幫助，能夠點個關注、收藏，也能夠留言討論，這是對做者的最大鼓勵。

做者簡介：Web前端工程師，全棧開發工程師、持續學習者。

如今關注公衆號，送精品視頻視頻教程大禮包！