如何在 Chrome 开发者工具中为 devtoolsFormatters 格式化程序的主体使用默认行为

Question

我已经尝试了很多东西，以此为基础：

(() => {
    function getLevelIndentation(level){
        return level * 20 + "px";
    }
    var multiKeyMapFormatter = {
        header: function(x) {
            if (!(x instanceof MultiKeyMap)){
                return null;
            }

            let textArray = [];
            x.forEach((r, u, t, mkm) => textArray.push("[" + t + ", " + u + "] => " + (r instanceof Object ? r.constructor.name : r)));
            const header = "MultiKeyMap - " + textArray.join("|").substr(0, 50);

            return ["div", {"style":'color: green'}, header]
        },
        hasBody: function(){
            return true;
        },
        body: function(obj, config){
            return undefined;   
        },
    };


    window.devtoolsFormatters = [multiKeyMapFormatter];

    console.log("defined window.devtoolsFormatters");

})();

例如

• 在 body 函数的返回值中用 null 替换 undefined
• 省略身体功能
• 重写默认行为（见下文）
• obj以各种排列返回
• 设置hasBody返回false

    // attempt at rewriting the default behavior
    // ref: https://www.mattzeunert.com/2016/02/19/custom-chrome-devtools-object-formatters.html
    body: function(obj, config){
        var level = config !== undefined ? config.level : 0;

        var elements = Object.keys(obj).map(function(key){
            var child;
            var childObj = obj[key];
            if (typeof childObj === "object"){
                child = ["object", {
                    object: childObj,
                    config: {
                        key: key,
                        level: level + 1
                    }
                }];
            } else {
                child = key + ": " + (childObj && childObj.toString ? childObj.toString() : childObj);

            }
            return ["div", {style: "margin-left: " + getLevelIndentation(level)}, child];
        })

        return ["div", {}].concat(elements);
    },

有没有办法告诉 Chrome 使用默认的身体行为？

Answer 1

好问题，我能想到的最接近的是：

• 删除格式化程序
• 调用“原始”console.log
• 重新添加格式化程序

喜欢：

function consoleLogDefault(...args) {
  const old = window.devtoolsFormatters;
  delete window.devtoolsFormatters;
  console.log(...args);
  window.devtoolsFormatters = old;
}

完整示例：

class Color {
  constructor(r, g, b) {
    this.r = r;
    this.g = g;
    this.b = b;
  }
}
function consoleLogDefault(...args) {
  const old = window.devtoolsFormatters;
  delete window.devtoolsFormatters;
  console.log(...args);
  window.devtoolsFormatters = old;
}
const FormatColor = {
  header(o) {
    if (!(o instanceof Color)) {
      return null;
    }
    const style = {
      style: `color: rgb(${o.r}, ${o.g}, ${o.b});`
    }
    return ["table", style,
      ["tr",
        ["td", "r"],
        ["td", "g"],
        ["td", "b"],
       ],
      ["tr",
        ["td", o.r],
        ["td", o.g],
        ["td", o.b],
      ]
    ];
  },
  hasBody() {
    return true;
  },
  body(o) {
    consoleLogDefault(...arguments);
    return ["ol", ["li", o.r], ["li", o.g], ["li", o.b]];
  }
};
window.devtoolsFormatters = [
  FormatColor
];
red = new Color(255,0,0);
green = new Color(0,255,0);
blue = new Color(0,0,255);
console.log(red);
console.log(green);
console.log(blue);

问题在于它不会在实际对象下出现“分组”，而只是作为控制台消息附加。:(

结果：

不完美，但总比没有好。