前端chrome瀏覽器除錯總結

轉載：https://www.jianshu.com/p/b25c5b88baf5

一.先來認識一下這些按鈕的功能

先來看這張圖最上頭的一行是一個功能選單，每一個選單都有它相應的功能和使用方法，依次從左往右來看

1.箭頭按鈕：用於在頁面選擇一個元素來審查和檢視它的相關資訊，當我們在Elements這個按鈕頁面下點選某個Dom元素時，箭頭按鈕會變成選擇狀態

2.裝置圖示：點選它可以切換到不同的終端進行開發模式，移動端和pc端的一個切換，可以選擇不同的移動終端裝置，同時可以選擇不同的尺寸比例，chrome瀏覽器的模擬移動裝置和真實的裝置相差不大，是非常好的選擇

可選擇的適配

3.Elements 功能標籤頁：用來檢視，修改頁面上的元素，包括DOM標籤，以及css樣式的檢視，修改，還有相關盒模型的圖形資訊，下圖我們可以看到當我滑鼠選擇id 為lg_tar的div元素時，右側的css樣式對應的會展示出此id 的樣式資訊，此時可以在右側進行一個修改，修改即可在頁面上生效， 灰色的element.style樣式同樣可以進行新增和書寫，唯一的區別是，在這裡新增的樣式是新增到了該元素內部，實現方式即：該div元素的style屬性，這個頁面的功能很強大，在我們做了相關的頁面後，修改樣式是一塊很重要的工作，細微的差距都需要調整，但是不可能說做到每修改一點即編譯一遍程式碼，再重新整理瀏覽器檢視效果，這樣很低效，一次性在瀏覽器中修改之後，再到程式碼中進行修改

對應的樣式

盒模型資訊

同時，當我們瀏覽網站看到某些特別炫酷的效果和難做的樣式時候，開啟這個功能，我們即可看到別人是如何實現的，學會它這知識就是你的了，仔細鑽研也會有意想不到的收穫

4.Console控制檯：用於列印和輸出相關的命令資訊，其實console控制檯除了我們熟知的報錯，列印console.log資訊外，還有很多相關的功能，下面簡單介紹幾個

a: 一些對頁面資料的指令操作，比如打斷點正好執行到獲取的資料上，由於資料都是層層巢狀的物件，這個時候檢視裡面的key/value不是很方便，即可用這個指令開檢視，obj的json string 格式的key/value，我們對於資料裡面有哪些欄位和屬性即可一目瞭然

其他功能

b: 除了console.log還有其他相關的指令可用

console也有相關的API

5.Sources js資源頁面：這個頁面內我們可以找到當然瀏覽器頁面中的js 原始檔，方便我們檢視和除錯，在我還沒有走出校園時候，我經常看一些大站的js程式碼，那時候其實基本都看不懂，但是最起碼可以看看人家的程式碼風格，人家的命名方式，所有的程式碼都是壓縮之後的程式碼，我們可以點選下面的{}大括號按鈕將程式碼轉成可讀格式

Sources Panel 的左側分別是 Sources 和 Content scripts和Snippets

對應的原始碼

關於打斷點除錯的內容，下面介紹，先來說一些，其他平時基本沒人用但是很有用的小點，比如當我們想不起某個方法的具體使用時候，會開啟控制檯隨意寫一些測試程式碼，或者想測試一下剛剛寫的方法是否會出現期待的樣子，但是控制檯一打回車本想換行但是卻執行剛寫的半截程式碼，所以推薦使用Sources下面的左側的Sinppets程式碼片段按鈕，這時候點選建立一個新的片段檔案，寫完測試程式碼後把滑鼠放在新建檔案上run，再結合控制檯檢視相關資訊（新建了一個名叫：app.js的片段程式碼，在你的專案環境頁面內，該片段可執行專案內的方法）

自己書寫的片段

Content scripts 是 Chrome 的一種擴充套件程式，它是按照擴充套件的ID來組織的，這些檔案也是嵌入在頁面中的資源，這類檔案可以讀寫和操作我們的資源，需要除錯這些擴充套件檔案，則可以在這個目錄下開啟相關檔案除錯，但是幾乎我們的專案還沒有相關的擴充套件檔案，所以啥也看不到，平時也不需要關心這塊

無結果

6.Network 網路請求標籤頁：可以看到所有的資源請求，包括網路請求，圖片資源，html,css，js檔案等請求，可以根據需求篩選請求項，一般多用於網路請求的檢視和分析，分析後端介面是否正確傳輸，獲取的資料是否準確，請求頭，請求引數的檢視

所有的資源

以上我選擇了All，就會把該頁面所有資原始檔請求下來，如果只選擇XHR 非同步請求資源，則我們可以分析相關的請求資訊

請求的相關資訊

開啟一個Ajax非同步請求，可以看到它的請求頭資訊，是一個POST請求，引數有哪些，還可以預覽它的返回的結果資料，這些資料的使用和檢視有利於我們很好的和後端工程師們聯調資料，也方便我們前端更直觀的分析資料

預覽請求的資料

7.Timeline標籤頁可以顯示JS執行時間、頁面元素渲染時間，不做過多介紹

