相信绝大部分的前端开发使用的是Chrome进行开发的,一方面Chrome浏览器确实做的好,更重要的是一方面是因为Chrome有一个非常强大的调试工具,用好这个调试工具可以提高编程效率,帮助我们快速定位问题。

<>1.console.table

console.table只接受一个数组或者对象, 可以接受一个额外的参数来描述表格的列数。它会把数据通过表

格的形式打印出来, 这样我们看数据的时候就能直观了很多:
var datas = [ { id: '0001', name: 'zhangsan', age: 20, }, { id: '0002', name:
'lisi', age: 40, }, { id: '0001', name: 'wangwu', age: 88, }, ];
(1)上面的数据对象,我们使用console.log(datas)打印,效果如下:

打印的是一个Object数组,如果要查看每个数组的元素,就必须一个个的展开,比较麻烦。

下面使用 console.table() 打印

瞬间变得非常清爽,同时console.table还支持打印对象属性,如下 Student对象,有name和score两个属性。
<script> class Student { constructor(name, score) { this.name = name; this.
score= score; } } var students = [new Student('zhangsan', 78), new Student(
'lisi', 89)]; console.table(students); </script>

<>2.console.dir

console.dir(object)
参数:

* object:被输出扎实的对象
该函数用于打印出对象的详细的属性、函数及表达式等信息。

console.log 可以输出DOM节点,如果想要看DOM节点下的属性,可以使用
console.dir,console.dir能递归打印对象的所有属性,如下如打印一个DOM节点
console.dir(window.document)

<>3.console.log()

语法:
console.log(obj1 [, obj2, ..., objN); console.log(msg [, subst1, ..., substN);
console.log 的功能就是向控制台输出一条信息。它可以传入多个参数,输出的行为取决于第一个参数是否是一个代替字符串。

如果第一个参数是 替换字符串,则 后面的参数就是为第一个参数服务的。
console.log('用户信息:用户名 %s,密码 %s ,年龄 %d , '张三', '123456', 30);
输出:

替换字符串所支持的参数如下:

占位符描述
%s字符串
%d 或 %i整数
%o对象
%f浮点数
%c样式代码
怎样打印带样式的提示语:使用 %c添加打印的样式。
console.log('%c 请不要在控制台输入一些不懂的命令!%s', 'font-size:18px;background:
#ddd;color:red', '>>>');
除了log, 还有其他几个 info, warn, error,用法和log相同,分别表示错误信息、警示信息和提示性信息。
console.info('info信息'); console.warn('warn信息'); console.error('error信息');

<>4.console.group

label: group分组的标识符

在控制台创建一个新的分组,随后输出到控制台上的内容都会自动添加一个缩进,表示该内容属于当前分组,知道调用 console.groupEnd()
之后,当前分组结束。

console.group 和 console.groupend 是成对出现的,就像我们使用的html标签一样。
console.group('打印用户信息开始~'); console.table(datas); console.group('打印用户信息结束~');

<>5. console.time

console.time 功能是用来跟踪某一个操作的耗时,console.time();和console.timeEnd()是配套出现的。

console.time() 会开始一个计时器,并执行到console.timeEnd()函数时,结束计时器,并将计时器的总时间输出到控制台上。
console.time(); var arr = new Array(10000); for (var i = 0; i < arr.length; i
++) { arr[i] = new Object(); } console.timeEnd();

<>6.console.assert

console.assert() 它第一个参数接受一个断言,第二个参数是一个message, 如果断言为
false,则将第一个错误写入控制台。如果是true,就当没有发生。
console.assert(assertion, message [, subst1, ..., substN]);
断言是0, NaN, undefined, false, null, 空字符串('')也会触发后面的Mesage。

<>7.console.profile

profile和profileEnd进行性能分析
console.profile("性能分析"); var arr = new Array(100000); for (var i = arr.length -
1; i >= 0; i--) { arr[i] = new Object(); } console.profileEnd("性能分析");
打开步骤:自定义及控制Google Chrome——More tools——JavaScript Profiler

<>8.console.count()

使用 console.count() 可以计算某段代码的执行次数。
<script> function array() { console.count(); } for (var i = 0; i < 10; i++) {
array(); } </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bqYgmW6u-1650874697896)(D:\study\项目\前端\chrome浏览器调试工具\浏览器的console打印函数.assets\image-20220425161334894.png)]

<>9. console.trace()

函数将在控制台打印出从 console.trace() 被调用的位置开始的堆栈信息。
<script> function doTask() { doSubTask(1000, 10000); } function doSubTask(
countX, countY) { for (var i = 0; i < countX; i++) { for (var j = 0; j < countY;
j++) {} } console.trace(); } doTask(); </script>

技术
©2019-2020 Toolsou All rights reserved,
程序员的520,送给女友的几行漂亮的代码(python版)基于stm32控制四轮小车电机驱动(一)linux查看磁盘空间命令实验四 自动化测试工具-软件测试axios拦截器封装与使用C语言——qsort函数opencv-python傅里叶变换以及逆变换在算法研究过程中如何进行算法创新nc的安装和简单操作C语言做一个简易的登陆验证(功能)界面