Vue程序的调试方法

1.写本文的背景

因为程序的调试非常重要，程可以用好的调试方法来发现和定位自己的问题。因此，我们可以纠正自己的程序错误，加强自己的程序，使问题越来越少，使程序越来越健康。假装这篇文章，实用的调试器方法将在未来迭代更新。

2.调试与测试

模式与实际测试类似，但对象不同。测试面向产品级和系统级；调试通常是程序中的一部分、一种方法、一个属性或一个对象。最后的效果也很相似。好的测试人员和测试解决方案可以在摇篮中解决产品系统的问题；一个好的调试方法也会让你深入了解程序的运行情况，便于发现和定位问题，让软件运行更加稳定。

3.Console调试法

3.1 添加console.log指令

向代码中添加console.log()方法。这里，该示例输出从数据库读取的最高和最低温度，如下所示：

3.2 调出温度界面如下

3.3 Google浏览器的Console窗口

在谷歌浏览器中按F12，调出如下控制台窗口。

3.4 console.error输出

将代码更改为错误，输出如下

3.5 浏览器输出

，浏览器的Console输出将变成红色，如下所示。

如果输出是JS对象或数组，需要通过json.stringify方法转换成JSON数组，然后输出，如下：console。日志(JSON。stringify(resolve))；

4.alert 调试法

4.1 alert方法代码

4.2 alert提示效果

注意：报警方法是阻塞的，单击“确定”后前端代码将继续运行

如下所示设置断点调试器

5 断点调试法

，运行完代码后，代码会自动跳转到断点并停止运行，如下所示

5.1 设置断点

年观察到的数据5.3.1观察

单击观察中的“”，然后单击输入查看相应数据的值。

控制台中的观察数据

F12选择浏览器Console窗口，输入要观察的变量名，点击回车查看其对应值。

5.4输入要执行的方法

设置断点并停止运行后，断点前的方法可以在控制台窗口中运行输出。

5.4.1编写调试方法输出()

5.4.2设置断点并运行程序

详见5.1和5.2

5.4.3运行程序执行方法

可以观察到以下结果。

摘要

以上是边肖介绍的Vue程序的调试方法，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！