谷歌瀏覽器如今是Web開發者們所使用的最流行的網頁瀏覽器。伴隨每六個星期一次的釋出週期和不斷擴大的強大的開發功能，Chrome變成了一個必須掌握的工具。大多數前端開發者可能熟悉關於chorme的許多特點，例如使用console和debugger線上編輯CSS。在這篇文章中，我們將分享15個很酷的技巧，讓你能夠更好的改進工作流程。看完這些技巧你會驚奇而又興奮的發現是不是很像Sublime Text。

1.快速檔案轉換

如果Sublime Text沒有“Go to anything”這個功能你不可能活下去。所以你會很高興聽到DevTools 也有這個功能。當DevTools開啟的時候，你可以按下Ctrl + P

2.在原始碼中搜索

但是如果你希望在原始碼中搜索該怎麼辦？按下Ctrl + Shift + F(在Mac上使用Cmd + Opt + F)，即可在所有已載入的檔案中查詢一個特定的字串。這個搜尋的方法也支援正則表示式。

3.跳到特定行

當你開啟一個在源標籤裡的檔案之後，DevTools能夠允許你輕鬆地跳轉到程式碼裡的任意一行，Windows 和 Linux使用者只需要按下Ctrl + G (在Mac上使用 Cmd + L ),然後輸入你想跳轉的行數即可。

另一個跳轉的方法是按下Ctrl + O ，輸入:和行數，而不用去尋找一個檔案。

4.在控制檯中選擇元素

DevTools控制檯支援一些變數和函式來選擇DOM元素：

• $() : document.querySelector()的縮寫，返回第一個與之匹配的CSS選擇器的元素(例如：$('div') 它將返回本頁的第一個div元素)。
• $$() : document.querySelectorAll()的縮寫，返回一個數組，裡面是與之匹配的CSS選擇器的元素。
• $0?$4 : 依次返回五個最近你在元素面板選擇過的DOM元素的歷史記錄，$0是最新的記錄，以此類推。

瞭解更多關於Console的命令請閱讀Command Line API

5.使用多個游標和選擇

另一個打敗Sublime Text的特色出現了。當你在編輯一個檔案的時候你可以通過按住Ctrl (在Mac上為 Cmd) 同時點選你想讓游標停留的位置，設定多個游標，這樣你就可以同時在多個位置輸入同一文字了。

6.儲存日誌

勾選在Console標籤下的儲存日誌選項，你可以使DevTools的console繼續儲存日誌而不會在每個頁面載入之後清除日誌。當你想要研究在頁面還沒載入完之前出現的bug時，這會是一個很方便的方法。

7.格式化列印{}

Chrome的開發者工具有一段嵌入的美化程式碼，它可以幫你返回一段最小化的且格式易讀的程式碼。這個漂亮的印刷按鈕在你正確開啟檔案之後的Sources標籤下的左下角。

8.裝置模式

DevTools包括了一個強大的模式可用來開發友好的移動端介面。這個來自谷歌的視訊介紹了它最主要的功能，有調整螢幕大小，觸控模擬和模擬糟糕的網路連線。

9.裝置模擬感測器

裝置模式的另一個很酷的功能是模擬移動裝置的感測器，例如觸控式螢幕幕和加速計。你甚至可以惡搞你的地理位置。這個功能位於除錯視窗的底部，點選除錯視窗右上角的show drawer，就可看見Emulation -> Sensors。

10.顏色選擇器

當我們在樣式編輯器中選擇一種顏色時，你可以點選顏色預覽，顏色選擇器就會彈出。當顏色選擇器開啟時，如果你停留在某一頁面，你的滑鼠指標就會轉換成一個放大鏡，選擇畫素精度的顏色。

11.強制元素狀態

DevTools有一個功能是模擬CSS的狀態，如在元素中的hover和focus，這能夠能容易的設計他們的樣式。該功能來自css編輯器。

12.檢視Shadow DOM

由於其他基礎的元素在檢視中正常的隱藏，網頁瀏覽器構建例如文字框，按鈕和輸入之類的東西。不過，你可以在Settings -> General 中切換成Show user agent shadow DOM，這樣就會在元素標籤頁中顯示被隱藏的程式碼。給了你很大的控制，讓你甚至可以單獨地設計他們。（ Shadow DOM）

13.選擇下一個匹配項

當你在Sources 標籤下編輯檔案時，如果你按下Ctrl + D (Cmd + D)，下一個匹配項也會被選中，這能夠幫助你同時編輯他們。

14.改變顏色格式

在顏色預覽中使用Shift + Click ，可以在rgba, hsl 和 hexadecimal 這三種格式中改變。

15.通過工作區來編輯本地檔案

Workspaces是Chrome DevTools的一個強大的的功能，這個功能使得Chrome成為一個真正的IDE。Workspaces使Sources標籤下的檔案和你本地的工程檔案相匹配。所以現在你可以直接編輯和儲存，而不用複製貼上到外部的文字編輯器裡。 配置Workspaces，你只需要去Sources標籤下，在左邊的控制面板的任何地方點選右鍵，並且選擇Add Folder To Worskpace, 或者只是把你的整個工程資料夾拖放到DevTools。現在，無論你開啟哪一頁，被選擇的資料夾的子目錄和它包含的所有檔案都將能被編輯。 為了使它更加的有用，你可以將頁面中用到的檔案對映到相應的資料夾，允許線上編輯和簡單的儲存。

更多關於Workspace的內容，請看這裡.

原文：15 Must-Know Chrome DevTools Tips and Tricks

部落格原文：Chrome DevTools的15個開發技巧

拓展閱讀

Chrome Keyboard Shortcuts

A long list of tips and tricks in the Google Chrome docs