Open
Description
Chrome Custom Formatter 允许开发者自定义 JavaScript 对象在 Chrome DevTools Console 中的展示方式。
首先要开启Custom Formatter
- 按下 Ctrl + Shift + I(Windows/Linux)或 Cmd + Opt + I(Mac)以进入 Chrome Developer Tools
- 在 Developer Tools 中,按下 F1 键或点击右上角的齿轮图标,进入设置页面。
- 前往 Preferences → Console
- 勾选 "Enable custom formatters" 选项
- 重新加载网页
编写自定义格式化函数
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
Labels
No labels