調試時屏蔽JavaScript庫代碼 –Chrome DevTools Blackbox功能介紹

代碼不免會有Bug，每次咱們在Chrome調試代碼時，老是會進入各類各樣的庫代碼（好比jQuery、Zepto），但實際上不少時候咱們並不但願這樣，要是能把這些庫代碼「拉黑」多好啊。

廣大碼農喜聞樂見的事情，隔壁家火狐已經實現了的功能，並且也有人給Chromium提了Issue-407024。天然Chrome最終也提供了這個功能–Blackbox。Blackbox容許屏蔽指定的JS文件，這樣調試的時候就會繞過它們了。

屏蔽文件後會怎麼樣

• 庫代碼（被屏蔽的文件）裏拋出異常時不會暫停（當設置爲Pause on exceptions時）
• 調試時Stepping into/out/over都會忽略庫代碼
• 事件斷點也會忽略庫代碼
• 庫代碼裏設置的任何斷點也不會起做用
  最終的結果就是隻會調試應用代碼而忽略第三方代碼（配置了Blackbox的代碼）。

怎樣屏蔽文件

有兩個途徑能夠屏蔽JS文件：

一、開發人員工具的Settings面板

在設置面板能夠配置屏蔽文件列表。

打開開發人員工具的配置面板，在Sources下點擊Manage framework blackboxing，打開新窗口後，有以下集中方式配置：

• 輸入文件名稱
• 用正則表達式匹配
  • 包含特定名稱的文件，好比/backbone\.js$
  • 特定類型的文件，好比\.min\.js$
• 輸入整個文件夾，好比bower_components

另外，須要暫時不屏蔽某個規則時，能夠將Behavior改成Disable。或者也能夠直接刪除（光標移到某行規則後會有個X）。
Blackbox content scripts是指屏蔽Chrome插件注入頁面的腳本（新版Chrome增長的功能，筆者用的39）。

二、在Sources面板上右鍵某個文件

在Sources面板目錄裏，或者編輯器裏，右鍵點擊「Blackbox Script」，能夠將屏蔽該文件，同時也會增長到Setting面板中的匹配規則裏。

屏蔽某個文件後，會在編輯器裏看到黃色的提示信息，點開More，有功能說明，直接點擊「Unblackbox this script」，也能方便的取消屏蔽（這樣會在匹配規則裏直接刪除，而不是Disable掉）

注意：若是項目對JS文件作了MD5重命名的話，建議在Setting面板用正則設置匹配規則。

調試時，在調用堆棧時能夠看到已經屏蔽的文件數量，默認是隱藏具體文件信息的，固然也能夠點擊Show展開顯示完整。