本篇經驗將和大家介紹Chrome開發者技巧，希望對大家的工作和學習有所幫助！
方法/步驟
裝置模式
對於開發移動友好頁面，DevTools包含了一個非常強大的模式，這個谷歌視訊介紹了其主要特點，如調整螢幕大小、觸控模擬和模擬糟糕的網路連線
（ps:原文中這個視訊檔案丟失了，這個圖是小編補充，你可以自己去測試這個工具，很有用）
裝置感測模擬
裝置模式的另一個很酷的功能是模擬移動裝置的感測器，例如觸控式螢幕幕和加速計。你甚至可以惡搞你的地理位置。這個功能位於元素標籤的底部，點選“show drawer”按鈕，就可看見Emulation標籤 --> Sensors.
顏色選擇器
當在樣式編輯中選擇了一個顏色屬性時，你可以點選顏色預覽，就會彈出一個顏色選擇器。當選擇器開啟時，如果你停留在頁面，滑鼠指標會變成一個放大鏡，讓你去選擇畫素精度的顏色。
強制改變元素狀態
DevTools有一個可以模擬CSS狀態的功能，例如元素的hover和focus,可以很容易的改變元素樣式。在CSS編輯器中可以利用這個功能
視覺化的DOM陰影
Web瀏覽器在構建如文字框、按鈕和輸入框一類元素時，其它基本元素的檢視是隱藏的。不過，你可以在Settings -> General 中切換成Show user agent shadow DOM，這樣就會在元素標籤頁中顯示被隱藏的程式碼。甚至還能單獨設計他們的樣式，這給你了很大的控制權。
選擇下一個匹配項
當在Sources標籤下編輯檔案時，按下Ctrl + D (Cmd + D) ，當前選中的單詞的下一個匹配也會被選中，有利於你同時對它們進行編輯。
改變顏色格式
在顏色預覽功能使用快捷鍵Shift + Click，可以在rgba、hsl和hexadecimal來回切換顏色的格式
通過workspaces來編輯本地 檔案
Workspaces是Chrome DevTools的一個強大功能，這使DevTools變成了一個真正的IDE。Workspaces會將Sources選項卡中的檔案和本地專案中的檔案進行匹配，所以你可以直接編輯和儲存，而不必複製/貼上外部改變的檔案到編輯器。
為了配置Workspaces，只需開啟Sources選項，然後右擊左邊面板的任何一個地方，選擇Add Folder To Worskpace，或者只是把你的整個工程資料夾拖放入Developer Tool。現在，無論在哪一個資料夾，被選中的資料夾，包括其子目錄和所有檔案都可以被編輯。為了讓Workspaces更高效，你可以將頁面中用到的檔案對映到相應的資料夾，允許線上編輯和簡單的儲存。