vue如何进行断点调试 (vscode 配置)

801 阅读1分钟

在正文的第一句加入“我正在参加中秋创意投稿大赛,详情请看:中秋创意投稿大赛

image.png

1.打开 vue 官网 找到配置项

vuejs.org/v2/cookbook…

image.png

2.配置vue.config.vue

复制代码:

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

3.配置vscode

  • 选择相应的浏览器(也有火狐的)

image.png

image.png

复制代码:

{ "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } },
  • 修改为pwa 开头 不用下载vscode的插件 image.png

  • ps:注意要修改为本地项目的本地地址

image.png

  • 图形界面跟浏览器差不多 image.png

  • 点击绿色图标就可以运行 并且会在谷歌(配置中对应的那个)浏览器中打开新页面 image.png

  • 打开控制台 看到webpack 目录下是开发的原代码 不再是压缩后的代码了

image.png