做過網頁開發的都知道，不過你是用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