Blackbox 提高JavaScript調試效率
所有人前端開發人員都會遇到的問題，您的應用程序代碼中會出現錯誤。您開始調試，但是逐行執行代碼時，調試器有時會跳轉到不是您的焦點的源文件（例如第三方JS庫）。我相信你在回到自己的應用程序代碼之前，經歷了很多煩惱。
Blackboxing(黑箱)為您提供了便利，以便調試器可以繞過一個第三方JS庫。當您黑箱一個源文件時，調試時代碼,調試器將不會跳轉到該文件(黑箱中的文件)。
1. 當你黑箱子一個腳本,會發生什么
- 進入/退出/過渡繞過庫代碼
- 事件偵聽器斷點不會破壞庫代碼
- 調試器不會暫停在庫代碼中設置的任何斷點。
總之當黑箱一個腳本時,能讓你更加方便的專注調試當前腳本
2. 如何黑箱腳本
- 使用settings(設置) – 選中Blackboxing
- 當對應代碼文件的標注行數位置點擊Blackbox script
設置面板
打開DevTools設置,點擊右上
這將打開一個對話框，您可以在其中輸入要添加到黑名單的腳本的文件名。你可以通過幾種方法來做到這一點：
- 輸入文件的名稱，
- 使用正則表達式來定位：
包含特定名稱的文件/jquery.js$
某些類型的文件像 .min.js$
- 列表內容 列表內容或者輸入包含您想要的黑盒子的腳本的整個文件夾bower_components。
對應文件
查看文件時，您可以在編輯器中右鍵單擊行數的位置。從那里選擇Blackbox腳本。這將會將文件添加到“設置”面板中的列表中。
當您在“編輯器”面板上的“編輯器”中查看一個黑盒子的腳本時，您將看到一個黃色條，表示它已被黑框。點擊更多展開欄可以顯示更多關於它意味着什么的信息，以及如何禁用它。
3. 黑箱腳本前后對比
不黑箱jquery.js腳本
- 
當添加Even Listener Breakpoints的一個click
點擊頁面上的button1按鈕
在sources中定位到的斷點並不是button1的注冊click事件位置,而是定位到了jquery.js
黑箱jquery.js腳本
黑化jquery.js腳本,重復上面步驟,定位到的就是對應button1注冊click事件位置
原文地址 http://blog.csdn.net/qq_31619295/article/details/74782487