技巧1：快速切換文件
如果你之前使用過sublime text ,有時候你還真不習慣沒有go to anything這個功能，當然，強大的chrome開發者工具有這個功能哦，怎麼玩呢？來看一下操作吧。
當開發者工具被打開的時候，按CTRL+P(蘋果小朋友cmd+p),就能快速搜尋和打開你項目的文件了。
如圖：
技巧2：在源代碼中搜索
在項目開發中，如果你希望在源代碼中搜索要怎麼辦呢？在頁面已經加載的文件中搜尋一個特定的字符串，快捷鍵是Ctrl + Shift + F (Cmd + Opt + F)，這種搜尋方式還支持正則表達式哦
如圖：
技巧3：快速跳轉到指定行
在Sources標籤中打開一個文件之後，在Windows和Linux中，按Ctrl + G，(or Cmd + L for Mac)，然後輸入行號+回車即可，DevTools就會允許你跳轉到文件中的任意一行。
另外一種方式是按Ctrl + O，輸入:和行數，而不用去尋找一個文件。
如圖：
技巧4：在控制檯選擇元素
開發者工具控制檯支持一些變量和函數來選擇DOM元素：
$()–document.querySelector()的簡寫，返回第一個和css選擇器匹配的元素。例如$(‘div')返回這個頁面中第一個div元素
$$()–document.querySelectorAll()的簡寫，返回一個和css選擇器匹配的元素數組。
$0-$4–依次返回五個最近你在元素面板選擇過的DOM元素的歷史記錄，$0是最新的記錄，以此類推。
技巧5：使用多個插入符進行選擇
技巧6：優質打印
Chrome's Developer Tools有內建的美化代碼，可以返回一段最小化且格式易讀的代碼。Pretty Print的按鈕在Sources標籤的左下角。
如圖：
點擊後的效果如下圖：
技巧7：顏色選擇器
如圖：
技巧8：改變顏色格式
在顏色預覽功能使用快捷鍵Shift +點擊鼠標左鍵，可以在rgba、hsl和hexadecimal來回切換顏色的格式
如圖：
閱讀更多 源碼時代 的文章
