chrome DevTools之黑箱大法(Blackbox ) 黑箱化源代碼

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