chrome浏览器调试是程序员必备神器，当我们新入职一家公司，避免不了调试别人的代码，快速定位到问题代码是一个程序员必备的素质。下面我就总结一下我是如何一步步调试代码的。
首先按下F12打开调试面板，然后用鼠标定位前端页面按钮处对应的Elements元素，在Event Listens处找到click事件。
image.png
然后进入相应的js打上断点
image.png
按下右上角第三个按钮步入要执行的函数（对于右上角的七个按钮的具体功能，可以自行百度查找）
进入到执行的代码后，一步步执行，会进入执行函数，然后鼠标悬浮在要执行的函数上面，定位到要执行的函数，进入要执行的函数，打上临时断点
image.png
image.png
一步步执行，如果断点处已经执行，可以在右侧面板Call Stack处选中执行的函数，右键Restart frame重新执行，Call Stack记录了函数执行栈的顺序。这样一步步调试，终将问题定位。
我们也可以打开Network,选择上面的类型，一般调试ajax异步请求，选择XHR可以查看请求情况。
image.png
tips:平时在source面板有个New snippet，可以把平时要验证的逻辑代码写在这里进行验证，方便关闭浏览器之后下次再用。
image.png
还有copy，1...这些小命令函数在平时调试中也能方面你操作，调试之路慢慢，中泰和你一起加油
网友评论