Vue借助浏览器实现代码断点调试

Vue借助浏览器实现代码断点调试

1.概述

当我们在开发前端项目时，肯定会有断点调试的需求。但是前端开发工具似乎没有开发后端项目调试那么方便，因此我们可以借助浏览器实现调试前端项目，它的优势就是不用配置任何插件即可实现。不受开发工具的限制。

2.浏览器调试前端项目

使用浏览器调试前端项目步骤

• 打开浏览器开发人员调试工具
• 在前端项目需要调试的vue页面添加console.log()日志
• 在浏览器点击源代码 打上断点调试

1.打开浏览器开发人员调试工具

在浏览器上页面上右键，选择检查 打开开发人员调试工具， 并点击控制台。

2.在前端项目需要调试的vue页面添加console.log()日志

在开发工具中，需要调试的页面代码中添加console.log()语句
在浏览器点击项目，点击log所在的组件页面，触发log输出日志，在log输出日志的同时会显示它所在的前端页面位置。

点击log日志显示的页面位置，跳转到源代码工具栏，并在源代码显示前端开发代码。

3.在浏览器点击源代码 打上断点调试

在源代码中可以看到我们开发的源代码，此时在行号左边点击就可以添加断点。然后刷新网页，在浏览器上点击网页进入到该网页，就会停在断点位置。