1.4 使用谷歌瀏覽器調試開發網頁

在網頁開發中，一個好的調試工具是不可缺少的。在眾多的瀏覽器中，推薦初學者使用谷歌瀏覽器進行調試開發。

一、谷歌瀏覽器調試功能介紹

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

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

為了調試方便，在以后的課程中將使用上下結構模式，這樣工具面板的使用面積更大，也更方便開發與調試。

二、HTML相關的調試工具與面板

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

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

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