一、調(diào)試工具

1、Elements

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

 

 

     箭頭按鈕：用于在頁面選擇一個元素來審查和查看它的相關(guān)信息，當(dāng)我們在Elements這個按鈕頁面下點擊某個Dom元素時，箭頭按鈕會變成選擇狀態(tài)

     設(shè)備圖標(biāo)：點擊它可以切換到不同的終端進(jìn)行開發(fā)模式，移動端和pc端的一個切換，可以選擇不同的移動終端設(shè)備，同時可以選擇不同的尺寸比例，chrome瀏覽器的模擬移動設(shè)備和真實的設(shè)備相差不大，是非常好的選擇

 

     Element內(nèi)容：用來查看，修改頁面上的元素，包括DOM標(biāo)簽，以及css樣式的查看，修改，還有相關(guān)盒模型的圖形信息。
下圖我們可以看到當(dāng)我鼠標(biāo)選擇id為lg_tar的div元素時，右側(cè)的css樣式對應(yīng)的會展示出此id的樣式信息，此時可以在右側(cè)進(jìn)行一個修改，修改即可在頁面上生效。

 

 

灰色的element.style樣式同樣可以進(jìn)行添加和書寫，唯一的區(qū)別是，在這里添加的樣式是添加到了該元素內(nèi)。

同時，當(dāng)我們?yōu)g覽網(wǎng)站看到某些特別炫酷的效果和難做的樣式時候，打開這個功能，我們即可看到別人是如何實現(xiàn)的，學(xué)會它這知識就是你的了，仔細(xì)鉆研也會有意想不到的收獲

 

 

2. Console控制臺：

用于打印和輸出相關(guān)的命令信息，其實console控制臺除了我們熟知的報錯，打印console.log信息外，還有很多相關(guān)的功能，下面簡單介紹幾個:

一些對頁面數(shù)據(jù)的指令操作，比如打斷點正好執(zhí)行到獲取的數(shù)據(jù)上，由于數(shù)據(jù)都是層層嵌套的對象，這個時候查看里面的key/value不是很方便
即可用這個指令開查看，obj的json string 格式的key/value，我們對于數(shù)據(jù)里面有哪些字段和屬性即可一目了然

 

除了console.log還有其他相關(guān)的指令可用

 

 

3. Sources:

js資源頁面：這個頁面內(nèi)我們可以找到當(dāng)然瀏覽器頁面中的js 源文件，方便我們查看和調(diào)試，在我還沒有走出校園時候，我經(jīng)常看一些大站的js代碼，那時候其實基本都看不懂，但是最起碼可以看看人家的代碼風(fēng)格，人家的命名方式，所有的代碼都是壓縮之后的.
我們可以點擊下面的{}大括號按鈕將代碼轉(zhuǎn)成可讀格式
文件原壓縮的代碼:

 

 

 

 轉(zhuǎn)換成可讀格式的代碼:

 

 

          點擊source標(biāo)簽有三個模塊：

          第一個是來選擇資源的，當(dāng)網(wǎng)頁被加載的時候向服務(wù)器端請求出來的文件包括.html .ccs .js這樣的文件；第二個是js調(diào)試窗口，可以在左邊打斷點，刷新頁面，進(jìn)行調(diào)試。第三個窗口重點說明一下：

          

 

 

         1.Pause script excution 【單步執(zhí)行，在斷點處暫停，等待調(diào)試–不是直譯】

         2.Step over next function call【單步跳過】 ： 會跳到下一個斷點

         3.Step into next function call【單步進(jìn)入】 ：會進(jìn)入函數(shù)內(nèi)部調(diào)試

         4.Step out of current function 【單步跳出】: 會跳出當(dāng)前這個斷點的函數(shù)，

         5.step ：一步步執(zhí)行

         6.Deactivate breakpoints : 使所有斷點臨時失效

         7.Don’t Pause on exceptions: 不要在異常處暫停，

         8.Pause On Caught Exceptions– 若拋出異常則需要暫停在那里

         9.Watch： 監(jiān)聽表達(dá)式 不需要一次又一次地輸入一個變量名或者表達(dá)式，你只需將他們添加到監(jiān)視列表中就可以時時觀察它們的變化：

        10.Call stack：在一行代碼里暫停時，可以在 Call Stack 面板查看是哪些棧將你帶到了當(dāng)前斷點（到達(dá)當(dāng)前函數(shù)調(diào)用了哪些函數(shù)）。如果不是在一行代碼里暫停， Call Stack 面板是沒有內(nèi)容的。點擊函數(shù)會跳到此函數(shù)調(diào)用的地方。藍(lán)色箭頭是當(dāng)前查看的函數(shù)。在 Call Stack 面板里右鍵，選擇 Copy stack trace 可以將面板里的 stack 信息復(fù)制到 clipboard。復(fù)制格式如下（函數(shù)名稱、在代碼里的行數(shù)）：

            fix (jquery.min.js:formatted:2005)

           dispatch (jquery.min.js:formatted:1961)

            r.handle (jquery.min.js:formatted:1853)

        11.scope:可以看到相當(dāng)多實用的信息，比如this的指向，是否有值，斷點是對象還是其他等。。

        12.BreakPoints: 記錄了標(biāo)記的所有斷點，可以點擊跳轉(zhuǎn)

        13.XHR/FETCH BreakPoints: 針對某一個請求或者請求的關(guān)鍵字設(shè)置斷點

        14.Dom BreakPoints:右鍵單擊某個DOM元素，并選擇Break on下的subtree modifications。這樣調(diào)試器就可以在腳本遍歷到該元素并且要修改它的時候自動停止，以讓用戶進(jìn)行調(diào)試檢查

        15.Global listener:

        16.Event listener breakPoints:在監(jiān)聽器監(jiān)聽到某個事件發(fā)生的時候，斷點暫停

   Sinppets:
   比如當(dāng)我們想不起某個方法的具體使用時候，會打開控制臺隨意寫一些測試代碼，或者想測試一下剛剛寫的方法是否會出現(xiàn)期待的樣子，但是控制臺一打回車本想換行但是卻執(zhí)行剛寫的半截代碼.

   所以推薦使用Sources下面的左側(cè)的Sinppets代碼片段按鈕這時候點擊創(chuàng)建一個新的片段文件，寫完測試代碼后把鼠標(biāo)放在新建文件上run，再結(jié)合控制臺查看相關(guān)信息

   新建了一個名叫：app.js的片段代碼，在你的項目環(huán)境頁面內(nèi)，該片段可執(zhí)行項目內(nèi)的方法

  

