教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

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

更新時間:2021年08月09日17時32分 來源:傳智教育 瀏覽次數(shù):

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

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

·按“F12”鍵。

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

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

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

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

開發(fā)者工具01

上圖中,比較常用的是Elements、Console、Sources和Network這4個面板,接下來一一為讀者介紹其使用方式。


1、Elements面板

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

開發(fā)者工具面板02

在上圖,選中 Elements面板,左側欄會顯示頁面的 DOM結構,右側欄顯示對應的選中節(jié)點樣式以及標準盒模型,可以方便查看頁面任意內(nèi)容的寬、高等屬性。

在Elements面板中無論修改HTML結構還是CSS代碼,修改以后的效果都會實時同步到頁面中。例如,修改當前選中的標簽的 width屬性為500 px,頁面中的div寬度就會發(fā)生變化,同時右側欄中該元素的盒模型值也會更新。


2. Console面板

Console面板即控制臺面板,使用該面板不僅可以輸出開發(fā)過程中的日志信息,而且可以直接編寫代碼,作為與JavaScript進行交互的 Shell命令行,頁面效果如下圖所示。

開發(fā)console面板

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

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

3. Sources面板

Sources面板即源代碼面板,如果在工作區(qū)打開本地文件,可以實時編輯代碼,并支持斷點調(diào)試,如下圖所示。

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

然后重新刷新頁面,即可看到設置斷點位置的代碼運行情況。

打斷點測試

4.Network面板

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




開發(fā)者工具

0 分享到:
和我們在線交談!