vue项目源码调试方法 ,chrome调试控制台工作区使用,利用chrome控制台调试vue项目源码的方法 图解

我们在开发vue项目的时候,项目开始后的第一件事情应该就是准备调试工作了,Chrome调试控制台就给我们提供了这样的一个方便的调试工作区。方法为,在Chrome浏览器里面打开你要调试的页面,然后打开调试控制台,如下:

注意,上图中的 源代码来源-->网页里面显示的就是你当前浏览的网页的信息,其中的src目录就是对于的我们node项目中的src目录,但是这里的src目录中的源码并非真正的源码,而是就过了webpack处理过的, 我们如果要对我们项目中的真正的源码进行调试,则需要将我们的项目源码目录添加到这里, 如下:

选择之后会有一个提示,点击允许

在我们点击允许后,chrome就会自动帮我们却换到工作区标签,同时会以高亮的形式显示我们当前浏览的页面和我们的项目源码的对应关系,如下图

上图中的右下角有绿色标识的vue文件就是我们添加到工作区的当前浏览页面的真正的vue源码文件。

在这个时候我们再次却换到网页标签,就可以看到有2个vue文件,右下角带绿色标识的就是我们添加的项目中的真正的源码文件,而另外一个则是经过webpack处理后的源码文件。

点击右下角带绿色标记的文件,会自动跳转到工作区,到这里你就可以在你任意想要的地方下断点 调试你的vue程序了。

相关推荐
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
Yaml43 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
守城小轩3 小时前
Chromium127编译指南 Mac篇(五)- 编译Chromium
chrome·chrome devtools·指纹浏览器·浏览器开发
GIS程序媛—椰子3 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享4 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄5 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询