Content scripts:
Chrome 的一種擴(kuò)展程序，它是按照擴(kuò)展的ID來組織的，這些文件也是嵌入在頁面中的資源，這類文件可以讀寫和操作我們的資源，需要調(diào)試這些擴(kuò)展文件，則可以在這個目錄下打開相關(guān)文件調(diào)試，但是幾乎我們的項目還沒有相關(guān)的擴(kuò)展文件，所以啥也看不到，平時也不需要關(guān)心這塊

4. Network:

網(wǎng)絡(luò)請求標(biāo)簽頁：可以看到所有的資源請求，包括網(wǎng)絡(luò)請求，圖片資源，html,css，js文件等請求，可以根據(jù)需求篩選請求項，一般多用于網(wǎng)絡(luò)請求的查看和分析，分析后端接口是否正確傳輸，獲取的數(shù)據(jù)是否準(zhǔn)確，請求頭，請求參數(shù)的查看

 

 

以上我選擇了All，就會把該頁面所有資源文件請求下來，如果只選擇XHR 異步請求資源，則我們可以分析相關(guān)的請求信息

 

 

 打開一個Ajax異步請求，可以看到它的請求頭信息，是一個POST請求，參數(shù)有哪些，還可以預(yù)覽它的返回的結(jié)果數(shù)據(jù)，這些數(shù)據(jù)的使用和查看有利于我們很好的和后端工程師們聯(lián)調(diào)數(shù)據(jù)，也方便我們前端更直觀的分析數(shù)據(jù)

 

 

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

時間表可以記錄和運行分析應(yīng)用程序所有的活動，為了使的記錄頁面的交互，打開時間軸面板，然后按開始錄制錄制按鈕（），或者通過鍵入鍵盤快捷鍵Cmd的 +E（Mac）或按Ctrl +E（Windows / Linux版）。這個記錄按鈕會從灰色變成紅色，而Timeline將開始從你的頁面獲取時間線（timeline）。在你的應(yīng)用中完成一些操作，記錄到一些數(shù)據(jù)之后，再一次點擊按鈕來停止記錄。

紅色的點旁邊是清除記錄。后面的選項可以選擇需要capture捕獲的項。分別是網(wǎng)絡(luò)，JS簡介，截圖，存儲，描繪。

下圖是一個任選的一個網(wǎng)頁打開的時間表：

第一個框里是概述，這里可以大致看到頁面的性能。

第二個框里是event，即是事件監(jiān)控。這是CPU的堆棧跟蹤的可視化，綠色表示媒體時間，紅色表示負(fù)載事件，藍(lán)色表示DOM事件。

第三個框里表示存儲

第四個框里是詳細(xì)信息，這里會顯示事件的詳細(xì)信息。

CPU。CPU資源。此區(qū)域圖指明了事件的類型消耗的CPU資源。

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

上圖是總表。下圖是詳細(xì)匯總表。

5. Memory(舊版為Profiles):

會列出所有的資源，以及HTML5的Database和LocalStore等，你可以對存儲的內(nèi)容編輯和刪除 不做過多介紹

6. Security

可以告訴你這個網(wǎng)站的安全性，查看有效的證書等

7. Application(舊版為Resources)

會列出所有的資源，以及HTML5的Database和LocalStore等，你可以對存儲的內(nèi)容編輯和刪除 不做過多介紹

8. Audits

可以幫你分析頁面性能，有助于優(yōu)化前端頁面，分析后得到的報告

二、斷點調(diào)試

1. 如何調(diào)試

