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

代碼難免會有Bug，每次我們在Chrome調試代碼時，總是會進入各種各樣的庫代碼（比如jQuery、Zepto），但實際上很多時候我們並不希望這樣，要是能把這些庫代碼“拉黑”多好啊。

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

屏蔽文件后會怎么樣

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

怎樣屏蔽文件

有兩個途徑可以屏蔽JS文件：

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

在設置面板可以配置屏蔽文件列表。

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

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

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

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

在Sources面板目錄里，或者編輯器里，右鍵點擊“Blackbox Script”，可以將屏蔽該文件，同時也會增加到Setting面板中的匹配規則里。

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

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

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