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

Question

在我使用 Gatsby 快速入门 ( ) 设置的项目中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 不会在“源”选项卡中打开相应的文件。我该如何解决这个问题？

Answer 1

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

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