Chrome未将SourceMap映射应用到控制台输出问题求助

开发者阿泽

2026-8-19

问题：Electron 18开发环境下控制台错误无法映射到源码

我用Webpack搭建项目，开发环境生成带内联SourceMap（包含源码）的bundle，作为Electron 18.0.4（对应Chrome 98.0.4758.109）的插件运行。Chrome的Sources面板能正常显示源码，用source-map包测试映射也正确，但控制台输出的错误只指向打包后文件的万余行位置，没法映射回原源码。

相关配置文件

tsconfig.json

{
  "compilerOptions": {
    "types": ["node"],
    "target": "ES6",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "sourceMap": true,
    "inlineSources": true
  },
  "include": ["src", "declaration.d.ts"]
}

webpack.config.js

import { fileURLToPath, URL } from "url";
import pkg from "webpack";
const { DefinePlugin, EnvironmentPlugin } = pkg;

export default async function (env) {
  const mode = env.mode || "development";
  const prod = mode == "production";

  return {
    mode: prod ? "production" : "development",
    entry: "./src/main.ts",
    devtool: mode === "development" ? "inline-source-map" : "source-map",
    performance: {
      hints: false, // ignore size since the bundle is run locally
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          use: {
            loader: "ts-loader",
          },
        }
      ],
    },
    ignoreWarnings: [/Failed to parse source map/],
    plugins: [
      new EnvironmentPlugin({
        SENTRY_DSN: "",
      }),
      new DefinePlugin({
        __SENTRY_DEBUG__: !prod,
      }),
    ],
    resolve: {
      extensions: [".ts", ".js"],
    },
    externals: {
      obsidian: "commonjs obsidian",
    },
    output: {
      path: fileURLToPath(new URL(".", import.meta.url)),
      filename: "main.js",
      libraryTarget: "commonjs",
    },
  };
}