在 Chrome 中的 iframe 中使用 React 开发工具。

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 访问可能包含 Store 的 iframe 而不是主页。”

要在 iframe 中启用开发工具，应该怎么做？我应该克隆 devtools 存储库 (https://github.com/facebook/react/tree/master/packages/react-devtools-extensions#build-steps) 并添加 all_frames 选项然后使用吗？

- React Noob

Answer 1

也许现在已经晚了。但是，我看到了这篇来自一些其他SO对话（我不幸无法找到的）的“线程”。

基本上，他们建议将这个添加到iframe的应用程序的body中。

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

这似乎适用于我的使用情况，与原帖提到的情况相似。

- dotdeb

---

非常好用。我把它放在应用程序的index.html中。 - Teddy

无论这对您是否有效，都将取决于内容安全策略。 - darryn.ten

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 或其他使用的文件头标签中，然后运行您的应用程序

4. 享受使用它吧

- aH6y

Answer 3

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

- Alexander Sobolev