Blackbox 提高JavaScript調(diào)試效率

---

所有人前端開(kāi)發(fā)人員都會(huì)遇到的問(wèn)題，您的應(yīng)用程序代碼中會(huì)出現(xiàn)錯(cuò)誤。您開(kāi)始調(diào)試，但是逐行執(zhí)行代碼時(shí)，調(diào)試器有時(shí)會(huì)跳轉(zhuǎn)到不是您的焦點(diǎn)的源文件（例如第三方JS庫(kù)）。我相信你在回到自己的應(yīng)用程序代碼之前，經(jīng)歷了很多煩惱。

Blackboxing(黑箱)為您提供了便利，以便調(diào)試器可以繞過(guò)一個(gè)第三方JS庫(kù)。當(dāng)您黑箱一個(gè)源文件時(shí)，調(diào)試時(shí)代碼,調(diào)試器將不會(huì)跳轉(zhuǎn)到該文件(黑箱中的文件)。

1. 當(dāng)你黑箱子一個(gè)腳本,會(huì)發(fā)生什么

• 進(jìn)入/退出/過(guò)渡繞過(guò)庫(kù)代碼
• 事件偵聽(tīng)器斷點(diǎn)不會(huì)破壞庫(kù)代碼
• 調(diào)試器不會(huì)暫停在庫(kù)代碼中設(shè)置的任何斷點(diǎn)。
  總之當(dāng)黑箱一個(gè)腳本時(shí),能讓你更加方便的專(zhuān)注調(diào)試當(dāng)前腳本

2. 如何黑箱腳本

• 使用settings(設(shè)置) – 選中Blackboxing
• 當(dāng)對(duì)應(yīng)代碼文件的標(biāo)注行數(shù)位置點(diǎn)擊Blackbox script

設(shè)置面板
打開(kāi)DevTools設(shè)置,點(diǎn)擊右上

這將打開(kāi)一個(gè)對(duì)話框，您可以在其中輸入要添加到黑名單的腳本的文件名。你可以通過(guò)幾種方法來(lái)做到這一點(diǎn)：

• 輸入文件的名稱(chēng)，
• 使用正則表達(dá)式來(lái)定位：

• 包含特定名稱(chēng)的文件/jquery.js$

• 某些類(lèi)型的文件像 .min.js$

• 列表內(nèi)容 列表內(nèi)容或者輸入包含您想要的黑盒子的腳本的整個(gè)文件夾bower_components。

對(duì)應(yīng)文件

查看文件時(shí)，您可以在編輯器中右鍵單擊行數(shù)的位置。從那里選擇Blackbox腳本。這將會(huì)將文件添加到“設(shè)置”面板中的列表中。

當(dāng)您在“編輯器”面板上的“編輯器”中查看一個(gè)黑盒子的腳本時(shí)，您將看到一個(gè)黃色條，表示它已被黑框。點(diǎn)擊更多展開(kāi)欄可以顯示更多關(guān)于它意味著什么的信息，以及如何禁用它。

3. 黑箱腳本前后對(duì)比

不黑箱jquery.js腳本
-

當(dāng)添加Even Listener Breakpoints的一個(gè)click

點(diǎn)擊頁(yè)面上的button1按鈕

在sources中定位到的斷點(diǎn)并不是button1的注冊(cè)click事件位置,而是定位到了jquery.js

黑箱jquery.js腳本

黑化jquery.js腳本,重復(fù)上面步驟,定位到的就是對(duì)應(yīng)button1注冊(cè)click事件位置

總結(jié)

以上是生活随笔為你收集整理的chrome DevTools之黑箱大法(Blackbox )的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。