原文出處： Cayley的編程之路

引言

“工欲善其事，必先利其器”

沒錯(cuò)，這句話個(gè)人覺得說(shuō)的特別有道理，舉個(gè)例子來(lái)說(shuō)吧，厲害的化妝師都有一套非常專業(yè)的刷子，散粉刷負(fù)責(zé)定妝，眼影刷負(fù)責(zé)打眼影，各司其職，有了專業(yè)的工具才能干專業(yè)的事，這個(gè)靈感要來(lái)源于之前我想買化妝品時(shí)，店里的海報(bào)標(biāo)語(yǔ)，由此聯(lián)想到，如果你想在某個(gè)事情上做好，并且做的專業(yè)，那么你一定要把你的工具用好，這樣才能事半功倍，我見過(guò)很多師兄師姐，寫了很多代碼，能夠很快的完成工作，能夠處理很多復(fù)雜的業(yè)務(wù)邏輯，但是對(duì)于瀏覽器的調(diào)試掌握的并不全面和深入，說(shuō)說(shuō)本姑娘吧，我的編程調(diào)試起源于自學(xué)滴前端課程，因?yàn)閷W(xué)習(xí)的時(shí)候看的都是基礎(chǔ)的教學(xué)視頻，對(duì)于調(diào)試也只是掌握了alert和console, 請(qǐng)大家別笑話，認(rèn)真看完再說(shuō)話，試問(wèn)誰(shuí)當(dāng)初入門時(shí)候不是走的這條路呢，當(dāng)你不再限于做靜態(tài)頁(yè)面，古老而經(jīng)典的調(diào)試方式肯定不能幫你完成日常調(diào)試，日后我進(jìn)入到了大公司去實(shí)習(xí)，才真正開始接觸專業(yè)開發(fā)業(yè)務(wù)，開始跟著師兄和師傅一起上路，那時(shí)我才有了“js斷點(diǎn)調(diào)試“的意識(shí)，開始一步步調(diào)試我的js代碼~

下面總結(jié)一下一些常用調(diào)試方法，這些方法能讓開發(fā)的工作順利并且高效，這里小女子拿出來(lái)總結(jié)一下，與各位程序猿同仁分享一下 ~ （此處應(yīng)有掌聲…… ^_^）

一. 先來(lái)認(rèn)識(shí)一下這些按鈕

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

1.箭頭按鈕：用于在頁(yè)面選擇一個(gè)元素來(lái)審查和查看它的相關(guān)信息，當(dāng)我們?cè)贓lements這個(gè)按鈕頁(yè)面下點(diǎn)擊某個(gè)Dom元素時(shí)，箭頭按鈕會(huì)變成選擇狀態(tài)

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

可選擇的適配

3.Elements 功能標(biāo)簽頁(yè)：用來(lái)查看，修改頁(yè)面上的元素，包括DOM標(biāo)簽，以及css樣式的查看，修改，還有相關(guān)盒模型的圖形信息，下圖我們可以看到當(dāng)我鼠標(biāo)選擇id 為lg_tar的div元素時(shí)，右側(cè)的css樣式對(duì)應(yīng)的會(huì)展示出此id 的樣式信息，此時(shí)可以在右側(cè)進(jìn)行一個(gè)修改，修改即可在頁(yè)面上生效， 灰色的element.style樣式同樣可以進(jìn)行添加和書寫，唯一的區(qū)別是，在這里添加的樣式是添加到了該元素內(nèi)部，實(shí)現(xiàn)方式即：該div元素的style屬性，這個(gè)頁(yè)面的功能很強(qiáng)大，在我們做了相關(guān)的頁(yè)面后，修改樣式是一塊很重要的工作，細(xì)微的差距都需要調(diào)整，但是不可能說(shuō)做到每修改一點(diǎn)即編譯一遍代碼，再刷新瀏覽器查看效果，這樣很低效，一次性在瀏覽器中修改之后，再到代碼中進(jìn)行修改

對(duì)應(yīng)的樣式

盒模型信息

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

4.Console控制臺(tái)：用于打印和輸出相關(guān)的命令信息，其實(shí)console控制臺(tái)除了我們熟知的報(bào)錯(cuò)，打印console.log信息外，還有很多相關(guān)的功能，下面簡(jiǎn)單介紹幾個(gè)：

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

其他功能

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

console也有相關(guān)的API

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

Sources Panel 的左側(cè)分別是 Sources 和 Content scripts和Snippets

對(duì)應(yīng)的源代碼

格式化后的代碼

關(guān)于打斷點(diǎn)調(diào)試的內(nèi)容，下面介紹，先來(lái)說(shuō)一些，其他平時(shí)基本沒人用但是很有用的小點(diǎn)，比如當(dāng)我們想不起某個(gè)方法的具體使用時(shí)候，會(huì)打開控制臺(tái)隨意寫一些測(cè)試代碼，或者想測(cè)試一下剛剛寫的方法是否會(huì)出現(xiàn)期待的樣子，但是控制臺(tái)一打回車本想換行但是卻執(zhí)行剛寫的半截代碼，所以推薦使用Sources下面的左側(cè)的Sinppets代碼片段按鈕，這時(shí)候點(diǎn)擊創(chuàng)建一個(gè)新的片段文件，寫完測(cè)試代碼后把鼠標(biāo)放在新建文件上run，再結(jié)合控制臺(tái)查看相關(guān)信息（新建了一個(gè)名叫：app.js的片段代碼，在你的項(xiàng)目環(huán)境頁(yè)面內(nèi)，該片段可執(zhí)行項(xiàng)目?jī)?nèi)的方法）

