问题标签 [react-devtools]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
56 浏览

react-native - React Native“显示检查器”重新加载应用程序

切换检查器(“调试菜单”->“显示检查器”或Cmd+ i)会重新加载导航到主页的应用程序,并且无法检查其他视图。

经过一番研究,看起来这不是预期的行为,但也没什么。

以前有人遇到过这个问题吗?

0 投票
1 回答
602 浏览

reactjs - 如何从 React 开发工具(在生产中)保护我的组件状态详细信息?

在此处输入图像描述

我注意到即使在构建了我的 react 项目之后(使用 npm run build)。任何使用 React Developer Tools 的主体都可以看到我的组件状态中的所有细节,并且可以临时更改其中的一些细节。尽管这些更改只能在人的浏览器上进行更改,但我不希望其中的许多信息显示在那里。敏感数据可能会在我的任何后端数组 JSON 中返回... 请我帮助我如何阻止这种情况?

0 投票
1 回答
2138 浏览

react-native - react-native-debugger 在打开应用内开发者菜单时断开连接并显示错误

我最近将我的 react native 升级到了最新版本 0.62.1 并且还下载了 react-native-debugger 文档中指定的所需的 react-native-debugger 应用程序(独立应用程序版本 0.11.1 )。现在,当我启用远程 js 调试时,一切正常,直到我按下 cmd + d 用于 ios 或 cmd + m 用于 android 在调试器自动断开连接并显示错误后在应用程序开发人员菜单中打开,如下图所示。

在应用程序开发人员菜单中打开时链接到 react-native-debugger 错误图像

如上图所示,Bridge 已经关闭。因此,我无法检查 react-native-debugger 中的元素。我已经在互联网上搜索了有关此特定错误的信息,但不幸的是我没有找到任何解决方案。

编辑 1

我已经使用 react-native-cli 建立了一个新的 react native 项目并进行了测试。它也给出了同样的错误。我不知道问题出在新的 react native 0.62 版还是 react-devtools 4 版。

0 投票
1 回答
1227 浏览

reactjs - 为什么反应开发工具 Profiler 不显示组件道具?

我开始学习 React 的优化。并查看一些学习资源,在它们上面,我可以看到 Profiler 中的组件道具。但是在我的 Profiler 中,我没有看到任何道具。为什么?

以及如何在 Profiler 中查看当前的渲染组件道具?

制作屏幕截图来显示这一点: 在此处输入图像描述

0 投票
1 回答
953 浏览

reactjs - React - 如何让访问者使用反应开发工具但不能编辑状态和道具

我一直在开发一个 react 应用程序,我认为 react 开发工具仅在应用程序的开发版本上可用,但我很惊讶我可以在生产版本上使用它,甚至可以更改路线和状态以及其他东西. 而且我不想从应用程序中完全禁用反应开发工具(通过向 index.html 添加脚本来卸载它)。所以我想做的是禁用对 facebook.com 中的反应开发工具的编辑(你可以在那里打开反应开发工具,但你不能编辑任何很酷的道具或状态)所以有什么好的方法吗?不禁用整个反应开发工具?

0 投票
1 回答
475 浏览

reactjs - 为什么将 React 应用程序部署到 Heroku 后 Chrome React 开发人员工具仍然是红色的

在此处输入图像描述

我已经在 Heroku 上部署了一个 react 应用,但是打开 Heroku 链接后,chrome react 开发者工具还是红色的,说明还在开发中?先感谢您!

0 投票
1 回答
999 浏览

performance - Chrome 性能分析器中的“时间”选项卡丢失

因此,我在Chrome Developer Tools的Performance选项卡内的Timings部分成功地监控了我的 React Native App的性能。

突然,在重新加载应用程序时,“计时”选项卡不见了

在此处输入图像描述

我尝试过重置 chrome,重新启动计算机并更改开发人员工具中的一堆选项,但似乎没有任何效果。

有人可以解释发生了什么以及我该如何解决这个问题吗?

任何帮助将非常感激。谢谢!

0 投票
1 回答
215 浏览

css - 如何动态改变 react-native 的风格?

在 react 中,我们可以检查元素,查看应用于元素的类并动态更改 css 属性,并且可以在 UI 中看到。同样明智的是,我们在 react native 中有什么东西吗?尝试过 react-devtools 但尝试更改 css 属性值,但这并没有反映出来在用户界面中。

0 投票
0 回答
14 浏览

reactjs - 有没有办法在 React 开发工具中获取页面上使用的组件的枚举?

我想知道我的哪些组件正在页面上呈现 - 例如用于一般文档目的。所有这些信息都已经存在于 React 开发工具的“组件”选项卡中。

但是,我试图复制此信息但没有成功。有没有办法以文本形式获取例如这个 UI(可能像tree命令输出但不一定像那样):

在此处输入图像描述

编辑:我尝试过的其中一件事是使用它,但缺少输出:https ://www.npmjs.com/package/react-component-hierarchy 它依赖于源代码解析(我猜)。然而,React 开发工具已经(正确地)拥有了所有这些信息——如果有一种方法可以通过开发工具来做到这一点,那就太好了。

0 投票
1 回答
328 浏览

reactjs - React chrome 开发者工具组件选择器?

有没有办法在反应开发者工具 chrome 扩展中选择一个组件,并在 chrome 的控制台中对其进行进一步的操作?我只找到DOM导航到elementschrome 开发人员工具选项卡的选择器。 在此处输入图像描述

就像 Vue 开发者工具中出现了一个组件选择器,你可以在其中选择一个组件,然后你可以在控制台中通过$vm0变量访问它。同样,如果我尝试使用 react,当我选择组件时,它会在控制台中出现此错误App

react chrome开发人员工具中是否缺少该功能?