标签: source-maps

我正在尝试为我的 Babel 7.7 和 Webpack 4.41 构建代码启用源映射。

除了源自 node_modules 中代码的控制台语句外，源映射工作正常。这些声明主要是开发提示，当我们做错事时发出警告。对于我们自己的源代码中的控制台语句，源映射可以工作，如果第 3 方库中发生错误，它们也可以工作。

当依赖项 console.logs 时，跟踪如下所示：

Warning: a promise was rejected with a non-error: [object String]
    at eval (webpack-internal:///./src/app/bootstrap/bootstrap.js:66:13)
From previous event:
    at _callee$ (webpack-internal:///./src/app/bootstrap/bootstrap.js:65:140)
    at tryCatch (webpack-internal:///../node_modules/regenerator-runtime/runtime.js:45:40)
    at Generator.invoke [as _invoke] (webpack-internal:///../node_modules/regenerator-runtime/runtime.js:271:22)
    at Generator.prototype.<computed> [as next] (webpack-internal:///../node_modules/regenerator-runtime/runtime.js:97:21)

在浏览器中检查 bootstrap.js 时，我没有完全获得构建代码，仍然应用了源映射，但我也没有获得 babel 的输出，甚至没有获得原始代码。这是介于两者之间的某种状态。

我创建了一个简单的存储库，在其中重现问题，尝试以受控方式解决它： https: //github.com/pstenstrm/webpack-sourcemap-test

Object(react_loadable__WEBPACK_IMPORTED_MODULE_9__["preloadReady"])().then(function _callee() {
  return _Users_path_to_proj_node_modules_babel_runtime_corejs3_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.async(function _callee$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          _context.next = 2;
          return _Users_path_to_proj_node_modules_babel_runtime_corejs3_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.awrap(new bluebird__WEBPACK_IMPORTED_MODULE_1___default.a(function (a, reject) …

我突然在控制台上收到此警告。我上次的正式提交没有这个问题，并且撤销我的更改似乎并不能解决这个问题。

关于如何解决这个问题有什么建议吗？预编译、清理等，好像都没有效果。

我有一个带有 2 个模块（包）的 Lerna monorepo：ps和cli.

ps只是导出一个导入whatever的函数cli。

然而，当我尝试使用 VSCode 调试此代码时，我的断点停止在生成的 Javascript 文件上，而不是我的源 Typescript 文件上。

这已经困扰了我几个小时，我已经广泛地使用了我的tsconfig.json和launch.json使用vscode-pwa-analyzer来查看 VSCode 能够检测我的源 TS 代码，但我无法找到修复方法。

编辑：我使用以下设置： macOS Big Sur v11.1 Node.js v14.8.0 Typescript v4.1.3

这是我上面的调试的转储文件，您可以加载到vscode-pwa-analyzer。 我可以在这里看到一些未绑定断点错误。

我正在尝试让源映射与 Sentry 一起用于 ReactJS 应用程序。我将 webpack 与 SentryWebpackPlugin 结合使用。webpack config 中的相关配置如下所示：

const SentryWebpackPlugin = require('@sentry/webpack-plugin');

const SentryOptions = {
  // sentry-cli configuration
  authToken: process.env.SENTRY_AUTH_TOKEN,
  project: process.env.SENTRY_PROJECT,

  // webpack specific configuration
  include: pathLibrary.resolve(__dirname, '..')
};

module.exports = {
  devtool: 'hidden-source-map',
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js',
    publicPath: '',
    path: pathLibrary.resolve(__dirname, '..', 'public'),
    sourceMapFilename: '../tmp/sourcemaps/[file].map'
  }
}

if (DEPLOY_ENVS.includes(env)) {
  module.exports.plugins.push(new SentryWebpackPlugin(SentryOptions));
}

当我构建和部署应用程序时，我确实可以在 Sentry 中看到源映射和源代码，但是问题页面上显示的代码似乎不可读。这让我相信我在命名输出文件或源映射方面做了一些错误的事情。

我正在使用 Sentry 来报告我创建的 React 应用程序的错误。

问题是我不知道如何调试某些问题，因为我不知道错误发生在哪个文件中：

我使用 Laravel mix 进行编译。看起来webpack.mix.js像这样：

mix
  .react("resources/js/checkout/CheckoutRoot.js", "public/js")
  .version();

我尝试sourceMaps()像这样使用：

const productionSourceMaps = true;

mix
  .react("resources/js/checkout/CheckoutRoot.js", "public/js")
  .react("resources/js/checkout/DonationRoot.js", "public/js")
  .version()
  .sourceMaps(productionSourceMaps, "source-map")

但这似乎不起作用。在 Chrome 开发工具中查看时，它会将其附加到文件正下方：

//# sourceMappingURL=27.js.map?id=c4f9bf41f206bfad8600

但是当我漂亮地打印时，它仍然会导致同样的乱码：

我希望看到它指出我正在本地处理的组件文件。那可能吗？

更新

我尝试安装 Sentry 的 webpack 插件：

const SentryWebpackPlugin = require("@sentry/webpack-plugin");

let config = {
  output: {
    publicPath: "/",
    chunkFilename: "js/chunks/[name].js?id=[chunkhash]",
  },
  plugins: [
    new SentryWebpackPlugin({
      // sentry-cli configuration
      authToken: "MY_AUTH_TOKEN",
      org: "MY_ORG",
      project: "MY_PROJECT",
      release: "MY_RELEASE",

      include: ".",
      ignore: ["node_modules", "webpack.config.js"],
    }), …

我有一个带有内联源映射的 JavaScript 文件形式的库。我想在 VSCode 中查看该库的原始 TypeScript 源代码。有任何扩展吗？我期望右键单击库文件并“显示源”之类的内容，但没有找到任何内容。

将我的 Angular 版本升级到最新版本后，出现错误：

Content and Map of this Source is not available (only size() is supported)

任何帮助将不胜感激，因为有关此问题的信息并不多。

create-react-app在开发模式下运行：

为什么我的控制台错误链接到缩小的代码块？我想我记得 CRA 能够显示源映射文件。

我一直读到 Node.js 本身就支持源映射。但我不明白在将错误打印到控制台时如何使用源映射。

我尝试过使用 运行节点--enable-source-maps，并且还尝试了该source-map-support包。但无济于事。控制台中的输出仅显示转译后的js代码，而不是ts源代码。

我究竟做错了什么？

源代码：

// main.ts
const someError = new Error()
console.error(someError.stack)

控制台输出（来自 VS Code）：

/home/birger/.nvm/versions/node/v16.16.0/bin/node ./build/main.js -r source-map-support/register
Error
    at Object.<anonymous> (/home/birger/someproject/build/main.js:8:19)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

这是我的 tsconfig.json：

// tsconfig.json
{
    "compilerOptions": {
        "target": "ES2022",
        "module": "commonjs",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "sourceMap": true,
        "strict": true,
        "skipLibCheck": true,
        "outDir": "build",
        "noImplicitAny": false,
    }
}

在我的网站上运行 Lighthouse Audit 时，发现源地图存在错误。但是，它没有指出任何具体位置或错误。我拥有的唯一信息是当我将鼠标悬停在错误（如屏幕截图所示）上时，该错误显示为“不在 devtoolsLog 中的 url 用于第一方检查”。

在谷歌上搜索了很多之后我还没能发现这意味着什么？有人有什么想法吗？

谢谢。