JavaScript 如何调试

打开网页时，偶尔会遇到按钮点了没反应、图片加载不出来的情况，这背后很可能是 JavaScript 代码出了“小差错”。想要快速找出问题，不用复杂的工具，浏览器自带的开发者工具就能帮你轻松搞定。

先找对工具：打开浏览器的调试面板

不管你用 Chrome、Edge 还是 Safari，打开调试面板的方法都很简单：在要检查的网页上右键，点击“检查”；或者用键盘快捷键，Windows 按 F12，Mac 按 Command+Option+I。打开后，面板里的“Console（控制台）”是最常用的地方，相当于代码的“记事本”——如果 JavaScript 代码出错，这里会用红色字体标出错误原因和出错的代码位置，比如“变量没定义”“少了个括号”，新手也能一眼找到方向。

举个生活化的例子：你写了一段代码，想让网页上的“点我”按钮点击后弹出“你好”，但点了没反应。打开控制台一看，显示“btn is not defined”，意思就是你没给按钮起名字，代码找不到这个按钮，改一下就好。

断点调试：盯着代码一步步“走”

有时候光看错误提示不够，比如代码逻辑出了问题，比如想算“1+2+3”结果变成了6，可你不知道哪里算错了，这时候就需要“断点调试”。

在调试面板的“Sources（源代码）”标签里，找到你的 JavaScript 文件，点击代码行数左边的数字，会出现一个红色圆点，这就是“断点”——代码运行到这里会自动停下来。这时候你就能在面板里看到所有变量的当前值，比如算到第2行时，变量a是1，变量b是2，等走到第3行加完后，变量c应该是3，要是显示成5，就说明你写错了加法的位置。

还是用刚才的按钮例子：如果点按钮后，控制台没报错，但弹出的是“错误提示”，不是“你好”，这时候在代码里的弹出语句那行加个断点，点按钮后代码停在那里，一看变量值，发现你把“你好”写成了“你好”的拼音“nihao”，弹出的是这个拼音，自然不对，改回中文就好。

监听事件：看看代码有没有“接收到信号”

JavaScript 很多功能靠“事件驱动”，比如点按钮是“点击事件”，输入内容是“输入事件”。如果事件没触发，功能就会失效，这时候可以用调试面板的“Event Listeners（事件监听器）”功能，检查网页元素有没有绑定对事件。

比如你给按钮绑定了“点击事件”，但点了没反应，打开事件监听器，找到这个按钮，看看里面的事件是不是写的“click”，要是写成了“dblclick（双击）”，肯定要点两次才会触发，改回“click”就好。

新手调试的小技巧

刚开始调试时，别着急写复杂的代码，先从简单的功能试：比如先写一段弹出“测试”的代码，确认控制台能显示；再试按钮点击，一步步找问题。另外，别忽略控制台的“Console.log”方法——在代码里加一行“console.log(变量名)”，就能在控制台看到这个变量在运行时的值，相当于给代码装了个“小灯”，随时看状态。

只要掌握这几个方法，不用怕 JavaScript 出问题，日常小差错很快就能解决。