vscode调试vite/webpack项目

调试vite项目

vite.confg.ts

如果断点位置不对，需要进行这一步配置，否则无需配置该项

defineConfig({
    build: {
      sourcemap: true
    }
})

.vscode/tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "dev",
      "problemMatcher": [],
      "label": "npm: dev",
      "detail": "vite",
      // 后台运行
      "isBackground": true
    }
  ]
}

.vscode/launch.json

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "dev",
      "url": "http://localhost:5173/",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      // npm: dev与tasks.json中的label值对应
      "preLaunchTask": "npm: dev"
      // "sourceMaps": true,
      // "runtimeExecutable": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe"
    }
  ]
}

启动调试

此时会单独打开一个浏览器，只有在该浏览器中操作，才会触发调试，关闭该浏览器，就会结束调试

调试webpack项目

blog.csdn.net/weixin_4478…