使用Chrome控制台快速定位和调试JavaScript代码
要使用Chrome控制台快速查找调试JavaScript运行代码，首先打开网页并按F12键或右键单击页面并选择“检查”来打开控制台。然后，在控制台中输入`console.log()`语句，将需要调试的变量或表达式作为参数传递给它。这将在控制台中显示变量的值，从而帮助您找到问题所在。此外，您还可以使用断点功能暂停代码执行，逐行查看代码的执行过程。在代码行号旁边点击鼠标左键即可设置断点。当代码执行到断点时，您可以查看变量的值、单步执行代码以及继续执行代码。这些功能使您能够更有效地调试JavaScript代码。
菜鸡源码觉得Chrome是目前最好用的浏览器，写的网页时可以利用Chrome轻松找到对应的js动作的。Chrome内核给我们提供了非常强大的开发人员工具，使用它，我们可以提升很高的效率，下面就跟我一起学习下Chrome控制台快速查找调试JavaScript运行代码吧！
以本站为例，点击用户中心修改用户的昵称，我们可以这样做。
开启Chrome控制台
Chrome控制台必须使用Chrome内核才有，目前市面上，除了IE之外几乎都有，按F12即可开启。
勾选JavaScript动作监听
选择Chrome控制台中sources资源选项卡，打开debugger窗口。选择event listener breakpoints下的Mouse下的click事件，如下图所示：
点击动作按钮
点击按钮后，会执行一步JavaScript，并且暂停，出现js调试效果。这个时候如果跳到jquery等第三方封装库中，我们可以使用blackbox script功能，将其加入黑箱子中，这样就不会暂停到第三方类库中。
如果第一步暂停效果不是你要的代码，你可以点击继续调试按钮，进入下一步js执行位置，在资源窗口可以看到对应的代码，如下图：
仅仅只需要点击几下鼠标，就能快速找到网页中执行的js代码所在文件及行号，是不是非常方便呢？
相关专题
