【译】你不知道的 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
复制代码

如你所见，我正使用 console.clown 方法来给打印的对象添加一个特殊的属性，因此我能够将它区分出来而且在 formatter (转换器) 中对它进行区别对待，但在大部分现实的案例中，能够这样：好比检查这个对象是否是某一个特殊类的实例等等。

Oh，clown 打印出来了什么东西？在下面：

今天的分享就到这里~

惯例：若是你从这里学到了一些新东西

→ 你能够点个赞再走嘛~
→ 关注我：Twitter：Tomek Sułkowski

其余系列

其余此系列的文章，立刻就会翻译出来，到时会贴出对应的连接在此处。

写在最后

若是你对个人翻译表示确定，也能够关注我一波哦~ 顺便个人开源项目，求一波 star→ 看这里, 美丽的博客系统

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