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

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

Chrome

快速切換文件

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

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

例圖

Chrome提供了快速定位文件的快捷鍵cmd+P（windows上是Ctrl+P）?？梢酝ㄟ^關(guān)鍵字匹配到文件名，并一鍵進(jìn)入文件中。

快捷定位文件

頁面源碼搜索

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

cmd+F快捷鍵

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

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

全源文件搜索

跳到指定行

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

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

效果如下圖所示。

快速跳到指定行

多點(diǎn)編輯

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

多點(diǎn)編輯

設(shè)備模式

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

Chrome提供了強(qiáng)大的適配模式，主流的iphone，ipad，Galaxy等屏幕都可以直接進(jìn)行模擬。

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

設(shè)備模式

格式化代碼

有很多的網(wǎng)站在線上環(huán)境中會壓縮JS和CSS文件代碼，通過Source面板源文件下的{}圖標(biāo)可以格式化代碼。

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

格式化代碼

顏色選擇器

在頁面上進(jìn)行顏色設(shè)置時，Elements面板下提供了顏色預(yù)覽的選擇器，隨著鼠標(biāo)的移動，鼠標(biāo)指針會變成一個放大鏡，方便精確選擇顏色。

顏色選擇器

編輯不同狀態(tài)下的樣式

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

不同狀態(tài)下樣式

多點(diǎn)匹配編輯

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

多點(diǎn)編輯

結(jié)束語

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