在 iframe 中使用 React 开发工具 [在 Chrome 中]

Question

当 React 应用程序位于 iframe 内时，React 的开发工具 chrome 扩展无法工作。

推荐人：https ://github.com/facebook/react/issues/18945

开发工具团队建议的解决方案： https ://github.com/zalmoxisus/redux-devtools-extension/pull/56 。

“将‘all_frames’选项添加到manifest.json，以允许DevTools访问可能保存商店而不是主页的iframe”。

我应该怎么做才能在 iframe 中启用开发工具。我应该克隆 devtools 存储库（https://github.com/facebook/react/tree/master/packages/react-devtools-extensions#build-steps）并添加 all_frames 选项并使用它吗？

Answer 1

也许这已经太晚了。但是，我在其他一些对话中看到了这个帖子（不幸的是我现在找不到）

本质上，他们建议将其添加到 'd 应用程序body中iframe。

<script>
    if (window.parent !== window) {
      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
    }
</script>

这似乎适用于我的用例，这与 OP 提到的类似。

Answer 2

使用本指南https://github.com/facebook/react/tree/main/packages/react-devtools#usage-with-react-dom

1. 全局或本地安装react-devtools

# Yarn
yarn global add react-devtools

# NPM
npm install -g react-devtools

2. 在终端中通过命令启动react-devtools：react-devtools

之后你会看到这个：

3. 将此行放在 index.html/index.ejs/whatever 你使用的 head 标签中并运行你的应用程序

4. 享受

Answer 3

您可以使用内置扩展：https://github.com/facebook/react/tree/main/packages/react-devtools