【译】你不知道的 Chrome 调试工具技巧 第十天：custom formatters（自定义格式转换器）...

特别声明

本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列。据作者透露一共有 24 篇，一直更新到 12 月 24 日
版权归原作者所有。

译者在翻译前已经和作者沟通得到了翻译整个系列的许可。
为了不影响大家阅读，许可的记录在这里

作者在Twitter上推荐我们的中文翻译啦~~文末附图

正文

在马上就要迎来假期的这 24 天里，我将会发布一系列短篇的文章，关于如何更加有意思的使用开发工具，昨天我们测量了时间 ，今天我们来聊聊...

28. Custom Formatters 自定义转换器

在大多数的情况下 DevTools 的 console 默认的对象的转化的方式都很有用，但是有时候你期望与众不同。默认的方式总是很 "默认" - 所以我们自定义自己输出对象的方式。做这个事情的函数被称为 Custom Formatter 在我们写下一个之前，需要在 DevTools 的设置 (在 DevTools 的 ⋮ 下拉框找到设置，或者按下 F1 ) 中把对应的设置打开:

所以，这样的 formatter 应该长什么样？ 它是一个最多有三个方法的对象：

• header — 处理如何展示在 console 的日志中的主要部分。
• hasbody — 如果你想显示一个用来展开对象的▶ 箭头，返回 true
• body - 定义将会被显示在展开部分的内容中。

让我们一起来看一个基础的 自定义 formatter

我移除了循环的结构的错误处理，让它看起来更加简洁

header 方法返回了一个 JsonML (译者注： JsonML: JSON Markup Language JSON 标记语言)数组，由这些组成：

1. 标签名
2. 属性对象
3. 内容 (文本值或者其他元素)

(如果这个看起来很眼熟的话，那可能是因为你之前写过一些 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

其他系列

其他此系列的文章，马上就会翻译出来，到时会贴出对应的链接在此处。

• 【译】你不知道的 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 调试工具技巧 第二十四天：最后一天，元旦牛逼

写在最后

如果你对我的翻译表示肯定，也可以关注我一波哦~ 顺便我的开源项目，求一波 star→ 看这里, 美丽的博客系统

作者在Twitter上推荐我们的中文翻译啦