調(diào)試js代碼，肯定是我們常用的功能，那么如何打斷點，找到要調(diào)試的文件，然后在內(nèi)容源代碼左側(cè)的代碼標(biāo)記行處點擊即可打上一個斷點

2. 斷點與 js代碼修改

看下面這張圖，我在一個名為toggleTab的方法下打了兩個斷點，當(dāng)開始執(zhí)行我們的點擊切換tab行為后，代碼會在執(zhí)行的斷點出停下來，并把相關(guān)的數(shù)據(jù)展示一部分，此時可以在已經(jīng)執(zhí)行過得代碼處，把鼠標(biāo)放上去，即可查看相關(guān)的具體數(shù)據(jù)信息，同時我們可以使用右側(cè)的功能鍵進(jìn)行調(diào)試.

右側(cè)最上面一排分別是：暫停/繼續(xù)(F8)、單步執(zhí)行(新版瀏覽器F9、F10)、單步跳入此執(zhí)行塊(F11快捷鍵)、單步跳出此執(zhí)行塊(shift+F11)、禁用/啟用所有斷點。下面是各種具體的功能區(qū)

在當(dāng)前的代碼執(zhí)行區(qū)域，在調(diào)試中如果發(fā)現(xiàn)需要修改的地方，也是可以立即修改的，修改后保存即可生效，這樣就免去了再到代碼中去書寫，再刷新回看了

3. 快速進(jìn)入調(diào)試的方法

當(dāng)我們的代碼執(zhí)行到某個程序塊方法處，這個方法上可能你并沒有設(shè)置相關(guān)的斷點，此時你可以F11進(jìn)入此程序塊.

但是往往我們的項目都是經(jīng)過很多源代碼封裝好的方法，有時候進(jìn)入后，會走很多底層的封裝方法，需要很多步驟才能真正進(jìn)入這個函數(shù)塊.

此時將鼠標(biāo)放在此函數(shù)上，會出現(xiàn)相關(guān)提示，會告訴你在該文件的哪一行代碼處，點擊即可直接看到這個函數(shù)，然后臨時打上斷點，按F10或者點擊右上角的第二個按鈕即可直接進(jìn)入此函數(shù)的斷點處

4. 調(diào)試的功能區(qū)域

每一個功能區(qū)，都有它相關(guān)的左右，先來看一張圖，它都有哪些功能

Call Stack調(diào)用棧:
當(dāng)斷點執(zhí)行到某一程序塊處停下來后，右側(cè)調(diào)試區(qū)的Call Stack 會顯示當(dāng)前斷點所處的方法調(diào)用棧，從上到下由最新調(diào)用處依次往下排列，Call Stack 列表的下方是Scope Variables列表可以查看此時局部變量和全局變量的值。圖中可以看出，我們最先走了toggleTab這個方法，然后走到了一個更新對象的方法上，當(dāng)前調(diào)用在哪里，箭頭會幫你指向哪里，同時我們可以點擊，調(diào)用棧列表上的任意一處，即可回頭再去看看代碼

但是若你想從新從某個調(diào)用方法出執(zhí)行，可以右鍵Restart Frame， 斷點就會跳到此處開頭重新執(zhí)行，Scope 中的變量值也會依據(jù)代碼從新更改，這樣就可以回退來從新調(diào)試，錯過的調(diào)試也可以回過頭來反復(fù)查看

Breakpoints關(guān)于斷點：所有當(dāng)前js的斷點都會展示在這個區(qū)域，你可以點擊按鈕用來“去掉/加上”此處斷點，也可以點擊下方的代碼表達(dá)式，調(diào)到相應(yīng)的程序代碼處，來查看

XHR Breakpoints:
在XHR Breakpoints處，點擊右側(cè)的+號，可以添加請求的URL，一旦 XHR 調(diào)用觸發(fā)時就會在 request.send() 的地方中斷

DOM Breakpoints::
可以給你的DOM元素設(shè)置斷點，有時候真的需要監(jiān)聽和查看某個元素的變化情況，賦值情況，但是我們并是不太關(guān)心哪一段代碼對它做的修改，只想看看它的變化情況，那么可以給它來個監(jiān)聽事件，這個時候DOM Breakpoints中會如圖

當(dāng)要給DOM添加斷點的時候，會出現(xiàn)選擇項分別是如下三種修改1.子節(jié)點修改2.自身屬性修改3.自身節(jié)點被刪除。選中之后，Sources Panel 中右側(cè)的 DOM Breakpoints 列表中就會出現(xiàn)該 DOM 斷點。一旦執(zhí)行到要對該 DOM 做相應(yīng)修改時，代碼就會在那里停下來

Event listener Breakpoints:
最后Event Listener 列表，這里列出了各種可能的事件類型。勾選對應(yīng)的事件類型，當(dāng)觸發(fā)了該類型的事件的 JavaScript 代碼時就會自動中斷

 

參考：

http://www.rzrgm.cn/soyxiaobi/p/9598761.html

https://blog.csdn.net/wlyang666/article/details/81837428