分享一些 Chrome 浏览器的前端调试技巧

前言

相信大部分前端同窗都是用Chrome浏览器进行开发，这篇博客要分享的基本上是除了咱们经常使用console.log以外的，Chrome开发者工具控制面板提供的调试方法~

首先在地址栏敲入：about:blank 建立一个空白页，再打开控制台~

开始操做演示~（多图预警！~~

关于console

关于console对象，其实提供了很丰富的API，可自查文档~

关于Console控制面板

如下示例方法只存在于Chrome控制台Console面板~在JavaScripts中写是没有的哦!

$家族

$_

返回上一个被执行过的值~

虽然说很相似于命令行里的!!，可是$_并不会再执行一次表达式，以下图可证：

若是以前的值没有保存在变量里，能够经过这个方法临时访问~（为何说临时，由于当你执行完下一个表达式后，$_已经更新了哈）

$0 - $4

$0、$一、$二、$三、$4五个指令至关于在Elements面板最近选择过的五个引用。 好比我在Elements面板上随意点击了掘金网站上的五个DOM节点。从时间线上，$4是我第一个点击的。而$0是我第五个，也便是最后一个点击的。利用此方法能够快速在Console面板调试你选中的节点！

补充一下，还有点相似正则匹配~以下所示

function replacer(match, $1, $2, $3, $4, $5) {
  return [$1, $2, $3, $4, $5].join(' - ');
}
const str = 'abc12345#$*%[hello]{world}'
    .replace(/([^\d]*)(\d*)([^\w]*)(\[.*\])(\{.*\})/, replacer);

console.log(str); // abc - 12345 - #$*% - [hello] - {world}
复制代码

$

相似于document.querySelector()。不过比较少为人知的应该是它的第二个参数。指定从哪一个节点开始选择。有时候想减小范围时，尤为管用！

P.S. 函数签名$(selector, [startNode])。

$$

相似于document.querySelectorAll()，可参考同上。

P.S. 函数签名$$(selector, [startNode])

$x

根据XPath表达式去查找节点。以下图示例：

查找掘金站内全部含有href属性的a节点，而后遍历过滤含有http或https的节点~ 固然好像目前来讲，大部分状况直接用$、$$能够覆盖，说不定特殊状况下$x会颇有用。有须要的同窗能够了解学习一下~ XPath表达式规则可参考：www.w3schools.com/xml/xpath_s…

P.S. 函数签名$x(selector, [startNode])

API工具方法

如下方法一样只存在于Chrome控制台Console面板里，同窗们请注意哦~

keys/values

见名知意。功能相似于Object.keys，Object.values

monitor/unmonitor

用来观察函数调用的工具方法。在函数调用的时候，能够同步输出函数名以及参数。

当再也不须要观察该函数时，调用unmonitor取消便可。

可是匿名函数不会生效，由于获取不到名字.

monitorEvents/unmonitorEvents

能够观察对像的事件~

也能够同时观察对象的多个事件~

一样，使用unmonitorEvents取消观察。结合以上的$家族一块儿使用更便利哦

P.S. 函数签名：monitorEvents(object[, events])

copy

快速拷贝一个对象为字符串表示方式到剪切板~

getEventListeners

获取注册到一个对象上的全部事件监听器~

其实还有内置的inspect、debug/undebug等方法，你们能够自行搜索，都颇有用~这里就不一一介绍了~

关于断点调试

断点调试十分重要，以往咱们可能直接在代码里添加debugger，而后刷新浏览器调试。实际上除了这种方法外还有不少种断点。

DOM breakpoint

在Elements面板，右键点击节点唤出菜单，添加对应的DOM断点，能够监测指定节点的子树修改、属性修改、以及节点的移除。

Source breakpoint

有时候无需在源码中添加debugger。直接在Source面板添加断点便可调试。见下图行号上的小蓝色箭头！

Conditional breakpoint

条件断点。只有符合条件时，才会触发断点。见下图行号上的小橙色箭头！

除此以外，还有blackbox、XHR(fetch) breakpoint等各类Chrome提供的工具，建议同窗们多去了解一下，说不定关键时候能够发挥很大的做用~

小技巧

若是找不到对应的指令，能够在控制台使用快捷键Ctrl + Shift + P。MacOS的话就是Command + Shift + P（这个和编辑器是同样的道理）。快速搜索你想要的控制面板工具~

小结

其实长久以来，我也一直只会用console.log和简单的debugger来调试Web应用，有时候遇到复杂的问题时，匮乏的调试方法种类难以快速定位问题，从而下降工做效率。所以针对此类状况，学习如何更好的调试相信是会对工做有极大的帮助！

最后，欢迎同窗们补充或指正这些调试工具方法~

固然，对你们若有帮助，不甚荣幸~