[轉]Tips——Chrome DevTools - 25 Tips and Tricks

Chrome DevTools - 25 Tips and Tricks

原文地址：https://www.keycdn.com/blog/chrome-devtools

如何打開？

1.從瀏覽器菜單打開

2.經過右鍵單擊打開

3.使用鍵盤快捷鍵打開

• Windows: F12 or also Ctrl + Shift + I
• Mac: Cmd + Opt + I

技巧和竅門

1.快速文件切換

當Chrome DevTools打開並搜索名稱時，您能夠經過按Ctrl + P（Cmd + P）輕鬆訪問當前項目或網頁中的任何文件。

2.漂亮的打印{}

Chrome DevTools內置了漂亮的打印功能，您能夠經過單擊{}來輕鬆更改最小化代碼的格式，這將返回到普通視圖，以便您輕鬆完成。

3.編輯HTML元素

您能夠經過選擇任何元素，在面板中選擇DOM元素，而後雙擊開始標記進行編輯來動態編輯HTML /預覽更改。結束標記會自動爲您更新。任何更改都將顯示在您的瀏覽器中，就好像實際上已對源代碼進行了更改同樣。

4.編輯CSS屬性

就像編輯HTML同樣，您也能夠在Chrome DevTools中更改CSS並預覽結果的樣子。這多是此工具最多見的用途之一。只需選擇要編輯的元素，而後在樣式面板下添加/更改所需的任何CSS屬性便可。

5.在源代碼中搜索

您能夠按Ctrl + Shift + F（Cmd + Opt + F）快速搜索源代碼。也能夠是Ctrl + F（Cmd + F）。

6.JavaScript斷點

調試JavaScript時，設置斷點有時頗有用。您能夠經過單擊要中斷的行號在Chrome DevTools中設置斷點，而後按Ctrl + R（Cmd + R）刷新頁面。而後該頁面將直接運行到該斷點。

7.跳到行號

您能夠經過按Ctrl + O（Cmd + O）並使用行語法自動跳到代碼中的一行。在下面的示例中，咱們鍵入「：200：10」並按Enter鍵轉到第200行第10列。

8.多個光標

您須要添加多條線路嗎？也許你想將font-size添加到幾個類中。您能夠經過按Ctrl +單擊（Cmd +單擊）並同時在多行上輸入信息來輕鬆添加多個遊標。這是一個很是方便的技巧。

9.更改DevTools停靠位置

您還能夠更改Chrome DevTools的停靠位置。有三個選項可供選擇：Bottom，Side和Undocked（浮動）。要在停靠位置之間切換，您能夠按Ctrl + Shift + D（Cmd + Shift + D）。而後右上角還有一個對接面板。

10.清除Cookies

您還可使用Chrome DevTools輕鬆清除Cookie。在測試和調試第三方插件時，這尤爲有用。只需單擊「資源」選項卡，而後在Cookie下右鍵單擊並刪除當前存儲在瀏覽器中的任何cookie。

11.設備模式

您能夠測試您的網站和媒體查詢，並經過進入設備模式查看您的響應式設計是否在任何地方破壞。或者您可能須要查看頁面的分辨率，以便了解應用媒體查詢的位置。要進入設備模式，請單擊Chrome DevTools中的小手機圖標，或者按Ctrl + Shift + M（Cmd + Shift + M）。而後，您能夠選擇要模擬的設備，方向，甚至分辨率。您還能夠更改網絡限制，以查看您的網站實際呈現如何按期2G鏈接。

12.自定義調色板和拾色器

在谷歌C​​hrome Canary中，他們推出了新的自定義調色板和材料調色板，這些調色板和材料調色板能夠從您網站的CSS中獲取。只需單擊樣式面板中的顏色塊便可訪問它們。您還可使用顏色選擇器從網頁中挑選顏色。

13.更改顏色格式

您能夠經過按住Shift +單擊顏色塊在RGBA，HSL和十六進制格式之間切換。

14.設備仿真傳感器

Chrome DevTools的一個很酷的功能是你甚至能夠模擬觸摸屏和加速器。要執行此操做，請單擊「控制檯」，「仿真」和「傳感器」。

15.切換元素狀態

您是否試圖找出隱藏風格的來源，好比：hover屬性？在Firefox中，他們的開發工具可以讓您在選擇元素時看到這一點，但在Chrome DevTools中卻看不到。可是，有一些更好的東西，稱爲切換元素狀態。這容許您強制元素狀態：懸停，以便您可使用樣式面板查看屬性。

