Chrome development tools學習筆記(5)

調試JavaScript

隨着現在JavaScript應用的愈來愈普遍，在面對前端工做的時候，開發人員需要強大的調試工具來高速有效地解決這個問題。咱們文章的主角，Chrome DevTools就提供了這麼個工具來幫助咱們下降調試JavaScript代碼的痛苦。

順便說下，不一樣版本號的Chrome瀏覽器的DevTools可能稍微有所不一樣，除了數字遞增的版本號號之外。Chrome瀏覽器包含Stable正式版、Beta測試版、Dev開發版、Canary金絲雀版以及鼻祖 Chromium版這幾個分支。博主所用的360極速瀏覽器以及市面上大部分雙核瀏覽器的極速核心。都是基於Chromium開發的。從穩定性方面，Stable>Beta>Dev>Canary>Chromium。而更新的速度則正好相反 Chromium>Canary>Dev>Beta>Stable。

假設你想要使用最新的DevTools，那麼我建議你可以使用Canary版，Canary版可以和現有的其它版本號Chrome瀏覽器互不干擾的共存。

Source面板

DevTools的Source面板使得你可以調試你的JavaScript代碼，它提供了一套可視化的V8調試器界面。

咱們打開DevTools切換到Source標籤就可以看到咱們的Source面版了。

和其它調試工具同樣，在Source面板上。咱們可以看到當前頁面上所有JavaScript腳本。

以及控制JavaScript執行的中止/繼續/步入/步過button，以及可以使代碼在發生異常時暫停的button。本文的餘下部分。將具體介紹這些功能的使用。

執行控制button組在Source面板的右上方，經過它們可以單步調試咱們的代碼。這些button各自是:

繼續（F8）：就是咱們尋常俗稱的放行。當遇到斷點當前運行被暫停時，點擊此button，可以繼續運行程序直到再次遇到斷點暫停。

步過（F10）：通常咱們說的單步就是指這個。一行一行的運行當前的代碼。和「步入」有點不一樣的是，當運行到某個方法的時候。「步過」會直接返回方法的運行結果，斷點會運行到當前代碼段的下一行。「步入」則會進入方法內部的代碼。

通常咱們調試的時候，先經過步過，查看方法的輸出，假設輸出有誤，則步入到方法內部調試。

var a;
a = doSomeThing();
console.info(a);

如上面這段代碼，在第一行運行「步過」和「步入」。效果是同樣的。在第二行，「步過」會直接跳過doSomeThing這種方法的內部，使斷點運行到第三行。此時查看變量a的值，假設a返回和預期同樣。則繼續調試。假設a和預期有誤差，則在第二行「步入」到doSomeThing方法的內部。繼續經過「步過」和「步入」來進行調試。

步入（F11）：在通常的代碼上。和「步過」效果是同樣的。在方法運行的代碼行上。「步入」會進入到方法定義的內部。

步出（Shift+F11）：當不當心按了步入或者咱們需要跳出當前方法的時候。「步出」就可以直接讓斷點回到調用的父方法處。（在知道這個曾經。博主都是一步步單步走出去的）

切換斷點狀態：可以高速的切換斷點的啓用/停用狀態。

當咱們臨時不需要斷點但願代碼直接運行的時候。就可以經過這個button來實現。停用斷點並不會刪除已經打上的斷點。當需要繼續使用斷點時候。再次點擊就能夠啓用斷點。

括號裏是這些單步調試button的快捷鍵，經過快捷鍵。可以更方便的進行調試。

經過斷點進行調試

斷點可以在某個特定的地方。將程序臨時中止。進入斷點不會終止程序的運行。咱們可以隨時繼續運行。

經過DevTools的斷點，咱們可以對JavaScript，DOM更新，網絡鏈接進行調試。

在Source面板，打開不論什麼一個JavaScript文件。

點擊代碼前面的行號，這行帶面前面會有個藍色標記，這樣就打上了一個斷點。

咱們可以設置多個斷點，點擊其它代碼的行號就能夠。

在Source面板的右邊，「Breakpoints」側邊欄裏面會顯示所有已經打上的斷點。

經過「Breakpoints」側邊欄中列出的斷點前面的checkbox，咱們可以啓用/停用斷點。停用的斷點前面的藍色標誌會淡一些。

點擊「Breakpoints」側邊欄中列出的斷點，可以高速定位到打斷點的哪一行代碼~

點擊已打上斷點的藍色標誌，就能夠移除斷點。

右鍵點擊斷點藍色標誌。會顯示斷點相關的菜單：Continue to here、Remove breakpoint、Edit breakpoint...、Disable breakpoint。

