标签: react-devtools

我使用 react-native run-android 执行项目，并在另一个终端中执行以下操作：

npm 运行 react-devtools

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

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

但什么也没有发生。

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

devtools 无法连接到模拟器，它写连接...并显示故障排除链接但链接不起作用。使用 devtools 中的 ctrl shift i，我可以理解错误是由于 backend.js 而无法连接。有谁能够帮助我？

他们是否删除了在React Dev Tools V4 中突出显示更新的功能？我似乎无法在任何地方找到它。我很想念它。

你知道吗，这件事？

这是 Google Chrome 中新的 React Dev Tools 的屏幕截图：

仅显示顶级组件名称AdminArea。这个组件在我脚本的入口文件中index.jsx。还应该有 AddNewCoupon 和 ViewCoupons 组件。没有启用过滤器。

另请注意，组件内的状态挂钩命名仅表示“状态”。这些是展位 useState() 钩子。

可以看到 useReducer 的初始状态变量名称，但这只是因为我直接将该变量导出和导入到入口文件中index.jsx。

有人知道如何解决这些标签问题吗？

当我尝试使用 React Native Debugger 调试我的应用程序时，出现以下错误：“

来自 React Native 调试器的错误

然后我执行该指令。安装react devtool，什么也没有发生。我想，也许，我在安装软件包时遇到了一些错误，所以我运行react devtools并看到当前版本 4.23.0

反应开发工具版本

所以有人知道我如何解决这个问题吗？

我目前正在做一个项目，刚刚开始使用 ReactJs。（所以还是菜鸟）

我在问自己：使用 React 开发工具的用户可以看到你所有的 props 和 state。我怎样才能防止用户看到例如 ID 和更多“私人”的东西？

提前致谢

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

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

我已经在 Google Chrome 上安装了 React Developer Tools 扩展来调试用 TypeScript 编写的 React 应用程序，但是一旦我开始调试应用程序并打开“组件”窗口，所有组件都显示为“匿名”。

当然，该应用程序主要使用功能组件。

有谁知道是否有办法让 React Developer Tools 在其组件树中显示组件名称？

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

npm run react-devtools

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

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

但什么也没发生。

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

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

我正在使用 create-react-native-app（所以，Expo）开发 React Native 应用程序，使用我的网络 IP 地址（192.xxx.xxx.xxx）在真实设备上进行测试。我已经设法远程启动并运行和调试 react-native-debugger。它在 3 个单独的窗口中打开 rn-debugger、redux devtools 和 chrome devtools。

我的问题是，是否可以从 Chrome 开发人员工具中看到网络选项卡的等效项，以显示进出应用程序的所有网络流量（例如，当我的应用程序使用 Axios 调用 API 时）？

Chrome 开发工具窗口中的实际网络选项卡大概只是显示调试器和本地设备上运行的应用程序之间的网络流量，所以它只显示调试器使用的 websocket 内容，而不是我的应用程序的网络流量。

为了解决这个问题，我可以在发出请求时对控制台进行大量日志记录，但作为 Web 开发人员，我习惯于能够在一个方便的视图中查看所有标头、json 和计时等。

所以这有点疯狂。我使用的一个 Web 应用程序是用 React 构建的，它做出了一些我不同意的设计决策。

幸运的是，设计实际上很简单，可以完全按照我想要的方式进行更改。我可以打开 Chrome React devtools 并更改分配给特定组件的道具。

但是我不想每次都手动执行此操作，这不值得。我想编写一个（超级hacky）个人javascript，我可以将它注入到页面中，它修改传递给这个组件的道具。

想知道是否有人知道从 React 外部注入 props 的简单技巧。也许有可能挂钩 React 用来响应开发工具的任何机制？