特別宣告
本文是作者 Tomek Sułkowski 釋出在 medium 上的一個系列。據作者透露一共有 24 篇，一直更新到 12 月 24 日
版權歸原作者所有。
作者在 Twitter 上推薦我們的中文翻譯啦,截圖在最後
譯者在翻譯前已經和作者溝通得到了翻譯整個系列的授權。
為了不影響大家閱讀，授權的記錄在這裡
正文
在馬上就要迎來假期的這 24 天裡，我將會發布一系列短篇的文章，關於如何更加有意思的使用開發工具，昨天我們談到了code coverage 以及 change 皮膚，然後今天...
今天是 DevTools advent calendar 的最後一天啦！時間過得真快！一起來嘗試幾個隨機的 tips 好嗎？
67. Use console.log in callback directly（直接在回撥中使用 console.log ）
我經常發現自己處於這樣一種情況，就是我不完全確定要將什麼傳遞給回撥函式。在這種情況下，我會在裡面新增一個 console.log 來檢查。
有兩種方式來實現：在回撥方法的內部使用 console.log 或者 直接使用 consolelog 來作為回撥方法。這不僅可以減少輸入，而且可能回撥接收多於1個引數，在第一個解決方案中你可能會錯過
68. Find in elements, logs, sources & network(elements, logs, sources & network 的查詢)
DevTools 中的前4個主要的皮膚，每一個都支援 [ctrl] + [f] 快捷方式，你可以使用相關的查詢方式查詢資訊:
-
在
Elements皮膚中 - 通過string,選擇器 或者XPath來查詢 -
而在
Console,Network以及Source皮膚 - 通過區分大小寫，或者可以被視為表示式的strings, 來查詢
69.Use live expressions 使用實時表示式
2個月前，DevTools 在 Console 皮膚中引入了一個非常漂亮的附加功能，這是一個名為 Live expression 的工具
只需按下 "眼睛" 符號，你就可以在那裡定義任何 JavaScript 表示式。 它會不斷更新，所以表達的結果將永遠，存在 :-)
你可以同時定義幾個：
70.保持最新
如果我用一句話來總結所有的24 days of tips的話，讀起來像是這樣：
“DevTools是一款功能強大的軟體，很容易被低估。 它有許多隱藏的功能，我們甚至常常懷疑是否需要那些”
好吧，那是兩句話，無論如何，想想這個套件中有多少可能會令人無所適從的工具（不知道該如何用）。 並不斷追尋最新新增的！
70.1. Google Chrome Developers
我高度推薦你訂閱 Google Chrome Developers 的 YouTube 頻道，這是在Chrome 中展示已有的新內容的地方。 不僅如此，你還可以去那裡尋找有關最佳實踐，JavaScript演變等的討論。為任何前端開發人員提供許多有價值的內容。
Google Chrome Developers - YouTube
70.2. Developers.google.com
當我在撰寫這篇文章系列時，我確實積累了最喜歡的功能和技術，但除此之外，我還在瀏覽官方Google Developers 網站，該網站支援你（“按年”）或 技術（“按標籤”）檢視有關特定更新的資訊，就像這個，關於最近釋出的Chrome 71：
70.3. This isn’t over 這並不是結束
最後，即使 “Advent Calendar” 已經結束，但我還沒有用盡積累的 tips ！ 到目前為止。
我絕對不會每天都發布它，但是這些 tips 無法停止 - 我對這種讓我們的工作更輕鬆，更有趣的可能性感到非常興奮:-)
我將繼續在 Medium ，我的 Twitter 帳戶上釋出這些內容，很快也會在 YouTube 上釋出（是的，gif有點被限制?）
所以，如果你使用的是JavaScript / TypeScript / CSS / React / Angular / Chrome - 讓我們保持聯絡！ 來這裡 → 關注我：Twitter：Tomek Sułkowski 並且最後：
祝各位聖誕節牛逼，元旦牛逼!!!
寫在最後
時間真快，這個系列就已經完結了，經歷了24篇的翻譯，也還是保持了最開始的態度，提升自己的同時，也可以為其他的朋友們帶來一些價值，在這個過程中得到了很多人的鼓勵和幫助。謝謝~
另外：我已經和作者在溝通小冊的事情，我盡力爭取說服 Tomek 讓這個系列成為一本免費的小冊，這樣可以更方便大家閱讀。
接下來也會持續輸出優質的內容，無論是譯文還是原創系列
此致，敬禮，大家元旦牛逼~
其他系列
其他此係列的文章，馬上就會翻譯出來，到時會貼出對應的連結在此處。
- 【譯】你不知道的 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)
- 【譯】你不知道的 Chrome 除錯工具技巧 第十三天：物件 & 方法
- 【譯】你不知道的 Chrome 除錯工具技巧 第十四天：其他快捷鍵~
- 【譯】你不知道的 Chrome 除錯工具技巧 第十五天：Twitter day~
- 【譯】你不知道的 Chrome 除錯工具技巧 第十六天：斷點
- 【譯】你不知道的 Chrome 除錯工具技巧 第十七天：再會 console
- 【譯】你不知道的 Chrome 除錯工具技巧 第十八天：Drawer 裡的祕密
- 【譯】你不知道的 Chrome 除錯工具技巧 第十九天：深入 Drawer
- 【譯】你不知道的 Chrome 除錯工具技巧 第二十天：Workspace的黑魔法
- 【譯】你不知道的 Chrome 除錯工具技巧 第二十一天：Snippets(程式碼塊)
- 【譯】你不知道的 Chrome 除錯工具技巧 第二十二天：network
- 【譯】你不知道的 Chrome 除錯工具技巧 第二十三天：Drawer tips 後續
- 【譯】你不知道的 Chrome 除錯工具技巧 第二十四天：最後一天，元旦牛逼