在斷點的右鍵菜單中選擇「Edit breakpoint...」可以將斷點設置成條件斷點。咱們也可以在沒有斷點的行號上右鍵點擊。選擇「Add Conditional Breakpoint」來設置條件斷點。在條件斷點的輸入框中，可以輸入不論什麼返回爲true或者false的表達式。

僅僅有當表達式爲true的時候。斷點纔會起做用暫停當前程序執行。當咱們的斷點打在循環或者經常觸發的事件的時候，經過條件斷點，可以避免程序沒必要要的暫停執行（不用狂按F8又怕不當心錯過斷點了）。

博主帶過幾批實習生，看實習生調試程序經常會在代碼中插入alert或者console輸出變量內容，一不當心提交代碼或者公佈的時候，就把這些調試用的語句也帶上去了。事實上經過條件斷點可以作到無需改動代碼文件來彈窗或者命令行輸出，僅僅要把alert或者console寫到條件變量的條件中就可以了~

當斷點被觸發時，頁面JavaScript腳本運行將會被暫停，頁面會被灰色遮罩覆蓋。除非咱們點擊Continue或者鍵盤F8來繼續運行程序。

右邊的「Call Stack」中會顯示出當前的調用棧，點擊調用棧的不一樣部分。可以高速定位到該部分代碼，咱們可以比較方便的向上跟蹤到錯誤發生的部分代碼。

假設想要查看異步的JavaScript調用。好比定時器和XHR事件，可以勾選「Async」checkbox。

關於「Async」官方文檔彷佛沒有細緻講，博主找了段測試的代碼，圖中的refreshResList方法是由一個click事件調用的，refreshResList方法發起了一個ajax請求從server上取得一些數據顯示到頁面上。假設沒有勾選「Async」，僅僅能看到ajax請求回來的調用棧，沒法看到從click事件調用refreshResList再運行ajax請求這個過程。

（假設一開始沒有勾選「Async」，進入斷點之後才勾選是沒有效果的。需要再次進入斷點，才幹看到效果）

像上圖的調用棧中出現了很是多jQuery的代碼。在調試中，可能不但願進入到jQuery的代碼中（畢竟需要調試的通常都是咱們本身寫的代碼），而是僅僅獲取返回的結果，咱們可以在左邊的文件列表中右鍵咱們想增長黑盒的JavaScript文件。或者在中間的編輯區右鍵。從菜單中選擇「BlackBox Script」就能夠將選中的文件增長到黑盒中。

把JavaScript文件增長到黑盒中有什麼效果呢？

• 黑盒JavaScript中所有的斷點都不會觸發，包含了普通的斷點，「Pause on exceptions」致使的暫停。以及事件斷點等等。
• 步入、步過將會跳過黑盒的JavaScript代碼。

  $("#test").empty()這種代碼，通常來講咱們更關注它的結果，除非咱們想知道jQuery內部的運行原理纔會跟蹤進入其內部吧。

• 調用棧中不會顯示黑盒JavaScript中的調用過程。

咱們可以在DevTools的設置面板中查看和管理黑盒JavaScript文件。還可以使用通配符來匹配黑盒JavaScript文件。

合理的使用黑盒JavaScript功能，可以讓咱們的調試更專一於咱們本身寫的代碼。

點擊Source面板右上角的圖標。或者在Source面板按下「ESC」鍵，會在底部打開一個命令行區域，咱們可以在當中輸入JavaScript代碼進行各類試驗。輸入的JavaScript代碼的做用域和當前調試器暫停的區域一致。也就是說，當觸發斷點的時候。咱們在命令行中敲入的JavaScript代碼運行起來，和在代碼文件裏增長這些JavaScript代碼的效果是同樣的。又一個可以替代在代碼中插入alert進行調試的好方法~

在使用IDE或者編輯器寫代碼的時候，咱們經常用到全局搜索來幫助咱們對代碼進行定位，好比依據方法名找到定義部分。在Source面板中，在底部的命令行工具的邊上有個「Search」的標籤頁。經過它就可以實現對當前頁面上所有JavaScript文件進行全局搜索。事實上就是在左邊文件瀏覽區列出的所有文件裏搜索指定字符串，並且支持正則表達式查詢。比Ctrl+F要好用的多。

調試代碼的目的之中的一個就是找到代碼發生異常的地方，DevTools提供了「Pause on Exceptions」，即在發生異常的時候暫停代碼的運行。開啓異常斷點的方法是點擊右上方的圖標。當圖標變爲，此時即開啓了異常斷點。當開啓異常斷點時候，可以經過勾選「Pause On Caught Exceptions」來選擇僅僅捕捉未被catch語句捕獲的異常，仍是捕捉所有的異常。

要注意的是，在不一樣瀏覽器可能「Pause On Caught Exceptions」開啓的方式不同。在博主的360極速瀏覽器，是以checkbox的形式選擇的。在有的瀏覽器上。多是經過再次點擊圖標來開啓。

