admin管理员组

文章数量:1530069

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

1.概述

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

2.浏览器调试前端项目

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

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

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

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

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

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

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

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

本文标签: 断点浏览器代码vue