前端chrome瀏覽器調試總結

看了一篇文章,結合本身實習的經歷,以爲文章說得很是好,轉載記錄一下。

文章內容來源: 簡書–cayley的編程之路

1、前言

轉載博主說:初學者僅僅掌握了alert、console這些基本的調試方法。

我剛自學前端初期的時候,也是隻用這種方法調試,天真地之後全部調試均可以經過console解決。後面去公司實習,看大佬們調試頁面,這邊打個斷點,那邊記錄一下,立刻就把問題定位出來了。確實,學會瀏覽器調試工具真的能大大提升本身的工做效率,尤爲是在大項目的處理過程當中。

2、調試工具

1. Elements

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

箭頭按鈕：用於在頁面選擇一個元素來審查和查看它的相關信息，當咱們在Elements這個按鈕頁面下點擊某個Dom元素時，箭頭按鈕會變成選擇狀態

設備圖標：點擊它能夠切換到不一樣的終端進行開發模式，移動端和pc端的一個切換，能夠選擇不一樣的移動終端設備，同時能夠選擇不一樣的尺寸比例，chrome瀏覽器的模擬移動設備和真實的設備相差不大，是很是好的選擇

Element內容：用來查看，修改頁面上的元素，包括DOM標籤，以及css樣式的查看，修改，還有相關盒模型的圖形信息。
下圖咱們能夠看到當我鼠標選擇id爲lg_tar的div元素時，右側的css樣式對應的會展現出此id的樣式信息，此時能夠在右側進行一個修改，修改便可在頁面上生效。

灰色的element.style樣式一樣能夠進行添加和書寫，惟一的區別是，在這裏添加的樣式是添加到了該元素內。

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

2. Console控制檯：

用於打印和輸出相關的命令信息，其實console控制檯除了咱們熟知的報錯，打印console.log信息外，還有不少相關的功能，下面簡單介紹幾個:

一些對頁面數據的指令操做，好比打斷點正好執行到獲取的數據上，因爲數據都是層層嵌套的對象，這個時候查看裏面的key/value不是很方便
便可用這個指令開查看，obj的json string 格式的key/value，咱們對於數據裏面有哪些字段和屬性便可一目瞭然

除了console.log還有其餘相關的指令可用

3. Sources:

js資源頁面：這個頁面內咱們能夠找到固然瀏覽器頁面中的js 源文件，方便咱們查看和調試，在我尚未走出校園時候，我常常看一些大站的js代碼，那時候其實基本都看不懂，可是最起碼能夠看看人家的代碼風格，人家的命名方式，全部的代碼都是壓縮以後的.
咱們能夠點擊下面的{}大括號按鈕將代碼轉成可讀格式
文件原壓縮的代碼:

轉換成可讀格式的代碼:

Sinppets:
好比當咱們想不起某個方法的具體使用時候，會打開控制檯隨意寫一些測試代碼，或者想測試一下剛剛寫的方法是否會出現期待的樣子，可是控制檯一打回車本想換行可是卻執行剛寫的半截代碼.

因此推薦使用Sources下面的左側的Sinppets代碼片斷按鈕這時候點擊建立一個新的片斷文件，寫完測試代碼後把鼠標放在新建文件上run，再結合控制檯查看相關信息

新建了一個名叫：app.js的片斷代碼，在你的項目環境頁面內，該片斷可執行項目內的方法

Content scripts:
Chrome 的一種擴展程序，它是按照擴展的ID來組織的，這些文件也是嵌入在頁面中的資源，這類文件能夠讀寫和操做咱們的資源，須要調試這些擴展文件，則能夠在這個目錄下打開相關文件調試，可是幾乎咱們的項目尚未相關的擴展文件，因此啥也看不到，平時也不須要關心這塊

4. Network:

網絡請求標籤頁：能夠看到全部的資源請求，包括網絡請求，圖片資源，html,css，js文件等請求，能夠根據需求篩選請求項，通常多用於網絡請求的查看和分析，分析後端接口是否正確傳輸，獲取的數據是否準確，請求頭，請求參數的查看

以上我選擇了All，就會把該頁面全部資源文件請求下來，若是隻選擇XHR 異步請求資源，則咱們能夠分析相關的請求信息

打開一個Ajax異步請求，能夠看到它的請求頭信息，是一個POST請求，參數有哪些，還能夠預覽它的返回的結果數據，這些數據的使用和查看有利於咱們很好的和後端工程師們聯調數據，也方便咱們前端更直觀的分析數據

5. Performance(舊版瀏覽器爲Timeline):

時間表能夠記錄和運行分析應用程序全部的活動，爲了使的記錄頁面的交互，打開時間軸面板，而後按開始錄製錄製按鈕（），或者經過鍵入鍵盤快捷鍵Cmd的 +E（Mac）或按Ctrl +E（Windows / Linux版）。這個記錄按鈕會從灰色變成紅色，而Timeline將開始從你的頁面獲取時間線（timeline）。在你的應用中完成一些操做，記錄到一些數據以後，再一次點擊按鈕來中止記錄。

紅色的點旁邊是清除記錄。後面的選項能夠選擇須要capture捕獲的項。分別是網絡，JS簡介，截圖，存儲，描繪。

下圖是一個任選的一個網頁打開的時間表：

第一個框裏是概述，這裏能夠大體看到頁面的性能。

第二個框裏是event，便是事件監控。這是CPU的堆棧跟蹤的可視化，綠色表示媒體時間，紅色表示負載事件，藍色表示DOM事件。

第三個框裏表示存儲

第四個框裏是詳細信息，這裏會顯示事件的詳細信息。

CPU。CPU資源。此區域圖指明瞭事件的類型消耗的CPU資源。

上圖可見加載時間0.02s，腳本15.68s，渲染時間11.28s，繪製時間46.06s，其餘時間49.06s，空閒1.27s時間。

上圖是總表。下圖是詳細彙總表。

以上內容來源chrome開發者工具淺析--timeline

5. Memory(舊版爲Profiles):

會列出全部的資源，以及HTML5的Database和LocalStore等，你能夠對存儲的內容編輯和刪除 不作過多介紹

6. Security

能夠告訴你這個網站的安全性，查看有效的證書等

7. Application(舊版爲Resources)

會列出全部的資源，以及HTML5的Database和LocalStore等，你能夠對存儲的內容編輯和刪除 不作過多介紹

8. Audits

能夠幫你分析頁面性能，有助於優化前端頁面，分析後獲得的報告

3、 斷點調試

1. 如何調試

調試js代碼，確定是咱們經常使用的功能，那麼如何打斷點，找到要調試的文件，而後在內容源代碼左側的代碼標記行處點擊便可打上一個斷點

2. 斷點與 js代碼修改

看下面這張圖，我在一個名爲toggleTab的方法下打了兩個斷點，當開始執行咱們的點擊切換tab行爲後，代碼會在執行的斷點出停下來，並把相關的數據展現一部分，此時能夠在已經執行過得代碼處，把鼠標放上去，便可查看相關的具體數據信息，同時咱們可使用右側的功能鍵進行調試.

右側最上面一排分別是：暫停/繼續(F8)、單步執行(新版瀏覽器F九、F10)、單步跳入此執行塊(F11快捷鍵)、單步跳出此執行塊(shift+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 代碼時就會自動中斷

做者：Cayley碩兒
連接：https://www.jianshu.com/p/b25c5b88baf5 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。