JSON格式化展示

最新推荐文章于 2025-10-14 16:14:20 发布

原创最新推荐文章于 2025-10-14 16:14:20 发布 · 786 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js JSON 格式化 #Chrome 调试技巧

开发笔记专栏收录该内容

9 篇文章

订阅专栏

本文分享了JavaScript中处理JSON格式化的实用技巧，包括使用JSON.stringify进行格式化输出的方法。同时，深入介绍了Chrome开发者工具的高级使用技巧，如console的各种日志级别、格式化输出、DOM元素和对象的详细展示、数据表格输出以及函数调用计数和跟踪等。

知识整理（长期更新）：

JS中对JSON格式化：

JSON.stringify({'a':1,'c':2,aa:{'a':1,'c':2}}, null, "\t");

输出结果

"{
   "a": 1,
   "c": 2,
   "aa": {
       "a": 1,
       "c": 2
   }
}"

Chrome 调试技巧

console.log("打印字符串");//在控制台打印自定义字符串

console.error("我是个错误");//在控制台打印自定义错误信息

console.info("我是个信息");//在控制台打印自定义信息

console.warn("我是个警告");//在控制台打印自定义警告信息

console.debug("我是个调试");//在控制台打印自定义调试信息

cosole.clear();//清空控制台（这个下方截图中没有）

格式化输出

console.log("%s年",2016);//%s表示字符串

console.log("%d年%d月",2016,11);//%d表示整数

console.log("%f",3.1415926);//%f小数

console.log("%o",console);//%o表示对象

console.log("%c自定义样式","font-size:30px;color:#00f");

console.log("%c我是%c自定义样式","font-size:20px;color:green","font-size:10px;color:red");

DOM输出

var ul = document.getElementsByTagName("ul");

console.dirxml(ul); //树形输出table节点，即<table>和它的innerHTML，由于document.getElementsByTagName是动态的，所以这个得到的结果肯定是动态的

对象输出

var o = {
     name : "Lily",
     age : 18
};
console.dir(obj);//显示对象自有属性和方法

多个对象的集合

var stu = [{
		name:"Bob",
		age:13,
		hobby:"playing"
},	{
		name:"Lucy",
		age:14,
		hobby:"reading"
	},{
		name:"Jane",
		age:11,
		hobby:"shopping"
}];
console.log(stu);
console.table(stu);

成组输出

//建立一个参数组
console.group("start");
 
//引号里是组名，自己起
console.log("sub1");
console.log("sub1");
console.log("sub1");
console.groupEnd("end");

函数计数和跟踪

//输出前n个斐波那契数列值
  
if(n == 0) 
    return;
console.count("调用次数");//放在函数里，每当这句代码运行输出所在函数执行次数
console.trace();//显示函数调用轨迹(访问调用栈）
  
var a = arguments[1] || 1;  
var b = arguments[2] || 1;
console.log("fib=" + a);  
[a, b] = [b, a + b];
  fib(--n, a, b);
}
fib(6);