你所不知道的10個“Chrome開發者工具”使用技巧
作為一名Web開發人員，想必你一定聽說過Chrome開發者工具了。想象一下，你正在瀏覽一個很酷炫的頁面，里面的色彩，字體，動畫，UI交 互，頁面打開速度等等都讓你驚嘆不已，贊不絕口。你在驚嘆之余，是不是也想了解下Web開發人員制作該頁面的思路呢；或者你自己已經做好了一個頁面，但是 不知道怎么回事，一段JavaScript代碼就是不能執行；頁面在向下滾動的時候，感覺像是在播放ppt，卡頓感很強；有了“Chrome開發者工具” 這個神器，一切問題都能解決。
“Chrome開發者工具”是一個嵌入到Google Chrome瀏覽器中，集網頁制作和調試為一體的工具，有了它，Web開發人員就能夠深入地進入到瀏覽器和網頁應用程序的內部去查看頁面布局，調試一段JavaScript代碼，并且優化頁面的渲染速度。
“工欲善其事，必先利其器”，既然我們已經知道了“Chrome開發者工具”是一個很有用且功能很全的工具，那么我們平時在使用它的時候，有哪些 功能是我們平時忽略的呢，這里給大家分享一些我在平時使用“Chrome開發者工具”的一些小技巧，希望能對Web開發人員的工作效率的提升有所幫助。
1，可視化Shadow-Dom
什么是Shadow-Dom？
Shadow DOM是指瀏覽器的一種能力，它允許在文檔（document）渲染時插入一棵DOM元素子樹，但是這棵子樹不在主DOM樹中。它的最大的用處在于隔離外部環境用于封裝組件。
Web瀏覽器在構建例如<video>、<input type=”range”/>、< input type=”password”/>標簽的時候，在Elements面板下看到的也只是基本的元素，其他的元素都被隱藏了。不過借助 Chrome開發者工具能夠在元素標簽頁中顯示被隱藏的代碼，甚至能夠通過例如“::slider-thumb”這樣的偽類來定義樣式。
實現：Settings → General → Elements → Show user agent shadow DOM
2，在控制臺選擇元素,
Console面板支持變量來選擇DOM元素：
1. Chrome控制臺中原生支持類jQuery的選擇器。
用$加上熟悉的css選擇器就能選擇DOM節點。
2. $0~$4：最近你選擇過的5個DOM節點。
$0會返回最近一次點選的DOM結點，以此類推，$1返回的是上上次點選的DOM節點，最多保存了5個，如果不夠5個，則返回undefined。
3，多行插入符編輯內容
在編輯一個文件的時候，還在每行逐一地編寫重復的代碼？試試開發者工具的“多行插入”的功能。
實現：按住Ctrl（Cmd for Mac），在要編輯的地方點擊鼠標，可以設置多個插入符。按下Ctrl + U可以撤銷編輯
4，使用”3步快照”技術來找出JavaScript內存泄露
- 打開開發者工具并且切換到Profiles面板里；
- 在你的頁面執行一個能引起內存泄露的操作；
- 點擊“Take Snapshot”來執行一個堆快照；
- 重復執行步驟 2 和步驟 3 三次；
- 選擇最后一個堆快照；
- 將過濾器從“所有對象”改為“快照 1 和 2 之間的對象”；
- 你現在應該已經可以看到一組新的泄露對象的集合，可以選擇其中的一個然后查看是什么導致的內存泄露。
5，強制改變元素狀態
有時我們在寫css的時候，需要用到一些偽類，例如鼠標懸浮效果 :hover或者已經訪問過鏈接的狀態 :visited， 開發者工具能夠模擬出這樣的狀態。
實現：
- Elements面板右側Styles標簽 → Toggle Element State
- Elements面板左側右擊 → Force element state
6，快速查找文件&搜索特定字符串
當Sources面板下有很多的文件，有時我們為找到一個文件可能要花費不少的時間，這時我們可以使用開發者工具的“快速查找文件”功能。
實現：Sources面板下 Ctrl+P（Cmd+P for mac）
但如果需要在源代碼中搜索特定的字符串怎么辦呢？別擔心，開發者工具也提供了這種功能，這種搜索方式還能區分大小寫和支持正則表達式。
實現：Sources面板下 Ctrl + Shift + F（Cmd + Shift + F for mac）
7，多列內容選擇&匹配相同選項
實現：
多列內容選擇：按住Alt鍵，當鼠標箭頭變為“+”號后，點擊鼠標
匹配相同選項：選中需要匹配的元素，快捷鍵Ctrl + D（Cmd + D for mac）
在Sources面板中選擇一個資源文件進行編輯時，有時可能需要對多行代碼的部分內容進行修改，一行一行去改又太耽誤時間，使用開發者工具能夠幫助我們節省時間。
8，改變顏色模式&自定義調色板
開發者工具支持在rgba、hsl和hexadecimal來回切換顏色模式和實時編輯預覽頁面顏色，當點擊顏色預覽時，會彈出一個顏色選擇器，當選擇器開啟時，鼠標滑到頁面鼠標指針會變成一個放大鏡，讓你去選擇像素精度級別的顏色。
實現：
改變顏色模式：Shift + 點擊鼠標
自定義調色板：點擊樣式區域顏色前面的小方塊
9，設備模式&移動仿真
隨著移動用戶的增長，移動端友好的響應式網站設計變得越來越重要。網頁的內容要在不同的設備以及各種網絡環境下看起來都不錯才行。但是想要測試移動端的體驗需要較長時間，并且調試也相當困難。幸運的是開發者工具能夠讓你在不同的移動設備上看到展示效果。
有了它你就可以：
- 通過模擬不同的屏幕大小和分辨率來測試你的響應式設計效果如何，此模式下 Retina 屏幕也可以模擬。
- 使用網絡模擬器來評估你的站點的性能，并且不會影響到其他選項卡。
- 可視化并審查 CSS 媒體問題。
- 準確模擬設備輸入，比如觸控事件、地理位置以及設備屏幕朝向。
設備模式的另一個很酷的功能是模擬移動設備的傳感器，例如觸摸屏幕和加速計，甚至可以更改你的地理位置。
實現：Esc鍵 → Emulation → Enable emulation → Sensors
10，workspace編輯本地文件
Workspace是開發者工具的一個強大功能，這使開發者工具變成了一個真正的IDE。Workspace會將Sources選項卡中的文件和本地項目中的文件進行匹配，所以你可以直接編輯和保存，而不必復制/粘貼到編輯器。,
實現：Source左側面板下右擊 → Add Folder to worksapce
