Chrome開(kāi)發(fā)者工具使用教程

前端開(kāi)發(fā)中，經(jīng)常需要調(diào)試代碼，所以各種調(diào)試工具及瀏覽器控制臺(tái)的使用會(huì)對(duì)開(kāi)發(fā)起到很大的作用。下面對(duì)目前很受喜歡的Chrome開(kāi)發(fā)者工具進(jìn)行介紹。Chrome開(kāi)發(fā)者工具是一套內(nèi)嵌到Chrome瀏覽器的Web開(kāi)發(fā)工具和調(diào)試工具，只要安裝了Chrome 瀏覽器，就可以使用。

在Chrome瀏覽器中,開(kāi)發(fā)者工具的打開(kāi)方式主要有以下幾種。

·按“F12”鍵。

·按“Ctrl + Shift +I”組合鍵。

·右擊頁(yè)面的任意位置，選擇快捷菜單中的“檢查”命令。

·單擊 Chrome瀏覽器右上角的自定義圖標(biāo)，展開(kāi)菜單，選擇“更多工具”→“開(kāi)發(fā)者工具”命令，如下圖所示。

打開(kāi)開(kāi)發(fā)者工具后，會(huì)看到有許多標(biāo)簽的面板,如下圖所示。

上圖中，比較常用的是Elements、Console、Sources和Network這4個(gè)面板，接下來(lái)一一為讀者介紹其使用方式。

1、Elements面板

Elements面板即元素面板，使用該面板可以直接操作DOM元素和樣式，包括查看元素屬性或者修改元素屬性、修改樣式等，非常方便開(kāi)發(fā)者調(diào)試HTML結(jié)構(gòu)和CSS樣式，頁(yè)面效果如圖所示。

在上圖，選中 Elements面板，左側(cè)欄會(huì)顯示頁(yè)面的 DOM結(jié)構(gòu)，右側(cè)欄顯示對(duì)應(yīng)的選中節(jié)點(diǎn)樣式以及標(biāo)準(zhǔn)盒模型,可以方便查看頁(yè)面任意內(nèi)容的寬、高等屬性。

在Elements面板中無(wú)論修改HTML結(jié)構(gòu)還是CSS代碼，修改以后的效果都會(huì)實(shí)時(shí)同步到頁(yè)面中。例如，修改當(dāng)前選中的標(biāo)簽的 width屬性為500 px，頁(yè)面中的div寬度就會(huì)發(fā)生變化,同時(shí)右側(cè)欄中該元素的盒模型值也會(huì)更新。

2. Console面板

Console面板即控制臺(tái)面板，使用該面板不僅可以輸出開(kāi)發(fā)過(guò)程中的日志信息，而且可以直接編寫(xiě)代碼，作為與JavaScript進(jìn)行交互的 Shell命令行，頁(yè)面效果如下圖所示。

在Console面板可直接定義函數(shù)并調(diào)用。另外,除了在Console面板中直接定義代碼,使用JavaScript中注入的Console對(duì)象中的常用方法，也可以快速顯示頁(yè)面中元素的信息。

值得一提的是，在Console面板中編寫(xiě)代碼時(shí)，按“Shif+Enter”組合鍵可以實(shí)現(xiàn)代碼的換行。

3. Sources面板

Sources面板即源代碼面板，如果在工作區(qū)打開(kāi)本地文件，可以實(shí)時(shí)編輯代碼，并支持?jǐn)帱c(diǎn)調(diào)試，如下圖所示。

在下圖中，打開(kāi)JavaScript文件，單擊代碼前面的編號(hào)計(jì)可以設(shè)詈斷占進(jìn)行調(diào)試,例如單擊代碼序號(hào)137和141，設(shè)置的所有斷點(diǎn)都會(huì)顯示在右側(cè)的Breaknoints斷點(diǎn)區(qū)。

然后重新刷新頁(yè)面,即可看到設(shè)置斷點(diǎn)位置的代碼運(yùn)行情況。

4.Network面板

Network面板即網(wǎng)絡(luò)面板，用于記錄頁(yè)面上網(wǎng)絡(luò)請(qǐng)求的詳情信息，根據(jù)它可進(jìn)行網(wǎng)絡(luò)性能優(yōu)化，打開(kāi)擴(kuò)展的Network面板，查看所有請(qǐng)求的運(yùn)行狀況，頁(yè)面效果如圖所示。