无响应的 webpack-internal:// Chrome 开发工具堆栈跟踪中的 URL

Question

在我使用 Gatsby Quick Start (

npm init gatsby my-site-name -- -ts -y

) 设置的项目中，我有以下

IndexPage

组件代码：

const IndexPage: React.FC<PageProps> = () => {
  throw new Error();
  ...
}

当抛出错误时，Chrome 会显示一个包含

webpack-internal://

链接的长堆栈跟踪，例如：

at IndexPage (webpack-internal:///./src/pages/index.tsx?export=default:123:9)

但是，当我点击这些

webpack-internal://

链接时，Chrome 并没有在 Sources 选项卡中打开相应的文件。我该如何解决这个问题？

Answer 1

您的构建过程可能未正确生成源映射，或者您可能没有启用它们，或者 Chrome DevTools 设置可能未正确配置以启用源映射支持。

尝试检查您的 Webpack 配置或 Gatsby 的配置以确保正在生成源映射并确保您使用的是最新版本的 Chrome。 此外，确保在 DevTools 中启用了源映射：在 Chrome 中，打开 DevTools（F12 或 Ctrl+Shift+I），单击设置，然后转到“源”选项卡，并确保“启用 JavaScript 源映射" 被选中。 最后，如果这些都没有帮助，请尝试清除缓存。 希望其中之一可以帮助您修复它。