一、快速查詢檔案
如果你使用過sublime，那麼你會知道』go to anything』的強大。沒錯，chrome現在也有了這一功能。
操作如下：
1、f12開啟你的chrome偵錯程式；
2、按下ctrl+p（mac上cmd + p）;
3、搜尋你想開啟的檔名即可。
二、在源**中搜尋
但是，如果我們想在整個工程下，查詢一段源**呢？
操作如下：
1、f12開啟你的chrome偵錯程式；
2、按下ctrl+shift+f（mac上cmd+opt+f）;
3、在輸入框中輸入你想查詢的源**，回車，就ok啦。
注：該搜尋也支援正規表示式。
三、跳到指定行
當你在chrome偵錯程式的sources欄，已經開啟了檔案，chrome也允許你跳到指定的行數，在windows和linux系統下，只需按下ctrl+g（mac上cmd+l），然後輸入你指定的行數即可。
另一種，方法就是ctrl+o，輸入」:」+行數即可。
四、在控制台(console)中獲取dom元素
chrome控制台，提供了方法和變數來快速獲取頁面中的dom元素，如下：
1、$()—就是document.queryselector()原生方法的對映。功能嘛，就是獲取並返回第乙個與填寫的css屬性匹配的dom元素，如$(『div』)就會返回第乙個出現在頁面中的div元素。
2、$$()—就是document.queryselectorall()原生方法的對映。功能嘛，就是獲取並返回乙個陣列，陣列中包含了所有與你填寫的css屬性匹配的dom元素。
3、$0--$4—代表你在chrome偵錯程式中操作不同dom元素的歷史記錄，且最多記錄5次，故而只有$0-$4這五個變數。$0代表最近一次，依次類推。
五、多游標
另乙個牛逼的功能就是多游標。
當你想在呈現的檔案中多處操作**時，你可以通過按住ctrl（mac上cmd），然後滑鼠點選，你想要出現的游標處即可。
六、儲存日誌
在console面板上勾選『儲存日誌』選項，則不會在你每次載入頁面時，清空日誌。當你想要調查頁面關閉前的bugs時，可要記住這一選項哦。
七、格式化**
chrome通過其內建的優化器，幫助你提高檔案內容的可讀性。對於壓縮過或者雜亂的**，尤為適用。
怎麼實現呢？
操作如下：
1、f12開啟chrome開發工具；
2、選擇你想要閱讀的檔案；
3、點選檔案下方的」」狀按鈕即可。
九、裝置模擬器
另乙個十分酷炫的功能就是，模擬移動裝置端。
例如我們可以通過chrome模擬人為觸控螢幕和晃動裝置。你甚至可以通過它改變你的地理位置哦。
操作如下：
1、f12開啟chrome偵錯程式；
2、在偵錯程式底部選中emulation選項；
3、最後在emulation面板中，左側選中sensors即可。
十、顏色選擇器
當你呼叫了chrome的顏色選擇器後，你可以通過你的滑鼠，懸浮在網頁中的任意處，獲取顏色，它會十分精準地將其轉換成對應的編碼格式。
是不是很炫酷？
操作如下：
1、f12開啟chrome偵錯程式；
2、選中目標元素；
3、在樣式編輯器中，點選顏色預覽，就會出現這個顏色選擇器。
十
一、強制改變元素狀態
chrome開發工具有乙個強制改變元素css狀態的功能，如:hover和:focus。對於csser比較方便。
十
二、視覺化「隱藏的dom」
web瀏覽器在構建例如textbox，button以及input這些元素時，通常會隱藏在其之下的展現層元素。
但是，我們可以通過setting à general，在general面板中選中』show user agent shadow dom』這一選項，來展示這些被隱藏掉的基礎元素。
你甚至可以單獨地去設定它們的樣式。
十
三、選中下乙個匹配項
十四、 改變顏色格式
在顏色預覽中，通過shift + 滑鼠點選，就可以在rgba,hsl和hexadecimal三種格式中，來回切換。
十
五、利用chrome的工作空間，編輯本地檔案
chrome的工作空間，也是非常強大的，它可以直接編輯和儲存你的本地檔案，無需額外的操作，例如複製、貼上。怎麼配置它呢？
操作如下：
1、 f12開啟chrome偵錯程式
2、 找到sources欄，出現在左側的控制面板，點選滑鼠右鍵，選擇add folder to workspace。或者，直接將你整個工程資料夾，拖拽到偵錯程式中。
原文：15 must-know chrome devtools tips and tricks
15個開發者必須知道的chrome技巧
在web開發者中，google chrome是使www.cppcns.com用最廣泛的瀏覽器。六周一次的發布週期和一套強大的不斷擴大開發功能，使其成為了web開發者必備的工具。你可能已經熟悉了它的部分功能，如使用console和debugger 編輯css。在這篇文章中，我們將分享15個有助於改進你...
15個對開發人員最佳的Chrome擴充套件外掛程式
使用chrome的擴充套件外掛程式使得我們的日常工作不再那麼的乏味。雖然chrome給我們提供了很多內建的擴充套件，似乎我們不再需要其他更多的工具了，但我們還是想向你介紹15個對web開發人員最佳的chrome擴充套件外掛程式。1.web developer 為chrome的web開發者擴充套件增加...
chrome外掛程式的開發
一，chrome瀏覽器外掛程式開發 自動登入 二，chrome瀏覽器外掛程式開發 關於案例 以下文章也很不錯 一，chrome 擴充套件開發教程 1 hello chrome 二，chrome 擴充套件開發教程 2 background的用法 三，chrome 擴充套件開發教程 3 content ...