原文出處： Cayley的編程之路

引言

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

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

下面總結一下一些常用調試方法，這些方法能讓開發的工作順利并且高效，這里小女子拿出來總結一下，與各位程序猿同仁分享一下 ~ （此處應有掌聲…… ^_^）

一. 先來認識一下這些按鈕

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

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之后，就可以看到返回的數據，這個小工具很利于我們的開發

完結

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