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

時間 2019-11-05

標籤不知道 chrome 調試工具技巧第十 custom formatters 自定義格式轉換器欄目 Chrome 简体版

原文原文鏈接

特別聲明

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

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

做者在Twitter上推薦咱們的中文翻譯啦~~文末附圖
vue

正文

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

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

在大多數的狀況下 DevTools 的 console 默認的對象的轉化的方式都頗有用，可是有時候你指望不同凡響。默認的方式老是很 "默認" - 因此咱們自定義本身輸出對象的方式。作這個事情的函數被稱爲 Custom Formatter 在咱們寫下一個以前，須要在 DevTools 的設置 (在 DevTools 的 ⋮ 下拉框找到設置，或者按下 F1 ) 中把對應的設置打開:react

因此，這樣的 formatter 應該長什麼樣？它是一個最多有三個方法的對象：git

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

讓咱們一塊兒來看一個基礎的自定義 formattergithub

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

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
複製代碼