DOM斷點

Source面板的右側DOM Breakpoints會顯示當前打上的DOM斷點。會在DOM發生變化的時候觸發。咱們可以在此處查看已有的DOM斷點。關於3種DOM斷點在DevTools筆記2中已經講的很是具體了，想了解的朋友們可以移步Chrome development tools學習筆記(2) 進行查看。

XHR斷點

在DOM斷點的下方，「XHR Breakpoints」咱們可以在此處對XHR請求設置斷點用來監視頁面發起的ajax請求。在DevTools筆記4中，講了經過NetWork工具對網絡請求進行調試，這裏的XHR斷點，可以讓咱們從代碼的角度來進行調試。

打開「XHR Breakpoints」。默認又一個對於所有XHR請求進行暫停的斷點。咱們可以右鍵選擇「Add breakpoint」加入對於包括指定文字的URL的XHR請求的斷點（假設填入的內容爲空，則會匹配所有的XHR請求，和Any XHR效果同樣）。

事件斷點

事件(Event)是JavaScript應用跳動的心臟 ，也是把所有東西粘在一塊兒的膠水。當咱們與瀏覽器中 Web 頁面進行某些類型的交互時，事件就發生了。咱們調試JavaScript代碼，通常也是爲了解決這些事件處理代碼的問題。好比頁面上某個button點擊不起做用了，一般咱們會去HTML文件裏找到相應的元素，而後去JavaScript文件裏尋找相應的事件處理代碼，假設是大型的項目。這工做是比較花時間的。

DevTools提供了事件斷點，可以針對JavaScript的各類事件進行中斷。方便咱們進行調試。

事件斷點就在XHR斷點的下方。展開「Event Listener Breakpoints」就可以看到各類JavaScript事件。咱們勾選事件前面的checkbox。當對應事件發生時。就會觸發斷點。將運行中斷在該事件的處理代碼處，是否是很是cool~

即時編輯

在Source面板中，可以直接編輯打開的js文件。好比咱們可以插入一些alert或者console語句來輸出變量的值，直接在Source面板中改動，按下Ctrl+S就會起做用了。DevTools在咱們即時編輯JavaScript並保存後，會提醒咱們對應的改動，並不會影響到實際的文件，和以前講的Element工具同樣，一旦頁面刷新。改動就會被還原。

這又是一個不去改動代碼進行調試的好方法~

異常追蹤

敲代碼的時候經常碰到異常，好比在寫文件處理的時候。經常需要對找不到文件的狀況進行異常捕捉，對於JavaScript也是同樣的。

當JavaScript的運行和預期不符的時候，好比點擊某個button沒有發生想要的效果，那麼很是有多是在點擊事件中拋出了異常，咱們可以打開命令行，會看到一些異常信息，發生異常的文件以及行號。點擊右邊的文件名稱和行號可以高速在Source面板打開對應文件並跳轉到出錯代碼行。

在Source面板。咱們可以看到發生異常的代碼被標註出來了，光標移上去可以看到出錯的信息，這有助於咱們一眼看出那些比較愚蠢的代碼BUG。

代碼格式化

爲了下降JavaScript文件的大小以加快頁面加載速度，一般會對JavaScript文件作壓縮。壓縮主要作的是去掉代碼中多餘的空行和空格，以及把變量名簡化，有的還會對代碼進行等效替換以混淆加密JavaScript代碼。當咱們調試站點的時候，面對這些壓縮過的代碼，可能無從下手。

一般會想到去用一些代碼格式化工具帶讓壓縮後的代碼加上適當的縮進和換行來便於咱們理解。DevTools就提供了這麼一個代碼格式化工具。

點擊Source面板編輯區下方的兩個括號的button。就可以開啓DevTools的「Pretty Print」功能。JavaScript代碼會轉換成可讀性更好的樣子顯示出來。當咱們急需格式化JavaScript代碼時候，不用上網去找，咱們的瀏覽器就有。

調試Chrome Extensions

Chrome瀏覽器相對於其它瀏覽器的長處之中的一個就是提供了強大的插件功能。經過插件可以爲瀏覽器帶來很是多額外的功能，簡單來講，Chrome Extensions至關於在當前訪問的頁面上額外運行一些JavaScript代碼。

這些額外運行的代碼，同樣可以經過DevTools進行調試。在Source面板左邊的文件瀏覽器中切換到「Content scripts」標籤。就可以看到在Chrome Extensions在當前頁面上額外增長的JavaScript代碼。咱們可以像調試通常的JavaScript代碼那樣調試它們。（這裏爲了方便理解把Chrome Extensions講的簡單了，實際的Chrome Extensions插件開發遠不是這種，望理解。）

轉載自個人技術博客http://www.cc-lab.cn/chrome-dev-tools-5/

（完）