特別宣告

本文是作者 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（Breakpoints 部件）)會完美列出它們。你可以點兩下滑鼠把所有的都移除，它們就像一堆忍者一樣消失！

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

今天的分享就到這裡~

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

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

其他系列

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

• 【譯】你不知道的 Chrome 除錯工具技巧 第一天：console 中的'$'
• 【譯】你不知道的 Chrome 除錯工具技巧 第二天：copying & saving
• 【譯】你不知道的 Chrome 除錯工具技巧 第三天：console methods
• 【譯】你不知道的 Chrome 除錯工具技巧 第四天：the Elements panel（元素面板）
• 【譯】你不知道的 Chrome 除錯工具技巧 第五天：console 的 log 中,讓人疑惑的案例
• 【譯】你不知道的 Chrome 除錯工具技巧 第六天：command 選單
• 【譯】你不知道的 Chrome 除錯工具技巧 第七天：非同步 consle 的趣味小竅門
• 【譯】你不知道的 Chrome 除錯工具技巧 第八天：Color picker（顏色選擇器）
• 【譯】你不知道的 Chrome 除錯工具技巧 第九天：給 console 計時
• 【譯】你不知道的 Chrome 除錯工具技巧 第十天：custom formatters（自定義格式轉換器）
• 【譯】你不知道的 Chrome 除錯工具技巧 第十一天：style editors continued（樣式編輯器後續）
• 【譯】你不知道的 Chrome 除錯工具技巧 第十二天：忍者日誌列印！(the ninja logs)

寫在最後

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

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