Chrome瀏覽器目前應該是絕大多數程序員最喜歡的瀏覽器了吧，至少我是這樣的O(∩_∩)O。簡潔的設計，強大的插件，***的兼容都讓我愛不釋手。

Chrome還提供了一個控制臺工具，在開發測試時提供了極大的便利，今天我們來看看那些非常方便的Chrome使用技巧吧。

Chrome

快速切換文件

如果我們想看某個文件的源碼，我們會進入到Source控制面板下，然后在里面慢慢找。

但是如果Source下面的文件特別多話，找到自己想要的文件是一個繁雜的過程，例如下圖這么多文件，只能慢慢打開各個文件夾去找。

例圖

Chrome提供了快速定位文件的快捷鍵cmd+P（windows上是Ctrl+P）。可以通過關鍵字匹配到文件名，并一鍵進入文件中。

快捷定位文件

頁面源碼搜索

當你想要在頁面上直接查找某個元素時，可以直接去Elements控制面板下，按cmd+F快捷鍵（windows下是Ctrl+F），這樣的查找同樣適用于Source下的js或者css文件。

cmd+F快捷鍵

如果你想要查找的是特定字符串出現的所有源文件，可以使用cmd+option+F快捷鍵（windows下是Ctrl+Shift+F）。

下面的例子是搜索所有出現“container”的地方，js和html文件中只要匹配到都會出現在結果中。

全源文件搜索

跳到指定行

在IDE中，例如webstorm，IntellijIDEA，快速跳到指定行的快捷鍵是cmd+L，彈出一個輸入框輸入行號后，可以直接定位到指定行。

在Chrome的Source面板下同樣有這個功能，快捷鍵是cmd+P或者cmd+shift+p，會彈出一個輸入框，然后輸入框***位輸入英文冒號(:)，然后輸入數字即可跳轉到指定的行。

效果如下圖所示。

快速跳到指定行

多點編輯

有的時候我們希望可以對一個文件的多個地方同時進行編輯，這需要按住command鍵（windows下是Ctrl鍵），然后點擊鼠標，就可以同時多點定位，***再輸入的時候，這些地方就可以同時進行編輯。

多點編輯

設備模式

在現在app開發成本比較高的情況下，有很多都采用web app的模式，可以直接在web瀏覽器中進行移動端的適配。

Chrome提供了強大的適配模式，主流的iphone，ipad，Galaxy等屏幕都可以直接進行模擬。

這種隨時進行切換的設備模式，給前端開發人員提供了極大的便利。因此我們可以在只寫一套代碼的時候去同時適配web端和多個不同的移動端。

設備模式

格式化代碼

有很多的網站在線上環境中會壓縮JS和CSS文件代碼，通過Source面板源文件下的{}圖標可以格式化代碼。

下圖是格式化JS代碼的方法，同樣用于格式化CSS代碼。

格式化代碼

顏色選擇器

在頁面上進行顏色設置時，Elements面板下提供了顏色預覽的選擇器，隨著鼠標的移動，鼠標指針會變成一個放大鏡，方便精確選擇顏色。

顏色選擇器

編輯不同狀態下的樣式

在頁面中有一系列的hover，focus等效果，默認狀態下，這些定義的CSS樣式是不會直接顯示在Chrome控制臺下的，但是點擊對應的按鈕就可以查看到，并且方便進行編輯。

不同狀態下樣式

多點匹配編輯

當我們需要對一個文件中的多個相同的字符同時進行編輯時，可以使用cmd+D快捷鍵(windows下是Ctrl+D)，按一次就可以匹配一次字符，然后可以同時進行編輯。

多點編輯

結束語

今天這篇文章將的Chrome控制臺使用技巧，大家都可以嘗試下噢，相信絕對是可以提高大家工作效率的~