在 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

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

基本上，他们建议将其添加到

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/无论您使用什么并运行您的应用程序中的head标签

4. 享受

Answer 3

由于 CORS，其他解决方案对我不起作用。 相反，我使用了外部命令行 (CL) 工具方法。以下是我为 iframe 启用 React DevTools 的方法：

1. 我将以下脚本添加到

   iframe.html

   ：

   <script>
     if (window.parent !== window) {
       const script = document.createElement("script");
       script.src = "http://localhost:8097";
       document.head.appendChild(script);
     }
   </script>
   

2. 然后，我执行了命令：

   npx react-devtools
   

Answer 4

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