Chrome 调试工具技巧:自定义格式转换器

Custom Formatters 自定义转换器

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

所以,这样的 formatter 应该长什么样?它是一个最多有三个方法的对象:

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

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

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

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

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

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

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

自定义格式化转换器的应用实践

现在有好几种 custom formatter 供你使用,例如:你可以在这个 immutable-devtools 仓库中找到对于 Immutable.js 结构的完美展示。但是同样可以自己造一个。

一般来说,每当遇到一些(结构)不寻常的对象的时候,或者大量的日志 (最好避免这样的情况,但是有时候很有用) 并且想从中做区分的时候,你可以采用一个 custom formatter 来处理。

很实用的一个窍门:直接将你不关心,不需要特别对待的对象过滤出来,这种情况,直接在 header 方法里面 return null 。让 DevTools 使用默认的转换方式来处理这些值。

【第3007期】通过调试技术,理清了视频播放很快的原理

好了,撇开实用性,同样可以在它上面找点乐子 - 这是一个关于 console 方法的蠢萌例子:它叫 console.clown () 并且它转换要打印的对象,在对象前面加上一个 emoji 表情 ... 可能是为了更好的显示效果吧,我猜 😁

源码在这里为了方便大家尝试,源码贴在下面:

javascript 复制代码
 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 (转换器) 中对它进行区别对待,但在大部分现实的案例中,可以这样:比如检查这个对象是不是某一个特殊类的实例等等。

相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1118 小时前
css实现div被图片撑开
前端·css