您的位置:首页 > 游戏 > 手游 > vscode 运行和调试

vscode 运行和调试

2024/10/5 22:31:42 来源:https://blog.csdn.net/qq_40278396/article/details/139330653  浏览:    关键词:vscode 运行和调试

vscode使用断点

1.安装并激活扩展

  • Debugger for Chrome (弃用 --> JavaScript Debugger)
  • Debugger for Firefox

2. 配置config文件

打开 config/index.js 并找到 devtool property。将其更新为:

如果你使用的是 Vue CLI 2,请设置并更新 config/index.js 内的 devtool property

devtool: 'source-map'

如果你使用的是 Vue CLI 3,请设置并更新 vue.config.js 内的 devtool property:

module.exports = {configureWebpack: {devtool: 'source-map'}
}

3. 配置launch.json文件

点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图,然后点击那个齿轮图标来配置一个 launch.json 的文件,选择 Chrome/Firefox:Launch 环境。然后将生成的 launch.json 的内容替换成为相应的配置:

0808 项目对应的端口

{"version": "0.2.0","configurations": [{"type": "chrome","request": "launch","name": "vuejs: chrome","url": "http://localhost:8080","webRoot": "${workspaceFolder}/src","breakOnLoad": true,"sourceMapPathOverrides": {"webpack:///src/*": "${webRoot}/*"}},{"type": "firefox","request": "launch","name": "vuejs: firefox","url": "http://localhost:8080","webRoot": "${workspaceFolder}/src","pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]}]
}

4.设置断点

在这里插入图片描述

5.F5运行调试

运行调试后,出现新的工具栏以及鼠标悬浮在断点数据上,可以看到当前的数据内容.
在这里插入图片描述

问题

1.如果断点显示以下错误,可能是 映射sourcemap路径 错误
在这里插入图片描述
2.设置允许任何文件中设置断点
vscode工具中 文件 -> 首选项 -> 设置 -> 功能 -> 调试
在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com