前端開發(fā)調(diào)試工具探析
——以谷歌瀏覽器的元素面板為例

曾博玲

（廣州松田職業(yè)學(xué)院,廣東 廣州511370）

俗話說,工欲善其事必先利其器。作為計(jì)算機(jī)應(yīng)用專業(yè)的高職學(xué)生來說,欲將來從事前端開發(fā),則除了學(xué)習(xí)前端的基礎(chǔ)知識(shí)以外,還需要掌握基本的前端調(diào)試工具,這也是作為前端學(xué)習(xí)的必備技巧。Chrome 開發(fā)者工具（Chrome DevTools）是一套內(nèi)置在Google Chrome 中Web 開發(fā)和調(diào)試工具[1],作為初級(jí)開發(fā)者來說,該工具中的元素面板（Elements）、控制臺(tái)面板（Console）、源代碼面板（Sources）和網(wǎng)絡(luò)面板（Network）是最常用的幾個(gè)面板。筆者在此以谷歌瀏覽器的元素面板為例,探析其基本用法。

1 Chrome 開發(fā)者工具的安裝和調(diào)用

首先,如何調(diào)用瀏覽器的開發(fā)者工具呢？這套工具是直接內(nèi)嵌在谷歌瀏覽器中,只需要在PC 端上下載安裝谷歌瀏覽器,那么就已經(jīng)自帶其開發(fā)者工具了,可以滿足大部分網(wǎng)頁的基本調(diào)試,不需要再額外去安裝插件。

安裝好谷歌瀏覽器之后,打開一個(gè)網(wǎng)頁,可以通過如下幾種方式調(diào)用此工具：

1.2 在頁面空白處,鼠標(biāo)右擊,選擇“檢查”,如圖②所示。由于版本不同,有些版本則是選擇“審查元素”。

圖1

圖2

1.3 快捷鍵F12 或Ctrl+Shift+I。

2 Chrome 開發(fā)者工具的位置放置

元素面板:

圖3

元素面板,即Elements 面板,使用此面板可以自由的操作DOM和CSS 來迭代布局和設(shè)計(jì)頁面[2]。點(diǎn)擊元素面板后,在調(diào)試工具處,左邊是HTML DOM 元素結(jié)構(gòu),右邊顯示對(duì)應(yīng)DOM 元素的CSS 樣式。不僅有利于查看修改文件結(jié)構(gòu)及元素、樣式動(dòng)態(tài)、幫助學(xué)生快速查找頁面問題,還可以學(xué)習(xí)模仿線上案例的相關(guān)做法。

2.1 網(wǎng)頁元素的定位

如何使用此面板呢？首先先了解如何快速匹配到網(wǎng)頁上某一元素對(duì)應(yīng)的DOM節(jié)點(diǎn)和CSS 樣式？可通過如下三種方案。

方法一：選中某一元素,鼠標(biāo)右擊,選擇“檢查”（版本不同,有些版本對(duì)應(yīng)的選項(xiàng)為“審查元素”）,則可以在面板上調(diào)到對(duì)應(yīng)的HTML DOM結(jié)構(gòu)和CSS 樣式。

方法三：在元素面板上的HTML DOM 結(jié)構(gòu)中,找到元素的DOM結(jié)構(gòu),定位到對(duì)應(yīng)網(wǎng)頁元素和樣式。如圖④所示,左邊是“新聞資訊”的DOM結(jié)構(gòu),右邊是“新聞資訊”對(duì)應(yīng)的CSS 樣式。

圖4

2.2 DOM節(jié)點(diǎn)編輯

在左邊的HTML 結(jié)構(gòu)中,雙擊對(duì)應(yīng)的結(jié)構(gòu)或者右擊,選擇“Add attribute”可以對(duì)元素添加屬性,選擇“Edit attribute”可以對(duì)元素屬性進(jìn)行修改,選擇“Edit as HTML”可進(jìn)行對(duì)應(yīng)的HTML 結(jié)構(gòu)進(jìn)行編輯,選擇“Delete element”可將元素從頁面刪除。還可以查看綁定在該元素的事件。

