【譯】你不知道的Chrome除錯工具技巧 第七天：非同步console的趣味小竅門

dendoink發表於2018-12-11
Chrome除錯非同步

特別宣告

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

前兩篇的翻譯連結我已經給到了作者本人，雖然他不理解中文，但是他還是很開心哈哈,截圖在最後

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

正文

在馬上就要迎來假期的這 24 天裡，我將會發布一系列短篇的文章，關於如何更加有意思的使用開發工具，昨天我們瞭解了 Command Menu 我們今天從 21 開始，說的是：

21. Console 是非同步的

如今，越來越多與瀏覽器有關的API都是 基於Promise的 。當你使用 promise 的時候你通常使用 .then(處理方法) 或者 將它 ( promise ) 包裹在 async 方法中，並且使用 await 來接收它的結果。

我們在 JavaScript/TypeScript 中大量使用這些東西，但是在 Console 中書寫這樣的結構，一點都不方便。

就是像下面這樣

【譯】你不知道的Chrome除錯工具技巧 第七天：非同步console的趣味小竅門

或者這樣

【譯】你不知道的Chrome除錯工具技巧 第七天：非同步console的趣味小竅門

額，太可怕了！ 我曾經在寫這段程式碼時失敗了兩次，漏寫了一個括號，或者是在我完成輸入之前就意外的（觸發）執行了這段程式碼。

但如果 console 預設就被 async 包裹呢？

你猜怎麼著，真是這樣！你可以直接使用 awit ：

【譯】你不知道的Chrome除錯工具技巧 第七天：非同步console的趣味小竅門

事實上在 Console 中使用 promise 比在原始碼中使用要簡單得多！

22.用你的非同步console 來看一些更酷的東西

我和你一樣，都覺得 fetch 的例子相當無聊， -- 這兒有一些新玩法：通過你的 console 來獲取到更多有意思的資訊:

  • Storage 系統的 佔用數 和 空閒數
await navigator.storage.estimate()
複製程式碼

【譯】你不知道的Chrome除錯工具技巧 第七天：非同步console的趣味小竅門

  • 你的裝置的電池資訊

為了效果更好，把這條 tip 和前幾天中提到的 console.table 合併使用：

敲黑板（劃重點）：這是一條 不推薦使用的API ,儘管看起來這麼酷炫...

【譯】你不知道的Chrome除錯工具技巧 第七天：非同步console的趣味小竅門

  • 媒體能力

【譯】你不知道的Chrome除錯工具技巧 第七天：非同步console的趣味小竅門

  • Cache storage keys

(譯者注：Cache storage keys 一般用來對 request 和 response 進行快取)

【譯】你不知道的Chrome除錯工具技巧 第七天：非同步console的趣味小竅門

更多的例子不勝列舉。能夠在 console 中輕鬆的獲取 promise 包裹的值絕對是相當方便的。

今天的分享就到這裡~

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

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

其他系列

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

寫在最後

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

關於這次翻譯，作者的回覆

【譯】你不知道的Chrome除錯工具技巧 第七天：非同步console的趣味小竅門

相關文章