前端最最必须掌握的调试技巧是什么？当然是console.log！！其次，是断点调试。
chrome调试栏最常用的打断点姿势：
1. debugger
代码里写入debugger断点；
优点：项目运行时不需要自己定位位置；
缺点：不灵活；如果写太多了还会影响代码效率。
<script>
console.log('before')
debugger; // 代码执行到这里，“调试栏”开启状态下将自动进入断点状态
console.log('after')
</script>
2. 事件监听器
如果项目中绑定事件很多，容易误操作；比如：你点击了一个关闭按钮，结果跳转了......
调试栏“元素”下选中当前按钮的标签，右侧“事件监听器”就会列出它能触发的全部事件，以及事件的代码位置。这就能快速定位到“Bug事件”的来源。
3. DOM断点
当你发现一个奇怪的hover效果，想看下它的样式来源；你自信的勾选了“元素->样式->:hover”来模拟鼠标hover效果时，可能会发现没用。
因为他可能是用js实现的，如：
$('button').on('mouseenter',function() { $(this).attr('class', 'test-class')}).on('mouseleave',function() { $(this).removeAttr('class')})
如何找到代码来源呢？鼠标右键在按钮标签上，可以在菜单的“发生中断条件”下找到“DOM断点触发条件”：
DOM断点触发条件
1. 子树修改：当元素树结构发生变化时，如：子元素添加移除；
2. 属性修改：当元素属性有被修改动作时，如：class名称变化；
3. 移除节点：当元素有被删除的动作时；
选中“属性修改”，当你再次"hover"时会触发断点：
这时你可以在“源代码/来源->调用堆栈”中找到代码来源。
4. 全局搜索内容
我只知道自己定义的函数名，怎样断点调试它？“网络”下的搜索可以对加载的文件进行全局搜索；输入你的函数名，回车下就能找到（只希望名字不要太普通）。
5. XHR断点
只想看看某个ajax请求是哪里发的？你需要XHR请求。例如下面这个示例代码：
<body>
<button>click me</button>
<script>
// 这里绑定了按钮的点击事件
$('button').click(function(e) {
click(e)
})
const clickA = () => {
clickB()
}
// 点击按钮最终会在这里请求百度地址
const clickB = () => {
axios.get('https://www.baidu.com')
}
function click(e) {
clickA()
}
</script>
</body>
点击后的效果：
实际项目中如果想要找到这个位置，你可以在“源代码/来源“下的”XHR/提取断点”中创建拦截规则，对请求地址进行匹配：
点击按钮后就能触发断点，最终可以在“调用堆栈中”找到你要的一切。
结束
无需多余的插件，也不用高深的理论，这几种断点调试方法足以应对工作中99.99%的情况了；剩下的就只能交给万能的console.log大法了。
