npm 包 jsonconsole 使用教程

简介

jsonconsole 是一款用于前端调试的 npm 包，它可以将 JSON 数据可视化，方便开发者查看排错。它适用于任何 JavaScript 环境，包括 Node.js, 浏览器等。

安装

npm install jsonconsole

或者

yarn add jsonconsole

使用方法

直接调用

可以直接使用 jsonconsole.log()、jsonconsole.warn()、jsonconsole.error() 等方法获得可视化的 JSON 数据。

const json = {name: '张三', age: 18, hobby: ['游泳', '篮球']};
jsonconsole.log(json);
// 点击左侧三角形展开并查看 JSON 数据

配合控制台方法使用

jsonconsole 还支持与控制台方法结合使用，例如：

const json = {name: '张三', age: 18, hobby: ['游泳', '篮球']};
console.log('JSON 数据', jsonconsole.log(json));

这样 jsonconsole.log(json) 返回的结果会被输出到控制台。

设置选项

jsonconsole 支持设置一些选项来控制其行为。例如，可以设置是否折叠数组或对象成员、是否隐藏掉 undefined 属性等。

const options = {
  hideUndefined: true,
  collapsed: true,
};
const json = {name: '张三', age: 18, hobby: ['游泳', '篮球']};
jsonconsole.log(json, options);

示例代码

下面是一个使用示例：

const json = {name: '张三', age: 18, hobby: ['游泳', '篮球']};
const options = {
  hideUndefined: true,
  collapsed: true,
};
console.log('JSON 数据', jsonconsole.log(json, options));

总结

jsonconsole 是一款实用的前端调试工具，可以帮助开发者更方便地查看 JSON 数据。同时，其支持多种选项，可以更好地满足不同的调试需求。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c1181e8991b448d9b21