在web開發者中，google chrome是使用最廣泛的浏覽器。六周一次的釋出周期和一套強大的不斷擴大開發功能，使其成為了web開發者必備的工具。你可能已經熟悉了它的部分功能，如使用console和debugger線上編輯css。在這篇文章中，我們将分享15個有助于改進你的開發流程的技巧。
一、快速切換檔案
如果你使用過sublime text，那麼你可能不習慣沒有go to anything這個功能的覆寫。你會很高興聽到chrome開發者功能也有這個功能，當devtools被打開的時候，按ctrl+p（cmd+p on mac）,就能快速搜尋和打開你項目的檔案。
二、在源代碼中搜尋
如果你希望在源代碼中搜尋要怎麼辦呢？在頁面已經加載的檔案中搜尋一個特定的字元串，快捷鍵是ctrl + shift + f (cmd + opt + f)，這種搜尋方式還支援正規表達式哦
三、快速跳轉到指定行
在sources标簽中打開一個檔案之後，在windows和linux中，按ctrl + g，(or cmd + l for mac)，然後輸入行号，devtools就會允許你跳轉到檔案中的任意一行。
另外一種方式是按ctrl + o，輸入<code>:</code>和行數，而不用去尋找一個檔案。
四、在控制台選擇元素
devtools控制台支援一些變量和函數來選擇dom元素：
$()–document.queryselector()的簡寫，傳回第一個和css選擇器比對的元素。例如$(‘div’)傳回這個頁面中第一個div元素
$$()–document.queryselectorall()的簡寫，傳回一個和css選擇器比對的元素數組。
$0-$4–依次傳回五個最近你在元素面闆選擇過的dom元素的曆史記錄，<code>$0</code>是最新的記錄，以此類推。
五、使用多個插入符進行選擇
當編輯一個檔案的時候，你可以按住ctrl（cmd for mac），在你要編輯的地方點選滑鼠，可以設定多個插入符，這樣可以一次在多個地方編輯。
六、儲存記錄
勾選在console标簽下的儲存記錄選項，你可以使devtools的console繼續儲存記錄而不會在每個頁面加載之後清除記錄。當你想要研究在頁面還沒加載完之前出現的bug時，這會是一個很友善的方法。
七、優質列印
chrome’s developer tools有内建的美化代碼，可以傳回一段最小化且格式易讀的代碼。pretty print的按鈕在sources标簽的左下角。
八、裝置模式
對于開發移動友好頁面，devtools包含了一個非常強大的模式，這個谷歌視訊介紹了其主要特點，如調整螢幕大小、觸摸仿真和模拟糟糕的網絡連接配接
（ps:原文中這個視訊檔案丢失了，這個圖是小編補充，你可以自己去測試這個工具，很有用）
九、裝置傳感仿真
裝置模式的另一個很酷的功能是模拟移動裝置的傳感器，例如觸摸螢幕和加速計。你甚至可以惡搞你的地理位置。這個功能位于元素标簽的底部，點選“show drawer”按鈕，就可看見<code>emulation标簽 --> sensors</code>.
十、顔色選擇器
當在樣式編輯中選擇了一個顔色屬性時，你可以點選顔色預覽，就會彈出一個顔色選擇器。當選擇器開啟時，如果你停留在頁面，滑鼠指針會變成一個放大鏡，讓你去選擇像素精度的顔色。
十一、強制改變元素狀态
devtools有一個可以模拟css狀态的功能，例如元素的hover和focus,可以很容易的改變元素樣式。在css編輯器中可以利用這個功能
十二、可視化的dom陰影
web浏覽器在建構如文本框、按鈕和輸入框一類元素時，其它基本元素的視圖是隐藏的。不過，你可以在<code>settings -> general</code> 中切換成<code>show user agent shadow dom</code>，這樣就會在元素标簽頁中顯示被隐藏的代碼。甚至還能單獨設計他們的樣式，這給你了很大的控制權。
十三、選擇下一個比對項
當在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更高效，你可以将頁面中用到的檔案映射到相應的檔案夾，允許線上編輯和簡單的儲存。