查看使用React构建的网站的源代码

Question

是否有查看使用React构建的网站的反应源代码？

如果您检查反应页面的源代码，您将只看到根div。有没有办法看到实际的组件？

Answer 1

您可以使用React Developer Tools浏览器extension。这将允许您查看任何React应用程序的组件树。此外，您可以使用它检查每个组件的道具和状态。但是，在生产构建之后，您仍然无法看到Component的源代码。

Answer 2

看实际的源代码取决于源映射文件的存在。 （否则，您只需阅读 Transpiled/Vague 源代码）

引用自MDN：

<块引用>

源映射是一个文件，它从转换后的源映射到 原始来源，使浏览器能够重建原始来源 源并在调试器中呈现重建的原始文件。

在默认模式下，CRA 将为每个生成的 js 文件创建一个源映射，因此通过使用它您可以读取 developer tools 中的实际源代码。

注意：有一个名为 unwebpack-sourcemap 的工具可以从您可以使用的 Webpack 源映射中恢复未编译的 TypeScript 源、JSX 等。

Answer 3

有两种工具可能会有所帮助 @tharaka的答案中已经提到了一个 另一个工具是Redux Dev Tools用于状态管理。