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

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

Chrome

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

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

快捷定位文件

當你想要在頁面上直接查找某個元素時，可以直接去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控制台使用技巧，大家都可以嘗試下噢，相信絕對是可以提高大家工作效率的~

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!