如圖5 所示,雙擊DOM 元素或者右擊＞選擇“Edit as HTML”,可進(jìn)行頁面修改。

圖5

2.3 CSS 樣式編輯

在右邊顯示的CSS 樣式中,可查看到DOM元素自身的默認(rèn)樣式、公共樣式以及自行設(shè)置的樣式和不生效的樣式；可以對(duì)自行設(shè)置的樣式進(jìn)行動(dòng)態(tài)的增加、刪除和修改；查看到該樣式對(duì)應(yīng)的文件及所在行數(shù)；還可以額外增加對(duì)應(yīng)的樣式。此處的樣式修改后無需刷新直接在頁面上看到對(duì)應(yīng)效果,大大提高了初學(xué)者的學(xué)習(xí)興趣,同時(shí)幫助初學(xué)者拍錯(cuò),快速找到不生效或者有影響的樣式,提高開發(fā)效率。

如圖6 所示,右邊是li 所對(duì)應(yīng)的樣式。越在上面的樣式優(yōu)先級(jí)越高,在上面的白色底紋,雙擊后可進(jìn)入編輯狀態(tài)的都是自行設(shè)置的樣式,包括對(duì)li 有影響的公共樣式,自定義樣式都可以進(jìn)行增加、刪除、修改等編輯?；疑准y的則是不可編輯的默認(rèn)樣式。

圖6

如圖7 所示,筆者欲修改新聞標(biāo)題列表二字的顏色,可點(diǎn)擊顏色的值“#fff”,當(dāng)其改為可輸入狀態(tài)時(shí)進(jìn)行選擇或者直接輸入顏色值進(jìn)行修改。欲修改新聞標(biāo)題列表的字體大小時(shí),則點(diǎn)擊影響字體大小的數(shù)值“24”,當(dāng)其變?yōu)榭奢斎牖蛘咝薷臓顟B(tài)時(shí),通過直接輸入,或者鍵盤上下鍵對(duì)元素的樣式數(shù)值進(jìn)行加減微調(diào),從而達(dá)到想要的效果。此改變數(shù)值大小的方法同樣適用于修改元素的長(zhǎng)寬、行高、時(shí)間等樣式。

圖7

2.4 盒子模型

在元素面板上選擇元素時(shí),所選擇的DOM元素上可顯示其盒子的大小,同時(shí)在樣式的Computed 處可以非常直觀地看到該元素的盒子模型,即元素的長(zhǎng)寬、padding、border 和margin 的值。如圖8 所示,在選擇“了解更多”的DOM節(jié)點(diǎn)時(shí),可以直觀的看到網(wǎng)頁上對(duì)應(yīng)顯示其大小為102*40,該值也剛好是在（元素的with+左右borde）*（元素的height+上下border）。

圖8

3 同步本地更改

當(dāng)調(diào)整好樣式時(shí),如果沒有設(shè)置同步本地文件,在瀏覽器刷新時(shí)會(huì)清空所做的修改。那么如何設(shè)置同步本地更改？在souce面板中,可通過添加本地源文件到工作區(qū),暫存保留更改的方法實(shí)同步本地更新[2]。

4 結(jié)論

Chrome 開發(fā)者工具功能非常強(qiáng)大,除了以上說的基本的DOM編輯和CSS 編輯外,還可以模擬各種終端設(shè)備,顯示日志/警告/錯(cuò)誤信息,查看頁面請(qǐng)求、網(wǎng)頁源文件和優(yōu)化網(wǎng)頁加載性能等功能。筆者在此也只是展示了此工具的冰山一角,頁面結(jié)構(gòu)和樣式的調(diào)試也是初級(jí)前端開發(fā)工程師必備的技能技巧,同時(shí)拋轉(zhuǎn)引玉,后期將繼續(xù)對(duì)此類工具進(jìn)行探析研究,愿能為前端開發(fā)高職課程的發(fā)展做一份力所能及的貢獻(xiàn)。