有没有想过,在 Chrome 中用自己定义的格式来打印一个对象呢?

# 1. Custom Formatter

自定义输出对象的函数,被称为 Custom Formatter

请注意: 在我们开始之前,需要在 DevTools 设置 (在 DevTools 下拉框找到设置,或者按下 F1 ) 中把对应的选项打开:

我们要定义的 formatter 是一个包含三个方法的对象:

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

写完之后大概就是这样:

window.devtoolsFormatters = [{
    header: function(obj){
        return ['div',{},`${JSON.stringfy(obj, null, 7)}`]
    },
    hasBody: function(){
        return false;
    }
}]
1
2
3
4
5
6
7
8

敲黑板

例子里移除了循环结构的错误处理,让它看起来更加简洁

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

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

(如果看起来很眼熟的话,那可能是因为你之前写过一些 React 代码 : D)

在输出的时候,这个简单的 formatter 对于每一层嵌套,直接以 7 个空格的缩进打印这个对象。所以现在我们的输出看起来是这样:

# 2. 应用实践

现有好几种 custom formatter 可供选择,例如:你可以在这个 immutable-devtools 仓库中找到对于 Immutable.js 结构的完美展示。

工作中你遇到结构不寻常的对象时,或在大量的日志(最好避免这样的情况,但是有时候很有用)中去区分一些对象时,就可以采用 custom formatter 来处理。

小窍门:将你不关心的对象过滤出来,在 header 方法里面 return null 。让 DevTools 使用默认的格式化方式来处理这些值。

撇开实用性,我们还可以找点乐子:

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

就像你看到的一样,使用 console.clown 方法打印出来的对象被添加了一个特殊的属性,方便我们将它区分出来。

平时自己用的话,建议你还是设置一个判断,检查这个对象是不是某一个特殊类的实例等等。

clown 打印出来了什么东西呢?

微信扫码或搜索: 前端恶霸

在公众号对话框,发送

关注期间 无限制 浏览本站全部内容

内容包括 「Chrome 调试技巧」(持续更新),以及「React 学习指北」(即将上线)

为什么我需要关注?
加入读者交流群 扫描二维码回复 Chrome
Last Updated: 6/30/2020, 12:36:00 PM