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

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

Chrome

快速切換文件

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

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

例圖

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

快捷定位文件

頁(yè)面源碼搜索

當(dāng)你想要在頁(yè)面上直接查找某個(gè)元素時(shí)，可以直接去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文件中只要匹配到都會(huì)出現(xiàn)在結(jié)果中。

全源文件搜索

跳到指定行

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

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

效果如下圖所示。

快速跳到指定行

多點(diǎn)編輯

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

多點(diǎn)編輯

設(shè)備模式

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

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

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

設(shè)備模式

格式化代碼

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

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

格式化代碼

顏色選擇器

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

顏色選擇器

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

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

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

多點(diǎn)匹配編輯

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

多點(diǎn)編輯

結(jié)束語(yǔ)

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