相信大部分前端同学都是用 Chrome 浏览器进行开发这篇博客要分享的基本上是除了我们常用 /xml/xpath_syntax.asp

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

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

当不再需要观察该函数时，调用 unmonitor 取消即可但是匿名函数不会生效，因为获取不箌名字.

也可以同时观察对象的多个事件~

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

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

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

其实还有内置的 inspect、debug/undebug 等方法大家可以自行搜索，都很有用~这里就不一一介绍了~

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

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

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

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

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

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

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

最后，欢迎同学们补充或指正这些调试工具方法~当然对大家如有帮助，不甚荣幸~