自己書寫的片段

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

無(wú)結(jié)果

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

所有的資源

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

請(qǐng)求的相關(guān)信息

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

預(yù)覽請(qǐng)求的數(shù)據(jù)

7.Timeline標(biāo)簽頁(yè)可以顯示JS執(zhí)行時(shí)間、頁(yè)面元素渲染時(shí)間，不做過(guò)多介紹

8.Profiles標(biāo)簽頁(yè)可以查看CPU執(zhí)行時(shí)間與內(nèi)存占用，不做過(guò)多介紹

9.Resources標(biāo)簽頁(yè)會(huì)列出所有的資源，以及HTML5的Database和LocalStore等，你可以對(duì)存儲(chǔ)的內(nèi)容編輯和刪除 不做過(guò)多介紹

10.Security標(biāo)簽頁(yè) 可以告訴你這個(gè)網(wǎng)站的安全性，查看有效的證書等

11.Audits標(biāo)簽頁(yè) 可以幫你分析頁(yè)面性能，有助于優(yōu)化前端頁(yè)面，分析后得到的報(bào)告

分析結(jié)果

二.Sources資源頁(yè)面的斷點(diǎn)調(diào)試

1.如何調(diào)試：

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

2.斷點(diǎn)與 js代碼修改

看下面這張圖，我在一個(gè)名為toggleTab的方法下打了兩個(gè)斷點(diǎn)，當(dāng)開始執(zhí)行我們的點(diǎn)擊切換tab行為后，代碼會(huì)在執(zhí)行的斷點(diǎn)出停下來(lái)，并把相關(guān)的數(shù)據(jù)展示一部分，此時(shí)可以在已經(jīng)執(zhí)行過(guò)得代碼處，把鼠標(biāo)放上去，即可查看相關(guān)的具體數(shù)據(jù)信息，同時(shí)我們可以使用右側(cè)的功能鍵進(jìn)行調(diào)試，右側(cè)最上面一排分別是：暫停/繼續(xù)、單步執(zhí)行(F10快捷鍵)、單步跳入此執(zhí)行塊(F11快捷鍵)、單步跳出此執(zhí)行塊、禁用/啟用所有斷點(diǎn)。下面是各種具體的功能區(qū)

在代碼中打斷點(diǎn)

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

臨時(shí)修改

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

當(dāng)我們的代碼執(zhí)行到某個(gè)程序塊方法處，這個(gè)方法上可能你并沒有設(shè)置相關(guān)的斷點(diǎn)，此時(shí)你可以F11進(jìn)入此程序塊，但是往往我們的項(xiàng)目都是經(jīng)過(guò)很多源代碼封裝好的方法，有時(shí)候進(jìn)入后，會(huì)走很多底層的封裝方法，需要很多步驟才能真正進(jìn)入這個(gè)函數(shù)塊，此時(shí)將鼠標(biāo)放在此函數(shù)上，會(huì)出現(xiàn)相關(guān)提示，會(huì)告訴你在該文件的哪一行代碼處，點(diǎn)擊即可直接看到這個(gè)函數(shù)，然后臨時(shí)打上斷點(diǎn)，按F10或者點(diǎn)擊右上角的第二個(gè)按鈕即可直接進(jìn)入此函數(shù)的斷點(diǎn)處

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

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

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

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

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

XHR Breakpoints

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

DOM Breakpoints:

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

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

Event listener Breakpoints

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

三.Post man你值得擁有的網(wǎng)絡(luò)請(qǐng)求神器

在我們的開發(fā)過(guò)程中，后端的接口都是由發(fā)起AJAX請(qǐng)求而獲取到的相關(guān)數(shù)據(jù)，但是很多情況是我們的業(yè)務(wù)還沒有做到那塊時(shí)，后端的同學(xué)接口都已經(jīng)準(zhǔn)備好了，但是為了便于后期的工作，將接口請(qǐng)求的數(shù)據(jù)模擬訪問(wèn)，然后對(duì)接口聯(lián)調(diào)很重要，也很方便，因?yàn)槲覀儾豢赡馨衙總€(gè)請(qǐng)求代碼都寫到文件里編譯好了再去瀏覽器內(nèi)查看，這時(shí)候可以安裝一個(gè)post man網(wǎng)絡(luò)請(qǐng)求插件，在谷歌應(yīng)用商店下載，需要翻墻

該擴(kuò)展程序使用非常簡(jiǎn)單，功能同時(shí)也非常強(qiáng)大，輸入你的請(qǐng)求，選擇好請(qǐng)求的method，需要請(qǐng)求參數(shù)的挨個(gè)填好，send之后，就可以看到返回的數(shù)據(jù)，這個(gè)小工具很利于我們的開發(fā)

完結(jié)

寫到這里這篇總結(jié)就結(jié)束了，也許有很多寫的不到位的地方，也有一些專業(yè)用詞不嚴(yán)謹(jǐn)?shù)牡胤?，希望看到的讀者可以和我一起交流，我也非常樂意我的總結(jié)可以給 剛剛學(xué)會(huì)編程需要調(diào)試的同學(xué)受用，再此之前我一直在尋找一篇從頭到尾的調(diào)試教學(xué)文章，我一直沒有找到，要么是一點(diǎn)點(diǎn)的片段講解，要么是專講js斷點(diǎn)調(diào)試，所以索性后來(lái)就直接看了 Chrome Developer Tools 的英文官方文檔，并結(jié)合自己的一些小使用心得總結(jié)出此文，希望受到指點(diǎn)和修正 也希望可以幫助一些同學(xué)~