8.Profiles標籤頁可以檢視CPU執行時間與記憶體佔用，不做過多介紹

9.Resources標籤頁會列出所有的資源，以及HTML5的Database和LocalStore等，你可以對儲存的內容編輯和刪除 不做過多介紹

10.Security標籤頁 可以告訴你這個網站的安全性，檢視有效的證照等

11.Audits標籤頁 可以幫你分析頁面效能，有助於優化前端頁面，分析後得到的報告

分析結果

二.Sources資源頁面的斷點除錯

1.如何除錯：

除錯js程式碼，肯定是我們常用的功能，那麼如何打斷點，找到要除錯的檔案，然後在內容原始碼左側的程式碼標記行處點選即可打上一個斷點

2.斷點與 js程式碼修改

看下面這張圖，我在一個名為toggleTab的方法下打了兩個斷點，當開始執行我們的點選切換tab行為後，程式碼會在執行的斷點出停下來，並把相關的資料展示一部分，此時可以在已經執行過得程式碼處，把滑鼠放上去，即可檢視相關的具體資料資訊，同時我們可以使用右側的功能鍵進行除錯，右側最上面一排分別是：暫停/繼續、單步執行(F10快捷鍵)、單步跳入此執行塊(F11快捷鍵)、單步跳出此執行塊、禁用/啟用所有斷點。下面是各種具體的功能區

在程式碼中打斷點

在當前的程式碼執行區域，在除錯中如果發現需要修改的地方，也是可以立即修改的，修改後儲存即可生效，這樣就免去了再到程式碼中去書寫，再重新整理回看了

臨時修改

3.快速進入除錯的方法

當我們的程式碼執行到某個程式塊方法處，這個方法上可能你並沒有設定相關的斷點，此時你可以F11進入此程式塊，但是往往我們的專案都是經過很多原始碼封裝好的方法，有時候進入後，會走很多底層的封裝方法，需要很多步驟才能真正進入這個函式塊，此時將滑鼠放在此函式上，會出現相關提示，會告訴你在該檔案的哪一行程式碼處，點選即可直接看到這個函式，然後臨時打上斷點，按F10或者點選右上角的第二個按鈕即可直接進入此函式的斷點處

4.除錯的功能區域

每一個功能區，都有它相關的左右，先來看一張圖，它都有哪些功能

Call Stack呼叫棧：當斷點執行到某一程式塊處停下來後，右側除錯區的 Call Stack 會顯示當前斷點所處的方法呼叫棧，從上到下由最新呼叫處依次往下排列，Call Stack 列表的下方是Scope Variables列表可以檢視此時區域性變數和全域性變數的值。圖中可以看出，我們最先走了toggleTab這個方法，然後走到了一個更新物件的方法上，當前呼叫在哪裡，箭頭會幫你指向哪裡，同時我們可以點選，呼叫棧列表上的任意一處，即可回頭再去看看程式碼

但是若你想從新從某個呼叫方法出執行，可以右鍵Restart Frame， 斷點就會跳到此處開頭重新執行，Scope 中的變數值也會依據程式碼從新更改，這樣就可以回退來從新除錯，錯過的除錯也可以回過頭來反覆檢視

Breakpoints關於斷點：所有當前js的斷點都會展示在這個區域，你可以點選按鈕用來“去掉/加上”此處斷點，也可以點選下方的程式碼表示式，調到相應的程式程式碼處，來檢視

XHR Breakpoints

在XHR Breakpoints處，點選右側的+號，可以新增請求的URL，一旦 XHR 呼叫觸發時就會在 request.send() 的地方中斷

DOM Breakpoints:

可以給你的DOM元素設定斷點，有時候真的需要監聽和檢視某個元素的變化情況，賦值情況，但是我們並是不太關心哪一段程式碼對它做的修改，只想看看它的變化情況，那麼可以給它來個監聽事件，這個時候DOM Breakpoints中會如圖

當要給DOM新增斷點的時候，會出現選擇項分別是如下三種修改1.子節點修改2.自身屬性修改3.自身節點被刪除。選中之後，Sources Panel 中右側的 DOM Breakpoints 列表中就會出現該 DOM 斷點。一旦執行到要對該 DOM 做相應修改時，程式碼就會在那裡停下來

Event listener Breakpoints 

最後Event Listener 列表，這裡列出了各種可能的事件型別。勾選對應的事件型別，當觸發了該型別的事件的 JavaScript 程式碼時就會自動中斷

三.Post man你值得擁有的網路請求神器

在我們的開發過程中，後端的介面都是由發起AJAX請求而獲取到的相關資料，但是很多情況是我們的業務還沒有做到那塊時，後端的同學介面都已經準備好了，但是為了便於後期的工作，將介面請求的資料模擬訪問，然後對介面聯調很重要，也很方便，因為我們不可能把每個請求程式碼都寫到檔案裡編譯好了再去瀏覽器內檢視，這時候可以安裝一個post man網路請求外掛，在谷歌應用商店下載，需要翻牆

該擴充套件程式使用非常簡單，功能同時也非常強大，輸入你的請求，選擇好請求的method，需要請求引數的挨個填好，send之後，就可以看到返回的資料，這個小工具很利於我們的開發