问题标签 [react-devtools]

我正在尝试使用 webpack-4 来获取 react 的生产版本（该项目不是使用创建 React App 创建的），但没有成功。我的项目正在使用 typescript 并使用 ts-loader 并使用 React 15.6.2 的版本。

当前的 webpack 配置文件

我已尝试按如下方式对其进行修改，但仍然无法正常工作。

仍然是 webpack 和 React 的新手。 提前感谢您的任何帮助或建议。

由于某种原因，我看不到特定提交的组件状态。我错过了一些非常明显的东西还是不支持这个功能？

我正在使用 Firefox 72.0.1。

在下图中，我双击了表格（单击也无济于事）。

我正在尝试使用 React Dev Tools 和 Firefox Developer Edition 调试 React 应用程序。我无法将 React Dev Tools 安装到 Firefox 通过 VSCode 启动时使用的配置文件。当我通过在 /Applications 中打开 Firefox 自己启动 Firefox 时，我已经安装了 React Dev Tools。

但是，当我运行以下launch.json配置文件时，启动后，Preferences -> Extensions & Themes -> Extensions in FireFox 下没有显示扩展。

但是，我可以按照此处的说明使用终端启动 Firefox 并将调试器附加到它。此配置文件具有 React 开发工具，并且运行良好：

启动.json：

但是我如何使第一个与launch请求而不是一起工作attach？从阅读它似乎与配置文件有关

我是 React 应用程序的新手，所以如果我的问题有一个简单的答案，请原谅我。我在 Google 度过了过去几天，但没有找到解决我的问题的方法。

在我的新职位上，我被要求修改当前的 React 应用程序。简而言之，这个应用程序是在我之前构建的并且已经过时了。该应用程序不允许进行开发构建。而且由于它不允许进行开发构建，我们的开发团队无法看到组件布局、道具或状态以及 React 开发工具提供的任何其他好处。

我的问题是如何使用 React 开发工具使我的应用程序正常工作？

其他可能有帮助的细节： 文件ABC/app/src/common 通常位于我的雇主这里，这将转换为 URL： www.ABC.com/app/。然而，出于某种原因，事情并不是这样设置的。

相反，该应用程序是从 URL 子域提供的： app.XYZ.com 另外，请注意该 URLwww.XYZ.com不是 React 应用程序 - （不确定这是否相关）

基本上，构建脚本会创建捆绑包，并且 .min 文件从ABC/app/src/common文件夹移动到app.XYZ/.

包.JSON：

假设我们有一个父组件和多个功能性子组件。我想清楚地知道父母是否重新渲染孩子是否重新渲染。

在浏览了几篇文章后，我知道有 3 种方法可以检测重新渲染。（如果有更多方法，请告诉我。）

console.log1.在子组件中放入a 。

2.在设置中使用Chrome油漆闪烁选项。

3. 使用 React 开发工具

所有这些方法是否正确知道组件是否真的重新渲染？因为它似乎不适用于 React.memo。

当我用 React.memo 包装子组件时，它不会打印console.log，当父组件重新呈现时这是正确的。但仍然使用 chrome 和 react 开发工具突出显示子组件，就好像它重新渲染一样。

CodeSandbox：https ://codesandbox.io/s/bold-cloud-iv0rv （如果我们添加一辆新车，静态组件仍以绿色突出显示，但根据备忘录，它不应该重新渲染。）

现在我怀疑，油漆闪烁是否无法正常工作或 React.memo 有问题？

我正在尝试使用 npm(npm install electron) 和 yarn 安装电子，但遇到了瓶颈问题。PFB 错误消息

因此，为了绕过 ssl，我运行了命令npm config set strict-ssl=false并再次尝试。

Butr 现在，我得到一个新的错误。

PFB 我正在使用的版本。

节点 - v12.16.1

npm - 6.13.4

操作系统 - macOS 莫哈韦 10.14.16

我为 Firefox 和 Chrome 安装了官方的 React Developer Tools 扩展并成功使用它们。

但我找不到任何适用于 Internet Explorer 11 的扩展程序。我的应用程序无法在 IE 11 上正常工作。

对我来说必须支持 IE11。IE 11 是否有任何扩展来检查此浏览器中的反应、其道具和状态？

React 开发工具中的“连接”消息是什么意思：

想知道 Chrome 上的 React Dev Tool 对组件进行检查是否正常？

我正在尝试检查一些网站，以更好地了解优秀的公司如何构建和编写他们的 React 代码，但我所看到的只是诸如此类的东西<t> <y>。

这是我所看到的图像：

https://ibb.co/4gCx7DJ

有人可以解释这是为什么吗？

我正在尝试扩展第 3 方的闭源 React 应用程序。包含带有嵌入式 React 应用程序的页面的门户允许我通过可自定义的页脚注入我自己的 JS。过去，我在此门户中使用基本的 DOM 查询和操作扩展了服务器呈现的页面，但鉴于此页面的动态特性，我认为这不是一个好主意。我查看了MutationObserver，阅读了React 与 3rd 方库集成的指南，并查看了一些关于扩展 3rd 方 JS 的链接，通常处理覆盖某些功能。然而

1. React 应用程序是闭源的，所以我认为我不能导入/需要它
2. 根据我使用 Chromium 调试工具的推论，我需要重写的函数被混淆并深度封装

我熟悉 React，如果可能的话，我很想“扩展”现有的功能。是的，我意识到这是有风险的，因为代码的所有者可能会推动会破坏我的扩展的更改......但这就是我的要求的本质。

我觉得必须有一种方法可以做到这一点，因为React 开发者工具似乎可以推断出很多东西。

有谁知道“扩展”第 3 方、闭源 React 应用程序的聪明方法？最好通过连接到实际的 React 应用程序.. 虽然我对其他想法完全开放。

提前致谢！