【譯】你不知道的 Chrome 除錯工具技巧 第十二天:忍者日誌列印!(the ninja logs)...

weixin_34148340發表於2018-12-16

特別宣告

本文是作者 Tomek Sułkowski 釋出在 medium 上的一個系列。據作者透露一共有 24 篇,一直更新到 12 月 24 日
版權歸原作者所有。

作者在Twitter上推薦我們的中文翻譯啦,截圖在最後

譯者在翻譯前已經和作者溝通得到了翻譯整個系列的授權。
為了不影響大家閱讀,授權的記錄在這裡

正文

在馬上就要迎來假期的這 24 天裡,我將會發布一系列短篇的文章,關於如何更加有意思的使用開發工具,昨天我們深入了樣式編輯器,今天我想展示一個我稱之為 ninjia console logs 的有趣的技術,但是首先我們先談談...

33. Conditional breakpoints 條件斷點

有時設定的斷點被執行太多次了:想想看,有一個對 200 個元素的迴圈,但你只對第 110 次迴圈的結果感興趣,或者只對一些滿足其他的特殊條件的結果感興趣。

這樣的情況下,就可以設定一個條件斷點。實現:

  • 右擊行號並且選擇 Add conditional breakpoint...(新增條件斷點) 的選項

  • 或者右擊一個已經設定的斷點並且選擇 Edit breakpoint(編輯斷點)

  • 然後輸入一個執行結果為 true 或者 false 的表示式(它的值並不需要明確的為 true 或者 false 儘管那個彈出框的描述是這樣說的)。

在這個表示式中,你可以獲取到任何這段程式碼可以獲取到的東西,即這一行的作用域。

現在條件滿足的話,斷點就會暫停程式碼的執行

34.The ninja(忍者) console.log

得益於條件斷點,現在可以開始靈活使用這個技術。 因為:

  • 每一個條件都必須經過判斷 - 也就是 - 執行 - 每當應用執行到這一行。
  • 並且如果條件返回的是falsy的值(例如. undefined ),它並不會暫停..

所以,與其在原始碼的不同地方去新增 console.log / console.table / console.time 等等,不如直接使用條件判斷來將它們 “連線” 到 Source 皮膚中。它們不會停止,會一直執行,並且當你不再需要它們的時候,有一個地方( Breakpoints section )會列出它們。點兩下滑鼠就可以把所有的都移除,就像一堆忍者一樣消失!

這個技術在除錯生產環境的問題時同樣很有用,你可以將 console logs 輕鬆插入到 source 裡。

今天的分享就到這裡~

慣例: 如果你從這裡學到了一些新東西

→ 你可以點個贊再走嘛~
→ 關注我:Twitter:Tomek Sułkowski

其他系列

其他此係列的文章,馬上就會翻譯出來,到時會貼出對應的連結在此處。

寫在最後

如果你對我的翻譯表示肯定,也可以關注我一波哦~ 順便我的開源專案,求一波 star→ 看這裡, 美麗的部落格系統

作者在Twitter上推薦我們的中文翻譯啦

相關文章