JavaScript如何调试

JavaScript如何调试

JavaScript如何调试？

如果是早期的前端开发人员，要调试JavaScript，那简直是一个恶梦啊，因为基本没有什么好的调试工具。最开始都是用alert弹出信息来一步步的来验证。

到后来，FireFox浏览器的出现，带上FireBug调试工具，才让JavaScript的调试变得简单起来了。

但随着FireFox的升级，FireBug不再升级了，取而代之的是FireFox自己的开发者工具。

下面我们一起来看下这个开发者工具是怎样用来调试JS的。

不知道什么时候升级了FireFox，发现FireBug不能调试JavaScript，如图，后来看到网上文档说FireBug不再升级支持新版本的FireFox，FireBug官方建议用FireFox自身的开发者工具。

FireFox的开发者工具在哪里？

其实安装新版的FireFox本身就带有了这个工具了，在你的网页上右键，可以看到‘Inspect Element'，中文的应该是 ‘检查元素’。

点击后就可以弹出这个工具了，弹出可看到其实和FireBug差不多。

点击到‘Debugger’栏，我们可以看到页面加载的JS文件，在这里文件里，我们可以添加断点去做调试。

如图，我们定位到页面的JS脚本，点击53行，就添加了一个断点，当我们点击按钮，触发点击事件，就可以在程序运行到这个方法的这行里进行了中断，中断后，我们就可以看到方法里一些变量的实时值。

点击如图这个按钮，可以进入到调用的方法体里，和其他高级语言的调试一样。

我们还可以直接在JS脚本里添加‘debugger;'标志，添加后，代码运行到这个标志的行里，就会中断。

除了加入断点进入代码中断来调试，我们还可以做简单的调试，输出一些帮助判断的信息。可以用 console.log(''); 方法来输出信息。这个信息只会在调试工具的控制台可以看到，不影响实际的页面，和页面结果。如图