我喜歡條件斷點(diǎn)。真的!它們是我最喜歡的調(diào)試工具。

當(dāng)我開始從事web開發(fā)時(shí)，“調(diào)試”對我來說意味著創(chuàng)建一個(gè)<pre id='log'></pre>，并在其內(nèi)容中添加字符串作為日志。但是一旦Firebug出現(xiàn)，然后瀏覽器開始使用自己的開發(fā)工具——它就像從滑板升級到私人飛機(jī)。斷點(diǎn)、監(jiān)視、調(diào)用堆棧、分析器、網(wǎng)絡(luò)活動(dòng)監(jiān)視器——它們都很有用，我不想失去它們中的任何一個(gè)。

但是條件斷點(diǎn)是我最喜歡的，而且它甚至不接近。下面是我如何使用它們:

只有在特定條件下才會(huì)破壞

最明顯的例子是到處都有文檔記錄的例子:創(chuàng)建一個(gè)斷點(diǎn)，只在特定表達(dá)式的計(jì)算結(jié)果為true時(shí)暫停執(zhí)行。

當(dāng)我試圖在經(jīng)常運(yùn)行的代碼段中跟蹤某些奇怪的行為，但只有在出現(xiàn)特定的數(shù)據(jù)組合時(shí)才會(huì)破壞該代碼段的行為時(shí)，以這種方式使用條件斷點(diǎn)是很好的。普通的斷點(diǎn)每次都暫停執(zhí)行，調(diào)試工作非常繁瑣，但是條件斷點(diǎn)只允許在有正確數(shù)據(jù)時(shí)暫停，這樣您就可以停下來四處查看。

但這是很普通的用法。老實(shí)說，這可能是我使用它們最不常見的方式。條件斷點(diǎn)就是一把手術(shù)刀。它們是猴子修補(bǔ)匠的夢想。

將變量導(dǎo)出到全局作用域

您是否曾經(jīng)遇到過這樣的情況:您想要控制臺訪問在函數(shù)中局部定義的變量，但從函數(shù)外部的執(zhí)行上下文?這一直發(fā)生在我身上;我想讓我的應(yīng)用程序加載并運(yùn)行，直到達(dá)到空閑狀態(tài)，然后能夠檢查，比如，鎖定在閉包中的某個(gè)對象的屬性或方法。條件斷點(diǎn)的拯救!

這里的主要技巧是使用低逗號運(yùn)算符，以確保該賦值不會(huì)評估為真，因?yàn)檫@會(huì)導(dǎo)致斷點(diǎn)暫停執(zhí)行。取而代之的是，斷點(diǎn)表達(dá)式求值，false并且應(yīng)用程序一直沿其運(yùn)行并一直運(yùn)行到空閑為止，然后您只需鍵入其名稱即可檢查控制臺中與您內(nèi)心內(nèi)容有關(guān)的值。

注意：我習(xí)慣于這樣做，window.varName而不僅僅是varName這樣做，所以我不會(huì)意外地修改相對于斷點(diǎn)位置存在于外部作用域中的變量。

Protip：在啟用了ES2015 +的瀏覽器中，使用簡寫屬性名稱快速導(dǎo)出一系列變量：window.dealyBob = {var1, var2, otherVar}, false

以這種方式使用逗號操作符是觸發(fā)條件斷點(diǎn)的關(guān)鍵。

在不編輯代碼的情況下添加日志

有條件斷點(diǎn)的最常見用例是日志記錄。我知道在專業(yè)開發(fā)人員中打趣console.log驅(qū)動(dòng)開發(fā)是很普遍的，但是能夠無需重新構(gòu)建甚至不重新加載就能夠檢測代碼，實(shí)時(shí)觀察一切，并獲得詳細(xì)的診斷輸出，這真是太棒了。

這樣做的奇妙之處在于，開發(fā)工具將保存斷點(diǎn)與相關(guān)文件的關(guān)聯(lián)（至少在Chrome中，這些天我通常最常在其中工作），因此下次我仍在使用它們在另一個(gè)會(huì)話中加載該應(yīng)用程序，而無需我真正保存對我的應(yīng)用程序代碼的任何更改！這給了我一種純粹面向?yàn)g覽器的運(yùn)行時(shí)面向方面的日志記錄系統(tǒng)。如何分離關(guān)注點(diǎn)？

修改資料

假設(shè)您有一個(gè)錯(cuò)誤，即復(fù)制要加載特定的數(shù)據(jù)組合，并且要恢復(fù)到該狀態(tài)，您首先要執(zhí)行許多繁瑣的步驟。不再！作為一個(gè)敏銳的讀者，我相信您之前已經(jīng)注意到，如果可以window在條件斷點(diǎn)表達(dá)式中修改屬性以創(chuàng)建新的全局變量，那么沒有什么可以阻止您修改其他內(nèi)容。

因此，繼續(xù)將一堆JSON粘貼到條件斷點(diǎn)中，并將其分配給所需的任何變量。繁榮！告別繁瑣的復(fù)制。

提示：逗號運(yùn)算符使您可以將兩個(gè)以上的語句鏈接在一起，因此，如果要進(jìn)行一整套分配，請繼續(xù)說：(var1 = x; var2 = y; var3 = z), console.log('overriding with', x, y, z), false

相關(guān)的Protip：不要忘記您可以從控制臺在任何全局對象上設(shè)置值。如果您有特別大的對象用作替代，或者如果您想更改條件斷點(diǎn)將使用的數(shù)據(jù)而不必修改實(shí)際斷點(diǎn)，則將您帶到控制臺并說window.bigOverrideObject = {pasteYourObjectHere}，然后在條件斷點(diǎn)表達(dá)式中，var1 = window.bigOverrideObject, false

注入和測試新代碼

您是有見識的讀者，您可能已經(jīng)意識到條件斷點(diǎn)表達(dá)式只是在放置它們的作用域和上下文中運(yùn)行的JavaScript代碼。如果您可以在條件斷點(diǎn)處進(jìn)行分配或?qū)懭肟刂婆_，為什么不使用它來測試新的應(yīng)用程序代碼？

在任意位置插入一個(gè)條件斷點(diǎn)，然后運(yùn)行所需的任何內(nèi)容！有一些限制-例如，您不能return從當(dāng)前函數(shù)直接在斷點(diǎn)表達(dá)式中進(jìn)行操作-但在大多數(shù)情況下，您可以執(zhí)行應(yīng)用所需的任何轉(zhuǎn)換或計(jì)算。

這就是猴子補(bǔ)丁方面的來龍去脈：您可以結(jié)合所有這些技術(shù)，并使用條件斷點(diǎn)來覆蓋整個(gè)函數(shù)，即使它們在閉包內(nèi)部也是如此。檢查：

提示：您的開發(fā)工具顯然不會(huì)修改已部署的應(yīng)用程序代碼，因此這是一種在不進(jìn)行整個(gè)構(gòu)建/部署周期的情況下嘗試在生產(chǎn)系統(tǒng)中進(jìn)行操作的好方法。小心不要以使它們最終破壞您的生產(chǎn)數(shù)據(jù)的方式進(jìn)行調(diào)整！

結(jié)論

我喜歡條件斷點(diǎn)。現(xiàn)在我希望你也這樣做！