【问题标题】:Why there is no "User timing" section in my Chrome DevTools为什么我的 Chrome DevTools 中没有“用户计时”部分
【发布时间】:2018-06-06 19:27:29
【问题描述】:

根据这篇文章:
Debugging React performance with React 16 and Chrome Devtools.

我也想检查我自己的网站由 React 构建的一些性能方面的东西。 但我在 DevTools 中看不到 User timing 部分。 我的电脑里有 62.0.3202.89 的 Chrome 版本, 我错过了什么吗?

【问题讨论】:

  • 如果它不是一个反应应用程序怎么办。而且我的开发工具中没有看到用户计时部分?

标签: devtools


【解决方案1】:

我可以通过将?react_perf 附加到我的网址来完成这项工作。不知道为什么这很难找到……希望它对你有用。

https://reactjs.org/blog/2016/11/16/react-v15.4.0.html#profiling-components-with-chrome-timeline

【讨论】:

  • 另请注意,React 中的 ?react_perf 时间线功能仅适用于本地开发,因为它是从 React 的生产构建中编译出来的。
【解决方案2】:

用户计时选项卡已从 chrome 中移除,取而代之的是“计时”选项卡,该选项卡结合了一些众所周知的计时,例如 LCP、OnLoad 事件和自定义用户计时 API 标记/度量。

【讨论】:

  • 计时标签在哪里我看不到
  • @Ehsansarshar 它应该显示在 Chrome DevTools 的性能选项卡下。默认情况下,它在 Frames 和 Main 之间,但我不确定顺序是否可自定义。
  • 我认为主要问题也是这个。帧和主帧之间没有出现时序
  • 是的,它可能是。就我而言,我期待一个用户计时选项卡,该选项卡已与计时部分合并。还有另一个问题stackoverflow.com/questions/61435791/… 与缺少的计时部分有关。我希望它对您有所帮助,但是包含 ?react_perf 不应使其可见,因为所有网站都可以看到“计时”选项卡。
  • 刷新页面会出现计时标签。但没有任何反应火焰图。只有一些标签
【解决方案3】:

【讨论】:

  • 感谢您的调查。
猜你喜欢
  • 2017-05-04
  • 2020-12-11
  • 2022-01-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-05-29
  • 2016-11-21
  • 2020-12-18
相关资源
最近更新 更多