Chrome 開發(fā)者工具(Chrome DevTools)是Web開發(fā)者們公認(rèn)的優(yōu)秀的前端調(diào)試工具,由于功能強(qiáng)大,所以使用起來有一定的學(xué)習(xí)門檻。Chrome 開發(fā)者工具允許Web開發(fā)人員可以通過瀏覽器應(yīng)用程序干預(yù)和操作Web頁(yè)面,也可以通過這個(gè)工具調(diào)試和測(cè)試Web頁(yè)面或Web應(yīng)用程序。有了這個(gè)工具,你可以做很多有趣的事情:

調(diào)試界面的問題

使用斷點(diǎn)調(diào)試JavaScript代碼

優(yōu)化你的代碼

打開開發(fā)者工具,你只需要在頁(yè)面的任意位置右擊鼠標(biāo),選擇檢查元素或從右上角菜單中選擇“工具>更多工具>開發(fā)者工具“。

下面示例演示的都是在Google Chrome的Canary瀏覽器下做的演示。

快速編輯HTML元素

試一試:

選擇”Elements”面板

選擇”Elements”面板內(nèi)的一個(gè)DOM元素

雙擊你需要打開的DOM元素標(biāo)簽,你就可以編輯它

當(dāng)你完成之后會(huì)自動(dòng)更新和關(guān)閉標(biāo)簽

到指定的行數(shù)

你可以在“Sources”面板中選擇指定的文件中使用“:行數(shù):列數(shù)”的功能。試試快捷鍵CMD + O。

展開所有子節(jié)點(diǎn)

試一試:

選擇”Elements”面板

選擇DOM元素和在帶有剪頭的地點(diǎn)按住Alt +點(diǎn)擊鼠標(biāo)左鍵,可以展開所有子節(jié)點(diǎn)

改變開發(fā)者工具位置

試一試快捷鍵:CMD + Shift + D。設(shè)置開發(fā)者工具有三個(gè)選項(xiàng):

不在窗口中顯示開發(fā)者工具

在窗口右側(cè)顯示開發(fā)者工具

在窗口底部顯示開發(fā)者工具

通過CSS選擇器搜索DOM元素

試一試快捷鍵:CMD + F / CTRL + F和輸入你需要的類名或ID名,可以搜索到相應(yīng)的選擇器。

Material和自定義顏色調(diào)色板

你可以點(diǎn)擊顏色代碼前面的小圖標(biāo),你可以選擇:

頁(yè)面顏色:這個(gè)面板是從你的Web網(wǎng)站(在你的CSS中)自動(dòng)生成

Material Design:這個(gè)面板可以從Material Design面板中自動(dòng)生成顏色

多個(gè)光標(biāo)

移動(dòng)光標(biāo)按住CMD + 點(diǎn)擊可以添加多個(gè)光標(biāo),你也可以使用CMD + U撤銷你選擇的最后一個(gè)光標(biāo)。

復(fù)制圖片的Data URI

選擇”Network”面板

在“Resources”面板選擇你的圖片

在圖片上右擊,選擇“Copy Image as Data URI”選項(xiàng)

觸發(fā)偽類

在左邊的面板元素上右擊鼠標(biāo),并選擇“Force Element State”

另外在右邊的面板中選擇切換偽類狀態(tài)的圖標(biāo)

通過拖拽選擇多列

選擇“Sources”面板

在“Sources”面板編輯器中選擇你需要的文件

按住Alt并拖動(dòng)鼠標(biāo)

使用$0獲取當(dāng)前元素

選擇“Elements”面板

在”Element”面板中選擇DOM元素

點(diǎn)擊”Console”并輸入$0可以獲取當(dāng)前元素

在元素中顯示

選擇一個(gè)DOM節(jié)點(diǎn):

在“Console”面板中右擊

選擇”Reveal in Elements Panel”

查看事件監(jiān)聽器

選擇“Elements”面板”

在“Event Listeners”菜單中選擇一個(gè)事件

右擊并選擇“Show Function Definition”,你可以查看到對(duì)應(yīng)的源碼

預(yù)覽Easing

點(diǎn)擊easing圖標(biāo)(紫色的圖標(biāo)),可以預(yù)覽easing

你可以通過瀏覽選擇其他的easing或者自定義easing

媒體查詢

點(diǎn)擊左上角的手機(jī)圖標(biāo),選擇設(shè)備模式

點(diǎn)擊斷點(diǎn)(“blue”,”green”,”orange”)工具欄選擇斷點(diǎn)

如果你可擊一個(gè)工具欄,你可以在源碼中找到它對(duì)應(yīng)的位置。

Network Filmstrip

Film Strip”顯示頁(yè)面從開始到結(jié)束渲染的截圖。你可以點(diǎn)擊截圖和在timeline-style中查看視圖。

選擇“Network”面板

點(diǎn)擊“錄制”圖標(biāo)

重新加載頁(yè)面

Copy Response

你可以在網(wǎng)絡(luò)資源中復(fù)制”Response/Request”頭。

選擇“Network”面板”

在“Sources”面板編輯器中選擇你需要的文件”

右擊并選擇“Copy Response”

運(yùn)行預(yù)定義的代碼片段

在左側(cè)邊欄中選擇: Sources > Snippets

右擊選擇Select New

輸入文件名和在右側(cè)的面板中輸入代碼片段

代碼片段文件名上右擊選擇Run

Device Emulation Sensors

你可以模擬移動(dòng)設(shè)備傳感器:

觸摸屏

地理位置坐標(biāo)

加速計(jì)

你可以這樣操作:

選擇“Elements”面板

選擇“Emulation > Sensors”和點(diǎn)擊“Esc”取消

Workspaces

選擇“Sources”面板

在Sources面板中右擊并選擇“Add Folder to Workspaces”

選擇你的文件和右擊,并選擇Map to Network Resources

修改你的文件代碼和查看