16.將圖像複製爲數據URI（base64編碼）

您能夠將任何圖像從網頁中保存爲數據URI，或者更確切地說是base64編碼。沒有必要使用免費的在線轉換器，由於它已經內置在Chrome DevTools中。要執行此操做，只需單擊「網絡」面板，單擊圖像，而後右鍵單擊它並選擇「將圖像複製爲數據URL」。而後，您將如下列格式獲取圖像：「URURIsdata：image / png; base64，iVBORw0KGgoAAAANSUhEUgAABAAAAAFt ......」

17.顯示用戶代理Shadow DOM

當您處理按鈕和輸入等內容時，Web瀏覽器一般會構建隱藏屬性。要經過按F1（？）來查看這些單擊設置，您能夠啓用「顯示用戶代理DOM」。正如您在示例中所看到的，咱們如今可以看到正在構造的＃shadow-root div。您甚至能夠更進一步，並將CSS樣式應用於隱藏屬性。

18.選擇下一個出現次數

Chrome DevTools可以讓您輕鬆選擇下一個匹配項，而後同時應用更改。要執行此操做，只需雙擊要編輯的內容，而後對要選擇的每一個事件按Ctrl + D（Cmd + D），而後在鍵入時將同時更改全部這些內容。

19.工做區

Chrome DevTools的一個很是強大的功能是工做空間。默認狀況下，當您更改開發人員工具中的內容時，它們會在您刷新頁面後消失。這適用於此處和那裏的小調整，但工做區實際上容許您經過將這些更改保存到磁盤來保留這些更改。要執行此操做，請右鍵單擊文件夾並選擇「將文件夾添加到本地工做區」。而後使其保持不變，右鍵單擊文件並選擇「映射到文件系統資源...」

20.網絡電影膠片

網絡幻燈片功能容許您經過在整個加載過程當中抓取屏幕截圖來查看頁面從開始到結束的呈現方式。這能夠是查看字體呈現方式以及處理FOIT或FOUT等問題的好方法。要執行此操做，請單擊「網絡」面板，單擊相機圖標，而後按Ctrl + R（Cmd + R）刷新頁面。而後它會顯示您的頁面從開始到結束的呈現方式。

21.監控網絡性能

經過最新的開發人員工具更新，他們在瀑布時間軸中添加了聚合詳細信息面板。這使您能夠更輕鬆地查看最耗費成本的時間，而後您能夠按域，子域等細分。要運行此單擊，請單擊「時間軸」面板，而後按Ctrl + R（Cmd + R）刷新頁面。而後，您能夠單擊「摘要」面板和「聚合」詳細信息面板。

22.DOMContentLoaded

關於什麼阻止DOM以及如何解決它，咱們有一個很好的帖子。在開發人員工具中，您能夠準確地看到DOMContentLoaded時間和總加載時間。要運行此單擊進入「網絡」面板，請單擊「顯示概述」選項，而後按Ctrl + R（Cmd + R）刷新頁面。將顯示DOMContentLoaded的藍線和總加載時間的紅線。一般，留下或觸及藍線的全部內容都是阻塞DOM的資產，或者也稱爲渲染阻止資源。

23.網絡限制配置文件

您如今還能夠添加自定義網絡限制配置文件。若是您想要以特定速度更準確地測試，這多是有益的。要添加自定義配置文件，請單擊「網絡」面板並進入「限制」下拉列表。而後，您能夠單擊「添加自定義配置文件...」並輸入名稱，吞吐量和延遲。

24.安全面板

Chrome在開發人員工具中添加了另外一個很棒的功能，稱爲安全面板。這對於調試HTTPS遷移和快速修復混合內容警告很是有用。要運行此單擊，請單擊「安全」面板，而後按Ctrl + R（Cmd + R）刷新頁面。而後，它將以紅色顯示綠色和非安全腳本中的安全腳本。

25.在Google Chrome中使用Firefox開發人員工具

您是否知道能夠在Google Chrome中運行Firefox開發者工具？ Valence是Firefox團隊的一個實驗性附加組件，它使Firefox Developer Tools可以調試更多種類的瀏覽器。 Valence須要Chrome 37.0或更高版本。

 

 

 

 

—— 完 ——