请教 vue3 调试

› Vue.js

This topic created in 1004 days ago, the information mentioned may be changed or developed.

（ 1 ）创建项目： npm create vite@latest vue3_vite_js -- --template vue

（ 2 ）修改 vite.config.js

export default defineConfig({
  build: {
    sourcemap: false,
    minify: false
  },
  ......
})

（ 3 ）新增 launch.json

{
	"version": "0.2.0",
	"configurations": [
		{
			"type": "chrome",
			"request": "launch",
			"name": "Launch Chrome against localhost",
			"url": "http://localhost:5173",
			"sourceMaps": true,
			"webRoot": "${workspaceFolder}"
		}
	]
}

（ 4 ） npm run dev 然后下个断点，：

（ 5 ）启动 launch.json 的调试，结果断点断到了 localhost:5173\src\main.js 而不是源文件：

是哪个步骤出问题了，希望大佬不吝赐教（项目文件在： https://github.com/wjx0912/frontend_debug/tree/main/vue3_vite_js ）

9 replies

vue666

Aug 25, 2023

你要调试代码, 只需要拉这个仓库 https://github.com/vuejs/core, 跑 dev, package/vue/example 就可以调试了, 改源码也会实时更新

datadump

Aug 25, 2023

@vue666 感谢回复。但是这是集成到 vue 源码里面的，我是想调试一个单独的项目。另外想知道上面的步骤到底是哪里出问题了。。。

wish8023

Aug 25, 2023

推荐直接在 playground 里面调试，方便直观。

datadump

Aug 25, 2023

@wish8023 感谢回复。这只是 demo 。实际工程比较大没法传到 playground

wednesdayco

Aug 25, 2023

前端项目谁在 vscode 里调试啊，一般都是在浏览器里吧- -

AuYuHui

Aug 25, 2023

你要调试 vue? 还是调试项目？

datadump

Aug 25, 2023

调试项目。用 vscode 要方便一点吧。另外也不想到处加 debugger ，加了还得删，git 提交也很麻烦

Belmode

Aug 25, 2023

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

datadump

Aug 25, 2023

@Belmode 大哥。你这个是 webpack 的。我项目里面用的 vite