帮你扔掉鼠标的前端调试命令

00chrome.dev.tool.png

前端调试工具总是鼠标点来点去的？可以看看这些调试命令，瞬间可以省掉很多鼠标点击行为。

01，常用 console 的 API

(1)console.assert()

console.assert(a<400, "a should < 400");

(2)console.group() 和 console.groupEnd()

console.group();
...
console.log("AAAA");
console.log("BBBB");
...
console.groupEnd();

将日志信息输出到一个分组中，且分组是展开的，在调试问题是能够方便的将上下文的信息放到一个分组中。

01console.group.png

(3)console.groupCollapsed()

可以代替用来代替 console.group()，和 console.group() 一样是将将后续的日志输出到一个分组中，但是分组始终是被折叠起来的。console.group() 分组中的日志是展开的。

(4)console.time() 和 console.timeEnd()

用来统计中间代码的执行时间。

console.time();
console.log("AAAA");
console.timeEnd();

02console.time.png

(5)console.timeStamp()

标记在 TimeLinePannel 显示的执行时间。

(6)console.log();

console.log("a is ", a, "b is ", b);

(7)console.error()

console.error("Error is %s %s", "will", "print");

内容将以红色 highline 显示。

(8)console.warn()

console.warn();

内容将以黄色 highline 显示。

02, Debug 信息

(1) debugger

在代码中使用 debugger;，当执行到此句 Chrome Dev Tool 将进入 Debug 调试模式。

(2) inspect()

通过命令行语句跳转到相关的 Dom 元素的位置，效果等同于使用鼠标右键的 instpect 选项。

(3) monitorEvents() 和 unmonitorEvents()

用来监控事件，不侵入业务代码就可以定位所需的事件上下文信息。

monitorEvents(document.getElementById('btn_id'), 'click');

03monitorevents.png

也可以使用 monitorEvents() 监听对象的多个对象。

monitorEvents(document.getElementById('btn_id'), ['click, mouseup']);

使用 unmonitorEvent() 能够取消监控。

03，清空命令行的五种方式

(1) clear()
(2) console.clear()
(3) 鼠标右键 -> clear console
(4) Command + K
(5) 跳转到新的页面

04，Chrome Dev Tool 切换 Pannel

(1) Command + [ 向左选中上一个 Pannel
(2) Command + ] 向右选中下一个 Pannel