标签: react-devtools

我有一个 React.js 应用程序，我想对其进行性能问题分析。

我在 Firefox 中使用 React 开发工具分析器。

我分析了特定的交互并在开发工具中获取火焰图和排名时间图。

然后这条消息出现在开发工具中：

开发工具的这一部分不是交互式的，我找不到有关钩子如何编号的任何信息。

我如何解释这些数字？它们对应什么？我在哪里可以找到有关它们所指的钩子的信息？

当我输入日志时console.log()，Chrome 控制台会给出日志，但不会显示文件和行号，它只是显示react_devtools_backend.js:4049。当我这样做时，如何让控制台显示文件和行号console.log()？

当尝试检查任何模式或覆盖元素时，我遇到了反应开发工具的问题。它显示检查元素时超时。

当我使用反应开发工具检查我的代码时，我注意到一些钩子触发了此错误并导致“解析钩子名称”操作出错。当我检查反应开发工具时，它输出：

main.js:4878 Error: Could not find runtime location for line:177321 and column:81
    at Object.originalPositionFor

从Facebook/React issues 上的这个线程来看，它似乎可能与 webpack 源映射相关。有人对可能导致这种情况的原因有任何想法吗？这种情况不仅发生在自定义挂钩中，而且发生在我的代码库中的标准useState和usecallback挂钩中。

编辑：我尝试了devtool具有多个值的 webpack 设置，但问题仍然存在。该问题目前在我的代码库上已经消失，但它间歇性地出现，使其难以重现。在有确凿证据解释造成这种情况的原因之前，请不要提出任何问题。

你好，有人知道我的反应开发工具出了什么问题吗？组件选项卡为空

我正在使用 React build 并尝试从 create-react-app 目录之外的文件夹导入一些文件。它不允许我这样做，所以我尝试在目录内创建文件夹的符号链接。然后我从react-dev-utils/ModuleScopePlugin.js中收到错误，似乎react对符号链接不太满意？当我用实际文件夹替换符号链接文件夹时，一切正常。

Creating an optimized production build...
..../src/frontend/project-editor/node_modules/react-dev-utils/ModuleScopePlugin.js:31
          request.descriptionFileRoot.indexOf('/node_modules/') !== -1 ||
                                      ^

TypeError: Cannot read property 'indexOf' of undefined

当 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访问可能保存商店而不是主页的iframe”。

我应该怎么做才能在 iframe 中启用开发工具。我应该克隆 devtools 存储库（https://github.com/facebook/react/tree/master/packages/react-devtools-extensions#build-steps）并添加 all_frames 选项并使用它吗？

当我为我正在从事的项目运行 Lighthouse 时，我得到

chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js

作为未使用 JS 的第一原因。

从性能优化的角度来看，这有何意义？我无法控制用户在浏览器中运行哪些扩展。我也找不到项目中有关 React 开发工具的任何信息。

如果有人能够阐明这个问题，我将不胜感激。

是否可以右键单击 React Dev 工具下可见的组件，然后单击“在 IDE 中显示”，从而在 VSCode 中打开该文件。这将是有益的，因为我不必去寻找该组件。我经常想在 VS Code 中查看某个组件的源代码，但由于组件的模块化复用，代码库太大，名称重叠，组件结构不模仿页面结构，很难找到准确的组件如果您是代码库的新手。如果有一种方法可以简单地使用 React 开发工具中的组件选择器工具，则单击突出显示的组件即可转到 IDE 中的文件。

考虑以下带有故意添加的重复键的 JSX：

<table>\n    <tbody>\n        <tr key="row1">\n            <td>row1_col1</td>\n        </tr>\n        <tr key="row1">  <--- same key here\n            <td>row2_col1</td>\n        </tr>\n    </tbody>\n</table>\n

正如预期的那样，这会导致

\n

index.js:1 警告：遇到两个具有相同密钥的子项，\n row1。键应该是唯一的，以便组件在更新时\n保持其身份。非唯一的键可能会导致子项被重复和/或省略 \xe2\x80\x94 该行为不受支持，并且可能会在未来版本中更改。

\n

现在想象一下我收到此错误并且不知道键值并想在开发工具中检查它们。

Inspect element在正常的 Chrome Devtools 中不会显示密钥：

而且 React Devtools 也不显示密钥/根本不会显示<table>和<tr>：

我究竟做错了什么？如何查看Devtools中的按键？