15 個必須知道的 Chrome 開發工具技巧

在Web開發者中，Google Chrome是使用最廣泛的瀏覽器。六週一次的釋出週期和一套強大的不斷擴大開發功能，使其成為了web開發者必備的工具。你可能已經熟悉了它的部分功能，如使用console和debugger線上編輯CSS。在這篇文章中，我們將分享15個有助於改進你的開發流程的技巧。

一、快速切換檔案

如果你使用過sublime text，那麼你可能不習慣沒有Go to anything這個功能的覆蓋。你會很高興聽到chrome開發者功能也有這個功能，當DevTools被開啟的時候，按Ctrl+P（在 mac 是cmd+p）,就能快速搜尋和開啟你專案的檔案。

二、在原始碼中搜尋

如果你希望在原始碼中搜尋要怎麼辦呢？在頁面已經載入的檔案中搜尋一個特定的字串，快捷鍵是Ctrl + Shift + F (Cmd + Opt + F)，這種搜尋方式還支援正規表示式哦。

三、快速跳轉到指定行

在Sources標籤中開啟一個檔案之後，在Windows和Linux中，按Ctrl + G，(Cmd + L)，然後輸入行號，DevTools就會允許你跳轉到檔案中的任意一行。

另外一種方式是按Ctrl + O，輸入:和行數，而不用去尋找一個檔案。 

四、在控制檯選擇元素

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

• $()–document.querySelector()的簡寫，返回第一個和css選擇器匹配的元素。例如$(‘div’)返回這個頁面中第一個div元素
• $$()–document.querySelectorAll()的簡寫，返回一個和css選擇器匹配的元素陣列。
• $0-$4–依次返回五個最近你在元素皮膚選擇過的DOM元素的歷史記錄，$0是最新的記錄，以此類推。

想要了解更多控制檯命令，戳這裡：Command Line API。

五、使用多個插入符進行選擇

當編輯一個檔案的時候，你可以按住Ctrl（cmd），在你要編輯的地方點選滑鼠，可以設定多個插入符，這樣可以一次在多個地方編輯。

 

六、儲存記錄

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

七、優質列印

Chrome’s Developer Tools有內建的美化程式碼，可以返回一段最小化且格式易讀的程式碼。Pretty Print的按鈕在Sources標籤的左下角。

 

八、裝置模式

對於開發移動友好頁面，DevTools包含了一個非常強大的模式，這個谷歌影片介紹了其主要特點，如調整螢幕大小、觸控模擬和模擬糟糕的網路連線。

九、裝置感測模擬

裝置模式的另一個很酷的功能是模擬移動裝置的感測器，例如觸控螢幕和加速計。你甚至可以惡搞你的地理位置。這個功能位於元素標籤的底部，點選“show drawer”按鈕，就可看見 Emulation標籤 --> Sensors.

 

十、顏色選擇器

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

十一、強制改變元素狀態

DevTools有一個可以模擬CSS狀態的功能，例如元素的hover和focus,可以很容易的改變元素樣式。在CSS編輯器中可以利用這個功能

十二、視覺化的DOM陰影

Web瀏覽器在構建如文字框、按鈕和輸入框一類元素時，其它基本元素的檢視是隱藏的。不過，你可以在Settings -> General 中切換成Show user agent shadow DOM，這樣就會在元素標籤頁中顯示被隱藏的程式碼。甚至還能單獨設計他們的樣式，這給你了很大的控制權。

十三、選擇下一個匹配項

當在Sources標籤下編輯檔案時，按下Ctrl + D (Cmd + D) ，當前選中的單詞的下一個匹配也會被選中，有利於你同時對它們進行編輯。

十四、改變顏色格式

在顏色預覽功能使用快捷鍵Shift + 點選，可以在rgba、hsl和hexadecimal來回切換顏色的格式

十五、透過workspaces來編輯本地檔案

Workspaces是Chrome DevTools的一個強大功能，這使DevTools變成了一個真正的IDE。Workspaces會將Sources選項卡中的檔案和本地專案中的檔案進行匹配，所以你可以直接編輯和儲存，而不必複製/貼上外部改變的檔案到編輯器。

為了配置Workspaces，只需開啟Sources選項，然後右擊左邊皮膚的任何一個地方，選擇 Add Folder To Worskpace，或者只是把你的整個工程資料夾拖放入Developer Tool。現在，無論在哪一個資料夾，被選中的資料夾，包括其子目錄和所有檔案都可以被編輯。為了讓Workspaces更高效，你可以將頁面中用到的檔案對映到相應的資料夾，允許線上編輯和簡單的儲存。

瞭解更多關於Workspaces的使用，戳這裡：Workspaces。