如何使用 SourceMaps（使用 Vue CLI 和 Webpack）使用 VS Code 和 Chrome 调试 VueJS 3 Typescript 项目？

Question

Tl;dr
The VS Code debugger always says Unbound breakpoint but setting break points in chrome dev tools works and opens the respected file in VS Code automatically (after that the VS Code debugger for that file works). Also source (map) files in chrome have weird names like HelloWorld.vue?4a7c.

我使用 vue create my_project 使用 Typescript 创建了一个新的 VueJS 3 项目。我选择了 Typescript、Babel 和 Vue 版本 3。

我正在尝试启动 VS Code 调试器并运行以我以前处理其他项目（如 Java）的方式调试我的项目。因此，我从 VS Code 食谱方面复制了最佳实践。（由于没有 VueJS Typescript 调试方法，我使用了 VueJS 和 Typescript 的调试方法并尝试混合使用它们）

实际问题是，当我在 VS Code 中设置断点时，它显示 Unbound breakpoint。我的假设是 VS Code 无法将任何源映射文件映射到我的源文件，这表明 webpack 以某种方式弄乱了文件命名或我的文件映射配置错误。

到目前为止我的工作是，当我使用 chrome 开发人员工具检查项目时，我看到了例如main.ts 我可以在其中设置断点，一旦遇到断点，文件就会在 VS Code 中打开，并且调试器（至少对于这个特定文件）会按预期工作。当谈到 .vue 文件时，事情就有点混乱了。在 chrome 中，.vue 文件是 obfuscated/compiled，但有些文件以以下方式命名 [file-name].vue?[4-digit-hex-value]（例如 HelloWorld.vue?4a7c），其中包含实际源代码和设置断点有效，文件将自动在 VS Code 中打开。

如果有人可以提供适用于他们的设置的配置，那将对我有很大帮助。

到目前为止我有以下配置文件：

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "pathMapping": {
              "/_karma_webpack_": "${workspaceFolder}"
            },
            "sourceMapPathOverrides": {
                "webpack:/*": "${webRoot}/*",
                "/./*": "${webRoot}/*",
                "/src/*": "${webRoot}/*",
                "/*": "*",
                "/./~/*": "${webRoot}/node_modules/*"
            },
            "preLaunchTask": "serve"
        }
    ]
}

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "serve",
            "type": "npm",
            "script": "serve",
            "isBackground": true,
            "problemMatcher": [{
                "base": "$tsc-watch",
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "Starting development server",
                    "endsPattern": "Compiled successfully"
                }
            }],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

(npm serve 只是执行在 package.json 中定义的脚本 "serve": "vue-cli-service serve")

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

vue.config.js

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devtool: 'source-map',
  }
})

Answer 1

我现在采用的解决方案如下：

（我不知道幕后发生了什么，但不知何故它起作用了——真的不知道生成了哪些源映射）

我只是使用官方 VS Code 附加 Chrome 调试设置并添加了一个预启动任务，用于启动在开发模式下为应用程序提供服务的开发人员服务器。这就是使用功能齐全的 VS Code 调试器和 VueJS 3 Typescript 应用程序（实际上还安装了 Tailwind）所需的全部内容。

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "My VueJS Chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "serve",
            // "userDataDir": "${env:HOME}/.vscode/vscode-chrome-debug-userdatadir" 
            // This config is to always use the same configuration for the chrome app (system wide) 
            // therefore you can install the prefered extensions once and they will stay!
            // Taken from here: 
        }
    ]
}

tasks.json（这是官方的 VueJS VS Code 预启动任务配方）

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "serve",
            "type": "npm",
            "script": "serve",
            "isBackground": true,
            "problemMatcher": [{
                "base": "$tsc-watch",
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "Starting development server",
                    "endsPattern": "Compiled successfully"
                }
            }],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

只需将这两个文件放入项目根目录的 .vscode 目录即可！

OFF-TOPIC（安装tailwindcss）：

Used the official setup guide from here - just adjusted to work with the vue cli create instead of vite.

1.安装 tailwindcss、postcss 和 autoprefixer - 同时生成 tailwindcss 配置文件

使用 npm：

npm install -D tailwindcss postcss autoprefixer

用纱线：

yarn add tailwindcss postcss autoprefixer

现在生成配置文件：

npx tailwindcss init -p

2。将以下两行添加到 tailwind.config.js 文件：
重要的行是：

    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",

因此文件应该如下所示：

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3。创建一个 ./src/index.css 文件并为每个 Tailwind 层添加 @tailwind 指令。

@tailwind base;
@tailwind components;
@tailwind utilities;

4.在您的 ./src/main.js 文件中导入 newly-created ./src/index.css 文件。

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

注意 import './index.css'

就是这样。只需开始使用 npm run serve 或 yarn serve 或此答案顶部描述的设置即可。

如何使用 SourceMaps（使用 Vue CLI 和 Webpack）使用 VS Code 和 Chrome 调试 VueJS 3 Typescript 项目？

How to debug a VueJS 3 Typescript project with VS Code and Chrome using SourceMaps (with Vue CLI and Webpack)?

typescript

vue.js

visual-studio-code

webpack

source-maps