Question

问题：
在运行VS调试器时，在TS文件和Vue组件中设置断点时，我得到了未经验证的断点。我不知道它是否相关，但这是Jupyter Lab后端的FE代码，但我认为这不会影响VS调试器吗？我认为我的配置可能只是错误的。我还尝试在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 development.
 *
 * Contains plugins and settings that make development a better experience.
 */

const webpack = require("webpack");
const merge = require("webpack-merge");
const fs = require("fs");
const { execSync } = require("child_process");
const path = require("path");
const argv = require("yargs").argv;

const commonConfig = require("./webpack.common.js");
const DashboardPlugin = require("webpack-dashboard/plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

if (!fs.existsSync(path.resolve(__dirname, "vendor", "vendor-manifest.json"))) {
  // This _should_ exist, since we run the command for you when you run `npm run dev`
  console.log(
    "Vendor files not found. Running 'npm run build:dev-dll' for you..."
  );
  execSync("npm run build:dev-dll");
  console.log("Done generating vendor files.");
}

const devConfig = {
  mode: "development",
  main: {
    devtool: "source-map",
    plugins: [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify("development")
      }),
      new webpack.DllReferencePlugin({
        context: ".",
        manifest: require("./vendor/vendor-manifest.json")
      }),
      new ForkTsCheckerWebpackPlugin({
        tslint: true,
        async: false,
        silent: true
      })
    ]
  }
};

// Only enable the dashboard plugin if --watch is specified
// The dashboard plugin annoyingly doesn't allow webpack to exit,
// so we only enable it with --watch, which doesn't exit anyways
if (argv.watch) {
  devConfig.main.plugins.push(new DashboardPlugin());
}

module.exports = merge.multiple(commonConfig, devConfig);

有人告诉我应该在webpack.config.js中启用源映射，但是我的webpack.config看起来与我看到的大多数示例都不同。

// 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`);
};

Answer 1

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

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

不确定，为什么要手动设置它，如果您保留了默认的Webpack default overrides设置（我看不到您的配置中指定的设置），那么VS Code的devtoolModuleFilenameTemplate应该已经不错了）。这些设置影响如何为源映射解析webpack的自定义webpack:///模式。问题是，如果您在此处手动设置某些内容，则会覆盖所有所有默认值。

如果您可以在development模式下进行调试，但不能在production模式下进行调试，则可能是由于生产源映射存在webpack / terser-webpack-plugin问题。在此处观看：Link1，Link2。

例如

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

可以在我的环境中工作。

更新：

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

在TS文件中的Vue组件上使用VS调试器时出现“未验证的断点”

1 个答案: