"Unverified Breakpoints" 在 TS 文件中的 Vue 组件上使用 VS 调试器时

Question

问题：
当我在我的 TS 文件和 Vue 组件中设置它们时，我得到了未经验证的断点，同时运行 VS 调试器。我不知道它是否相关，但这是 Jupyter Lab 后端的 FE 代码，但我认为这不会影响 VS 调试器？我认为我的配置可能是错误的。我还尝试将 "debugger" 添加到 Vue 和 TS 代码中，但它们也没有被击中。

我试过的：
我试过以多种方式配置启动文件这是我的 VS 调试器 launch.json：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Remote debugging",
            "sourceMaps": true,
            "url": "http://localhost:8888/?token=<>",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "*": "${webRoot}/*"
              }
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Webpack",
            "program": "${workspaceFolder}",
            "cwd": "${workspaceFolder}",
            "sourceMaps": true
        },
    ]
  }

这是我的 TS.config

{
  "compilerOptions": {
    "sourceMap": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "strictFunctionTypes": false,
    "module": "amd",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "lib": ["es2017", "dom"],
    "allowJs": true,
    "skipLibCheck": true,
    "newLine": "LF",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "include": ["src/**/*"]
}

这是我的 webpack.development.js。我发布它的原因是我在开发工具下为它设置了源映射。

/**
 * Webpack configuration for production.
 *
 * Optimizes and minifies bundle.
 */

const webpack = require("webpack");
const merge = require("webpack-merge");
const commonConfig = require("./webpack.common.js");

module.exports = merge.multiple(commonConfig, {
  mode: "production",
  devtool: "source-map",
  main: {
    optimization: {
      minimize: true
    },
    plugins: [
      new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false
      }),
      new webpack.DefinePlugin({
        "process.env": {
          NODE_ENV: JSON.stringify("production")
        }
      }),
      // new webpack.optimize.UglifyJsPlugin({
      //   beautify: false,
      //   compress: {
      //     warnings: false,
      //     drop_console: true
      //   },
      //   comments: false,
      //   sourceMap: true
      // }),
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.optimize.ModuleConcatenationPlugin()
    ]
  }
});

这是我的 webpack

// Entry point webpack config that delegates to different environments depending on the --env passed in.
module.exports = function(env) {
  process.env.NODE_ENV = env;
  return require(`./webpack.${env}.js`);
};

这是我的 webpack.production

/**
 * Webpack configuration for production.
 *
 * Optimizes and minifies bundle.
 */

const webpack = require("webpack");
const merge = require("webpack-merge");
const commonConfig = require("./webpack.common.js");

module.exports = merge.multiple(commonConfig, {
  mode: "production",
  devtool: "source-map",
  main: {
    optimization: {
      minimize: true
    },
    plugins: [
      new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false
      }),
      new webpack.DefinePlugin({
        "process.env": {
          NODE_ENV: JSON.stringify("production")
        }
      }),
      // new webpack.optimize.UglifyJsPlugin({
      //   beautify: false,
      //   compress: {
      //     warnings: false,
      //     drop_console: true
      //   },
      //   comments: false,
      //   sourceMap: true
      // }),
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.optimize.ModuleConcatenationPlugin()
    ]
  }
});

Answer 1

您可以尝试从 chrome 启动配置中删除 sourceMapPathOverrides 条目吗？

"sourceMapPathOverrides": {
  "*": "${webRoot}/*"
}

不确定，为什么你手动设置它，default overrides by VS Code should be already good, if you kept the default webpack devtoolModuleFilenameTemplate 设置（我没有看到你的配置中指定的）。这些设置会影响 webpack 的自定义 webpack:/// 模式如何为 sourcemaps 解析。问题是，如果您在那里手动设置某些内容，所有默认值将被覆盖。

如果您可以在 development 模式下进行调试，但不能在 production 模式下进行调试，那可能是因为生产源映射存在 webpack/terser-webpack-plugin 问题。在这里观看：Link1, Link2.

例如

{
  ...
  mode: "development",
  devtool: "inline-source-map" (or "source-map")
}

在我的环境中工作。

更新：

我刚看到，您的 webpack 开发配置中也设置了 mode: "production"。您能否将其更改为 "development" 并查看它是否有效？

"Unverified Breakpoints" 在 TS 文件中的 Vue 组件上使用 VS 调试器时

"Unverified Breakpoints" when using VS debugger on Vue components within TS file

typescript

webpack

vue.js

jupyter

jupyter-lab