做過網頁開發的都知道，不過你是用php還是asp.net以及java開發的網站，在開發過程中，web網頁展示頁面肯定會出現或多或少的問題。這裏我推薦使用谷歌瀏覽器進行Web網頁的調試以及錯誤信息定位。

使用谷歌瀏覽器調試網頁，一般無需另外下載瀏覽器插件，使用谷歌瀏覽器自帶的F12調試功能即可完成大部分的調試工作。

首先，我們打開對應的網頁，在谷歌瀏覽界面按下鍵盤的功能區域的F12鍵，即可調出調試界面，調取出來的調試面板如下所示：

下面來講解上圖中標註的幾個關鍵點的區域：

一、Elements區域：此區域主要展示網頁的Html文檔結構，涉及到的HTML文檔的Dom結構信息、引用的JS和Css文件。

此區域範圍的Html結構支持用戶調試編輯，用戶可以選中Html文檔中的某一個文檔結構，如div或者table等進行編輯，編輯後的效果將立馬在網頁中呈現出來。

同時此區域也支持定位Dom結構對應的Css樣式表，支持編輯調整樣式。

針對網頁上展示的某個區域塊，我們也可以通過定位工具，快速的查看到該結構對應的HTML結構信息。

下面以百度首頁為例，首頁圖如下：

我們如果要查看到上圖中的搜索框的Dom結構，我們可以調出F12調試工具後，我們只需要先選中調試面板最左上角的箭頭按鈕，然後將鼠標移動上述區域上即可看到結構如下：

如果是自己開發的網站網頁，那我們就可對相應的Dom結構以及右側的Css樣式進行調整，調整到最佳效果後，再復制到你的代碼中。

二、Console區域：此區域主要是一些輸出的信息以及網頁報錯信息。

當你的網頁達不到你的預期效果或者點擊某個按鈕無法觸發事件時候，你可以優先檢查Console區域是否有錯誤信息輸出，錯誤信息中將會告知你錯誤的具體原因以及錯誤行數。

當然你自主調試使用的Cosole.log的信息也會在此展示。

同時，此區域寫自定義的js語句或者方法調用，進行部分js功能的調試，如下圖：

三、Sources區域：此區域主要展示資源文件，以及資源文件對應的網站層級目錄等，包括圖片文件、Css樣式文件、Js文件等。

四、Network區域：此區域主要記錄http或https請求列表，所有的請求都會在這展示，包括網頁、js文件、css樣式文件、圖片資源以及其他數據資源等。

我們進行Ajax請求數據的時候，時常會使用到這個區域。當我們的ajax請求發送出去後，我們就在這個列表中找到對應的請求，然後點擊進入，即可看到詳細的信息，包括請求的參數、返回的數據等等。如下圖

四、Application區域：此區域為對象面板區域，包括瀏覽器本地的緩存對象等，此處我們最常用到的就是查看Cookie信息。如下圖：

最後，附上博主的IT技術學習群，歡迎各位同行入群指導交流。技術群：872894940

詳解網頁開發中的頁面調試【主要是谷歌瀏覽器的F12調試功能】