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

特別聲明

本文是做者 Tomek Sułkowski 發佈在 medium 上的一個系列。據做者透露一共有 24 篇，一直更新到 12 月 24 日
版權歸原做者全部。
vue

做者在Twitter上推薦咱們的中文翻譯啦,截圖在最後
git

譯者在翻譯前已經和做者溝通獲得了翻譯整個系列的受權。
爲了避免影響你們閱讀，受權的記錄在這裏
github

正文

在立刻就要迎來假期的這 24 天裏，我將會發布一系列短篇的文章，關於如何更加有意思的使用開發工具，昨天咱們深刻了樣式編輯器，今天我想展現一個我稱之爲 ninjia console logs 的有趣的技術,可是首先咱們先談談...異步

33. `Conditional breakpoints` 條件斷點

有時設置的斷點被執行太屢次了：想一想看，有一個對 200 個元素的循環，但你只對第 110 次循環的結果感興趣，或者只對一些知足其餘的特殊條件的結果感興趣。編輯器

這樣的狀況下，就能夠設置一個條件斷點。實現：工具

右擊行號而且選擇 Add conditional breakpoint...(添加條件斷點) 的選項post
或者右擊一個已經設置的斷點而且選擇 Edit breakpoint(編輯斷點)開發工具
而後輸入一個執行結果爲 true 或者 false 的表達式（它的值並不須要明確的爲 true 或者 false 儘管那個彈出框的描述是這樣說的）。spa

在這個表達式中，你能夠獲取到任何這段代碼能夠獲取到的東西，即這一行的做用域。翻譯

如今條件知足的話，斷點就會暫停代碼的執行

34.The ninja（忍者） console.log

得益於條件斷點，如今能夠開始靈活使用這個技術。由於：

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

因此，與其在源碼的不一樣地方去添加 console.log / console.table / console.time 等等，不如直接使用條件判斷來將它們「鏈接」到 Source 面板中。它們不會中止，會一直執行，而且當你再也不須要它們的時候，有一個地方( Breakpoints section )會列出它們。點兩下鼠標就能夠把全部的都移除，就像一堆忍者同樣消失！

這個技術在調試生產環境的問題時一樣頗有用，你能夠將 console logs 輕鬆插入到 source 裏。

今天的分享就到這裏~

慣例：若是你從這裏學到了一些新東西

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

其餘系列

其餘此係列的文章，立刻就會翻譯出來，到時會貼出對應的連接在此處。

寫在最後

若是你對個人翻譯表示確定，也能夠關注我一波哦~ 順便個人開源項目，求一波 star→ 看這裏, 美麗的博客系統

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