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

dendoink發表於2018-12-16
Chrome除錯

特別宣告

本文是作者 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 儘管那個彈出框的描述是這樣說的）。

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

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

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

34.The ninja（忍者） console.log

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

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

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

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

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

今天的分享就到這裡~

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

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

其他系列

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

寫在最後

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

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

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

相關文章