【譯】你不知道的 Chrome 除錯工具技巧第十天：custom formatters（自定義格式轉換器）

特別宣告

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

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

作者在Twitter上推薦我們的中文翻譯啦~~文末附圖

正文

在馬上就要迎來假期的這 24 天裡，我將會發布一系列短篇的文章，關於如何更加有意思的使用開發工具，昨天我們測量了時間，今天我們來聊聊...

28. `Custom Formatters` 自定義轉換器

在大多數的情況下 DevTools 的 console 預設的物件的轉化的方式都很有用，但是有時候你期望與眾不同。預設的方式總是很 "預設" - 所以我們自定義自己輸出物件的方式。做這個事情的函式被稱為 Custom Formatter 在我們寫下一個之前，需要在 DevTools 的設定 (在 DevTools 的 ⋮ 下拉框找到設定，或者按下 F1 ) 中把對應的設定開啟:

【譯】你不知道的 Chrome 除錯工具技巧第十天：custom formatters（自定義格式轉換器）

所以，這樣的 formatter 應該長什麼樣？它是一個最多有三個方法的物件：

header — 處理如何展示在 console 的日誌中的主要部分。
hasbody — 如果你想顯示一個用來展開物件的▶ 箭頭，返回 true
body - 定義將會被顯示在展開部分的內容中。

讓我們一起來看一個基礎的自定義 formatter

我移除了迴圈的結構的錯誤處理，讓它看起來更加簡潔

header 方法返回了一個 JsonML (譯者注： JsonML: JSON Markup Language JSON 標記語言)陣列，由這些組成：

標籤名
屬性物件
內容 (文字值或者其他元素)

(如果這個看起來很眼熟的話，那可能是因為你之前寫過一些 React 程式碼 :D)

在輸出的時候，這個簡單的 formatter 對於每層巢狀，直接以 7 個空格的縮排列印這個物件。所以現在我們的輸出看起來是這樣：

29.自定義格式化轉換器的應用實踐

現在有好幾種 custom formatter 供你使用，例如：你可以在這個 immutable-devtools 倉庫中找到對於 Immutable.js 結構的完美展示。但是同樣可以自己造一個。

一般來說，每當遇到一些（結構）不尋常的物件的時候，或者大量的日誌 (最好避免這樣的情況，但是有時候很有用) 並且想從中做區分的時候，你可以採用一個 custom formatter 來處理。

很實用的一個竅門: 直接將你不關心，不需要特別對待的物件過濾出來，這種情況，直接在 header 方法裡面 return null 。讓 DevTools 使用預設的轉換方式來處理這些值。

好了，撇開實用性，同樣可以在它上面找點樂子 - 這是一個關於 console 方法的蠢萌例子：它叫 console.clown() 並且它轉換要列印的物件，在物件前面加上一個 emoji 表情 ... 可能是為了更好的顯示效果吧，我猜 ?

原始碼在這裡為了方便大家嘗試，原始碼貼在下面：

window.devtoolsFormatters = [{
    header: function(obj){
      if (!obj.__clown) {
        return null;
      }
      delete obj.__clown;
      const style = `
        color: red;
        border: dotted 2px gray;
        border-radius: 4px;
        padding: 5px;
      `
      const content = `? ${JSON.stringify(obj, null, 2)}`;

      try {
        return ['div', {style}, content]
      } catch (err) { // for circular structures
        return null;  // use the default formatter
      }
    },
    hasBody: function(){
        return false;
    }
}]

console.clown = function (obj) {
  console.log({...obj, __clown: true});
}

console.log({message: 'hello!'});   // normal log
console.clown({message: 'hello!'}); // a silly log
複製程式碼

如你所見，我正使用 console.clown 方法來給列印的物件新增一個特殊的屬性，所以我可以將它區分出來並且在 formatter (轉換器) 中對它進行區別對待，但在大部分現實的案例中，可以這樣：比如檢查這個物件是不是某一個特殊類的例項等等。

Oh，clown 列印出來了什麼東西？在下面：

今天的分享就到這裡~

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

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

其他系列

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

寫在最後

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

【譯】你不知道的 Chrome 除錯工具技巧 第十天：custom formatters（自定義格式轉換器）

特別宣告

正文

28. Custom Formatters 自定義轉換器

29.自定義格式化轉換器的應用實踐

其他系列

寫在最後

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

相關文章

【譯】你不知道的 Chrome 除錯工具技巧第十天：custom formatters（自定義格式轉換器）

28. `Custom Formatters` 自定義轉換器