浏览器控制台调试工具console
Posted 编程圈子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器控制台调试工具console相关的知识，希望对你有一定的参考价值。
浏览器控制台调试函数console技巧汇总
console是前端开发人员必备的调试工具，
在 mozilla 网站可以查到 https://developer.mozilla.org/en-US/docs/Web/API/Console_API 使用手册，并且可以看到主流浏览器对具体功能的支持情况。本文对部分重点内容进行整理。
一、基本功能
- console.info 提示信息
- console.debug 调试信息
- console.trace 打印函数堆栈
- console.warn 打印告警信息
- console.error 打印错误报警
- console.exception 打印报警信息
二、断言与统计
1. 断言
console.assert(expression, object[, object...])
示例：
console.assert(1 == 1, object); // 无输出，返回 undefined
console.assert(1 == 2, object); // 输出 object
2. 行数计算
console.count([label])
本行执行次数，可选参数 label 表示在输出的次数前加个前缀：
复制代码
(function() {
for (var i = 0; i < 5; i++) {
console.count('count');
}
})();
// count: 1
// count: 2
// count: 3
// count: 4
// count: 5
3. 重置计数
console.countReset();
3. 打印对象，以列表形式输出对象属性
console.dir(object)
示例：
var person = {
name: 'classicemi',
age: 22,
sex: 'male'
};
console.dir(obj);
三、js性能统计
1. 性能分析，打印执行性能情况
console.profile([profileLabel])
2. 输出代码的执行时间
console.time(name)
计时器，可以将成对的console.time()和console.timeEnd()之间代码的运行时间输出到控制台上，name参数可作为标签名。
console.time('计时器');
for (var i = 0; i < 1000; i++) {
for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器');
3. 显示内存信息
console.memory 用于显示此刻使用的内存信息（这是一个属性而不是方法）
4. 标记运行时的timeline
console.timeStamp()
用于标记运行时的timeline信息。
三、格式输出
1. 清空控制台
console.clear() ;
根当于快捷键ctrl+L。
2. 输出嵌套
console.group();
console.log('这是第一层');
console.group();
console.log('这是第二层');
console.log('依然第二层');
console.group();
console.log('第三层了');
console.groupEnd();
console.log('回到第二层');
console.groupEnd();
console.log('回到第一层');
3. 嵌套,默认折叠
console.groupCollapsed();
和console.group()相似的方法是console.groupCollapsed()作用相同，不同点是嵌套的输出内容是折叠状态，在有大段内容输出的时候使用这个方法可以使输出版面不至于太长。。。吧
4. 以表格样式输出
console.table()
5. ES6 模板输出
ES6模板的使用反单引号``,支持变量(使用${ params } 格式), 支持换行, 支持占位符,
let person = {name: "孔甲乙", sex:"男", age: 22}
console.log(`
Person info:
name: ${person.name}
sex: ${person.sex}
age: %d
`, age)
四、占位符
1. 字符、数值格式化
在 console.log(),console.warn(),console.error(),console.exception()和console.info()，都可以使用占位符。
支持的占位符有四种，分别是：
- 字符(%s)
- 整数(%d 或 %i)
- 浮点数(%f)
- 对象(%o)
console.log('%s是%d年%d月%d日', '今天', 2014, 4, 15);
console.log('圆周率是%f', 3.14159);
var obj = {
name: 'classicemi'
}
console.log('%o', obj);
2. CSS样式
console.log('%c测试使用css.', 'color: #fff; background: #f40; font-size: 24px;', '其它内容');
如果使用background-url还可以显示图片。
五、控制台功能
1. 在控制台输出在Elements面板选中的页面元素
$0
可以在控制台输出在Elements面板选中的页面元素。
2. 上一次在控制台键入的命令
$_
和键盘“上”功能一样。
3. 用xPath的语法来获取页面上的元素
$x
以上是关于浏览器控制台调试工具console的主要内容，如果未能解决你的问题，请参考以下文章