1.4 使用谷歌瀏覽器調(diào)試開發(fā)網(wǎng)頁

在網(wǎng)頁開發(fā)中，一個好的調(diào)試工具是不可缺少的。在眾多的瀏覽器中，推薦初學(xué)者使用谷歌瀏覽器進(jìn)行調(diào)試開發(fā)。

一、谷歌瀏覽器調(diào)試功能介紹

打開谷歌瀏覽器，按下快捷鍵＜F12＞就可以彈出調(diào)試窗體，如圖1-5所示。在下面打開的調(diào)試模式中，我們可以看見有許多工具欄和工作面板，使用這些工具可調(diào)試 HTML，也可調(diào)試 CSS，還可調(diào)試JavaScript。除此之外，它還能調(diào)試與服務(wù)器的交互信息。我們將會著重介紹調(diào)試HTML與CSS的工具與面板。總之，谷歌瀏覽器是一個既簡單又實用的工具。

單擊菜單中的圖標(biāo)，將會彈出3個菜單選項欄。從左到右，第1個圖標(biāo)會將調(diào)試窗體變成一個獨立窗體，第2個圖標(biāo)會將窗體與HTML頁面變成上下結(jié)構(gòu)，第3個圖標(biāo)就如讀者看見的是左右模式。

為了調(diào)試方便，在以后的課程中將使用上下結(jié)構(gòu)模式，這樣工具面板的使用面積更大，也更方便開發(fā)與調(diào)試。

二、HTML相關(guān)的調(diào)試工具與面板

如圖1-6所示，單擊元素選擇工具，圖標(biāo)會變成藍(lán)色選中狀態(tài)，這個時候點擊google圖片，Elements面板會立即定位到對應(yīng)圖片元素的HTML代碼位置。而右邊有個Style面板會顯示出該HTML元素對應(yīng)的CSS樣式屬性。在開發(fā)中經(jīng)常會用這個方法來查找和定位問題。

如圖1-7所示，調(diào)試器不僅可以定位代碼，還能修改代碼與CSS屬性值。而且修改之后立即會在頁面中呈現(xiàn)出來，這就是開發(fā)者常說的“所見即所得”。在要修改代碼的地方雙擊則可變成修改狀態(tài)，右邊CSS屬性則是鼠標(biāo)指針移動上去會出現(xiàn)選擇框。當(dāng)然也可以雙擊修改屬性的樣式。

使用谷歌瀏覽器進(jìn)行調(diào)試有很多明顯的優(yōu)勢，在這里僅僅演示了一點。隨著后面課程的推進(jìn)，會逐漸介紹這個工具更多的新功能。