谷歌瀏覽器如今是Web開發(fā)者們所使用的最流行的網(wǎng)頁瀏覽器。伴隨每六個星期一次的發(fā)布周期和不斷擴(kuò)大的強(qiáng)大的開發(fā)功能，Chrome變成了一個必須的工具。大多數(shù)可能熟悉關(guān)于chorme的許多特點(diǎn)，例如使用console和debugger在線編輯CSS。在這篇文章中，我們將分享15個很酷的技巧，讓你能夠更好的改進(jìn)工作流程。

快速文件轉(zhuǎn)換

如果你曾經(jīng)使用過Sublime Text，那么你一定知道沒有“Go to anything”這個功能的覆蓋你不可能活下去。所以你會很高興聽到dev tools 也有這個功能。當(dāng)DevTools打開的時候，你可以按下Ctrl + P( 在Mac上使用Cmd + P)來快速的尋找和打開你工程中的任意文件。

Tools

在源代碼中搜索

但是如果你希望在源代碼中搜索該怎么辦？按下Ctrl + Shift + F (在Mac上使用 Cmd + Opt + F)，即可在所有已加載的文件中查找一個特定的字符串。這個搜索的方法也支持正則表達(dá)式。

tools

跳轉(zhuǎn)到特定的行數(shù)

當(dāng)你打開一個在源標(biāo)簽里的文件之后，DevTools能夠允許你輕松地跳轉(zhuǎn)到代碼里的任意一行，Windows 和 Linux用戶只需要按下Ctrl + G (在Mac上使用 Cmd + L ),然后輸入你想查閱的行數(shù)即可。

tools

另一個跳轉(zhuǎn)的方法是按下Ctrl + O ，輸入:和行數(shù)，而不用去尋找一個文件。

在控制臺選擇元素

DevTools控制臺支持一些變量和函數(shù)來選擇DOM元素：

$() – document.querySelector()的縮寫，返回第一個與之匹配的CSS選擇器的元素(例如：$('div') 它將返回本頁的第一個div元素)。
$$() - document.querySelectorAll()的縮寫，返回一個數(shù)組，里面是與之匹配的CSS選擇器的元素。
$0 – $4 - 依次返回五個最近你在元素面板選擇過的DOM元素的歷史記錄，$0是最新的記錄，以此類推。

tools

了解更多關(guān)于Console的命令請閱讀Command Line API

使用多個光標(biāo)和選擇

另一個打敗Sublime Text的特色出現(xiàn)了。當(dāng)你在編輯一個文件的時候你可以通過按住Ctrl (在Mac上為 Cmd) 同時點(diǎn)擊你想讓光標(biāo)停留的位置，設(shè)置多個光標(biāo)，這樣你就可以同時在多個位置輸入同一文本了。

tools

保存記錄

勾選在Console標(biāo)簽下的保存記錄選項，你可以使DevTools的console繼續(xù)保存記錄而不會在每個頁面加載之后清除記錄。當(dāng)你想要研究在頁面還沒加載完之前出現(xiàn)的bug時，這會是一個很方便的方法。

tools

漂亮的打印 {}

Chrome的開發(fā)者工具有一段嵌入的美化代碼，它可以幫你返回一段最小化的且格式易讀的代碼。這個漂亮的印刷按鈕在你正確打開文件之后的Sources標(biāo)簽下的左下角。

tools

設(shè)備模式

DevTools包括了一個強(qiáng)大的模式可用來開發(fā)友好的移動端界面。這個來自谷歌的視頻介紹了它最主要的功能，有調(diào)整大小，觸摸仿真和模擬糟糕的網(wǎng)絡(luò)連接。

設(shè)備仿真?zhèn)鞲衅?/h2>

設(shè)備模式的另一個很酷的功能是模擬移動設(shè)備的傳感器，例如觸摸屏幕和加速計。你甚至可以惡搞你的地理位置。這個功能位于元素標(biāo)簽的底部，點(diǎn)擊“show drawer”按鈕，就可看見Emulation標(biāo)簽 --> Sensors.

image

顏色選擇器

當(dāng)我們在樣式編輯器中選擇一種顏色時，你可以點(diǎn)擊顏色預(yù)覽，顏色選擇器就會彈出。當(dāng)顏色選擇器開啟時，如果你停留在某一頁面，你的鼠標(biāo)指針就會轉(zhuǎn)換成一個放大鏡，選擇像素精度的顏色。

tools

元素狀態(tài)

DevTools有一個功能是模擬CSS的狀態(tài)，如在元素中的hover和focus，這能夠能容易的設(shè)計他們的樣式。該功能來自css編輯器。

tools

可視化Shadow DOM

由于其他基礎(chǔ)的元素在視圖中正常的隱藏，網(wǎng)頁瀏覽器構(gòu)建例如文本框，按鈕和輸入之類的東西。不過，你可以在Settings -> General 中切換成Show user agent shadow DOM，這樣就會在元素標(biāo)簽頁中顯示被隱藏的代碼。給了你很大的控制，讓你甚至可以單獨(dú)地設(shè)計他們。

tools

選擇下一個匹配項

當(dāng)你在Sources 標(biāo)簽下編輯文件時，如果你按下Ctrl + D (Cmd + D)，下一個匹配項也會被選中，這能夠幫助你同時編輯他們。

tools

改變顏色格式

在顏色預(yù)覽中使用Shift + Click ，可以在rgba, hsl 和 hexadecimal 這三種格式中改變。

tools

通過workspaces來編輯本地文件

Workspaces是一個強(qiáng)大的Chrome DevTools的功能，這使它成為一個真正的IDE。Workspaces使Sources標(biāo)簽下的文件和你本地的工程文件相匹配。所以現(xiàn)在你可以直接編輯和保存，而不用復(fù)制粘貼到外部的文本編輯器里。 配置Workspaces，你只需要去Sources標(biāo)簽下，在左邊的控制面板的任何地方點(diǎn)擊右鍵(sources標(biāo)簽下)，并且選擇Add Folder To Worskpace, 或者只是把你的整個工程文件夾拖放入Developer Tool。現(xiàn)在，無論你打開哪一頁，被選擇的文件夾的子目錄和它包含的所有文件都將能被編輯。 為了使它更加的有用，你可以將頁面中用到的文件映射到相應(yīng)的文件夾，允許在線編輯和簡單的保存。