问题标签 [react-devtools]

我正在使用 React 开发 chrome 扩展。我想在开发模式下使用 React devtools，但它不会出现。我尝试添加chrome://extensions/权限，但这不是有效的。我是否缺少启用此功能的东西？此外，一旦添加到中间件中，Redux 开发工具就会出现。

有没有办法防止生产前端的任何道具/状态变化？

我尝试了以下操作，但它完全禁用了开发工具：

严格遵循Realm 网站上列出的描述

• 反应原生初始化 myproj
• cd myproj
• npm 安装
• npm install --save 领域
• 反应原生链接领域

现在正在运行npm list以验证某些版本

• 反应@16.3.1
• 反应原生@0.55.4
• 领域@2.8.1

现在根据Realm的入门页面中的“狗的数量”示例修改已发布的App.js（直接替换类体）。

现在在 XCode(v9.4) 中打开 myproj.xcodeproj，修复签名错误。确保没有其他正在运行的捆绑程序线程。选择在 xcode 中连接的 ipad mini，然后点击“构建并运行”

将应用程序加载到 ipad mini 中后，我可以看到

这意味着 Realm 已加载并正常工作。现在摇动 ipad mini 并点击“远程调试 JS”菜单，我在红色背景中收到此错误：

Chrome React Native Debugger 说"Status: Debugger session #10000 active"，所以它连接到 ipad mini。

在我的 iphone 7 上做了同样的测试，但得到了同样的错误。我确实需要设备调试，因为我们的项目需要使用设备的摄像头。有什么建议么？

谢谢。

react-native run-android我在另一个终端中执行项目，我这样做：

npm run react-devtools

它打开了电子的新窗口，上面写着：

它将在几秒钟内打开的本机应用程序...

但什么也没发生。

Ctrl我用+放入模拟器切换检查器m，我可以在网络中看到它发出请求，http://localhost:8097结果是它无法连接并继续尝试相同的结果。

打开的电子窗口说它等待连接到端口8097，所以我可以看到正在尝试连接但没有结果！

如果用户登录并尝试转到登录页面或任何未处理的路由，我正在尝试让页面路由到主页。我尝试制作一个呈现登录页面或使用“window.location.replace('/')”的函数。我也在登陆页面的 componentDidMount 中尝试过这个。它重定向到主页，但随后在开发工具中显示了我的反应组件的两个实例。最接近答案的是，这是一个我不相信的反应错误，以及关于 shouldComponentUpdate 的一些东西。我无法让它发挥作用。我在下面包含了代码。谢谢您的帮助。是因为我在最终路线中使用了渲染吗？

之前 - 1 个应用程序组件
之后 - 2 个应用程序组件

我的主应用程序容器

我一直在使用 react-devtools 来检测任何不必要的组件更新，但是我不确定我是否完全理解它是如何工作的。

我可以识别通过添加的边框更新的各种组件，表明它们已更新，但我不确定这些边框的各种颜色是什么意思（到目前为止，我已经看到了青色和浅绿色）。

每当我尝试执行npm install以构建我react在项目中的一部分时。它抛出以下错误：

我的反应部分有什么问题，可能的解决方案是什么。

I'm developing a React Native app using create-react-native-app (so, Expo), testing on a real device using my network IP address (192.xxx.xxx.xxx). I've managed to get react-native-debugger up and running and debugging remotely. It opens rn-debugger, redux devtools and chrome devtools in 3 separate windows.

My question is, is it possible to see an equivelant of the network tab from Chrome developer tools to show all the network traffic going in and out of the app (e.g. when my app makes calls to an API using Axios)?

The actual network tab in the Chrome dev tools window is presumably just showing the network traffic between the debugger and the app running on the local device, so it's just showing the websocket stuff that the debugger uses, not my App's network traffic.

To get round this, I could just do loads of logging to the console when making requests but as a web developer I'm used to being able to see all the headers, json and timings etc in a handy view.

我有一个允许上传图片的 React Web 应用程序。

在对我的 API 执行多张图片（在本例中为 6）的 fetch POST 请求后，浏览器会自行刷新并重新加载当前页面。值得注意的是，此应用程序允许裁剪图像，因此对于用户上传的每张图像，都会上传第二张图像（裁剪）。所以上面的 6 张图片会产生 12 个 POST 请求。

刷新行为不一致且难以重现。我在发生这种行为的函数中插入了断点。使用 chrome 调试器工具，我逐步完成了流程，发现刷新发生在此调用之后。

它位于websocket.js库中的文件内node_modules/react-dev-tools/node_modules/socketjs-client/lib/transport/websocket.js

我已将其缩小到该文件，并排除了我的项目代码库中的任何问题。

我的理论是我的应用程序的行为正在触发一个外部侦听器/案例，这导致了完整的浏览器刷新。

我看到有问题的文件在里面react-dev-tools，并认为删除这个模块可以解决问题，但是，这也发生在我的生产环境中，所以我觉得删除它可能会破坏构建。

任何关于改进我的调查或潜在解决方案的想法都会有所帮助。

我有一个由一个对象组成的组件，该对象包含一个对象数组，而这些对象又具有键和字符串

当我在 react devtools 中打开组件时，我发现我可以通过双击这些字符串来编辑字符串，但我显然无法更改诸如“era”之类的键或恐龙数组"jurassic"。"diplodocus"但是，可以使用 React DevTools 更改它，但我做错了。

我在 Google DevTools 中使用 React DevTools。

我可以使用 React DevTools 更改组件的状态，哪些不能更改？

我尝试查看 GitHub 自述文件，我可以在部分侧窗格中看到编辑状态的提及，但没有提及可以编辑和不能编辑的内容。

我查看了如何从浏览器设置 React 组件状态和道具，但有一条评论告诉用户阅读 React DevTools 的友好手册，以及没有解决使用 React DevTools 可能或不可能的答案。