1. 常用命令
console.log('hello') 打印文本
console.warn('warn') 打印文本 (带有警告标识)
console.error('error') 打印文本 (带有错误标识)
2. 占位符
2.1 整数 (%d 或 %i 或 %s)
console.log("%d 年 %d 月 %d 日",2018,8,29); //2018 年 8 月 29 日
2.2 浮点数 (%f)
console.log("圆周率是 %f",3.14); // 圆周率是 3.14
2.3 样式支持 (%c)
console.log('%chello\n\bhttp://baidu.com','color:red')
3. 分组
- console.group("第一组信息");
- console.log("第一组第一条");
- console.log("第一组第二条");
- console.groupEnd();
4. 显示节点代码
- 4.1 console.dirxml()
- console.dirxml($(".top").get(0)) // 输出的就是对应 html/xml
4.2 审查元素
审查元素 - 右键 - Copy - Copy outerHTML - ctrl + v 出来
(扩展下: 通过控制台可以获取很多重要的信息, 比如: 可以看到一个节点的 outerHTML,selector,Xpath,
当前装备的 CSS,box 预览, 全部应用样式及其所在资源位置,
及其可能的 :active :hover :focus :visited 各种状态,
绑定事件...
)
5. 断言 (就是通过比较得出结论: true/false)
5.1 直接与 true 比较
- 0==true //false
- 5.2 console.assert()
- console.assert(0==true)
6. 追踪函数的调用轨迹 (console.trace(); 放置于被追踪函数内部使用)
- function add(a, b) {
- console.log(0);
- console.trace();
- return a + b;
- }
- var x = add3(1, 1);
- function add3(a, b) {
- console.log(3);
- return add2(a, b);
- }
- function add2(a, b) {
- console.log(2);
- return add1(a, b);
- }
- function add1(a, b) {
- console.log(1);
- return add(a, b);
- }
- // 3 2 1 0 (函数声明提升并解析 - 变量声明 - 函数顺序执行 (add3 - add2 - add1 - add ))
7. 代码运行耗时统计
- console.time("耗时");
- var num=0;
- for(var i=0;i<=10000000;i++){
- num=num+i;
- }
- console.timeEnd("耗时");
来源: http://www.bubuko.com/infodetail-2747519.html