Skip to content

console custom formatters(自定义格式转换器) #98

Open
@dcharlie123

Description

@dcharlie123

Chrome Custom Formatter 允许开发者自定义 JavaScript 对象在 Chrome DevTools Console 中的展示方式。

首先要开启Custom Formatter

  1. 按下 Ctrl + Shift + I(Windows/Linux)或 Cmd + Opt + I(Mac)以进入 Chrome Developer Tools
  2. 在 Developer Tools 中,按下 F1 键或点击右上角的齿轮图标,进入设置页面。
  3. 前往 Preferences → Console
  4. 勾选 "Enable custom formatters" 选项
  5. 重新加载网页

编写自定义格式化函数

formatter包含三个方法:

  • header — 处理如何展示在 console 的日志中的主要部分。
  • hasbody — 如果你想显示一个用来展开对象的箭头,返回 true
  • body - 定义将会被显示在展开部分的内容中。
function formatVueObject(obj) {
   // 编写你的自定义格式化逻辑,使对象更易读
   // 例如,你可以提取关键信息或按照特定规则格式化输出
   return formattedObject;
 }
const formatter = {
   header: (obj) => {
     // 判断对象是否是 Vue 对象,是则应用自定义格式化
     if (obj.__v_isRef || obj.__v_isReactive || obj.__v_isReadonly) {
       return ['div', {}, formatVueObject(obj)];
     }
     // 返回 undefined 表示不应用自定义格式化
     return undefined;
   },
 };

 if(window.devtoolsFormatters instanceof Array){
     window.devtoolsFormatters.push(formatter);
 }else{
     window.devtoolsFormatters = [formatter];
 }

参考文章:

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions