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

總結

以上是生活随笔為你收集整理的chrome DevTools之黑箱大法(Blackbox ) 黑箱化源代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。