如何查看console.profile()的结果？

Question

根据Chrome控制台API参考和MDN文档,使用console.profile('label')开始分析以及稍后console.endProfile()用于结束分析,应该会在Chrome中将配置文件添加到"配置文件"(已经重命名为"性能")面板.

这在Firefox中适用于我,但是当我在Chrome中运行代码时,我没有获得任何配置文件.相反,我得到警告:

DevTools:CPU配置文件解析器正在修复16个丢失的样本.

我在这里遗漏了什么,或者这是Chrome DevTools中的错误？

Answer 1

原来,配置文件进入另一个面板:

CPU配置文件添加到JavaScript Profiler面板.您可以通过单击三个点菜单(在右上角)⋮ - >更多工具 - > JavaScript Profiler打开它.

Answer 2

可以从下面的代码部分观察分析。

\n\n

\r\n

\r\n

function profileTest(callback) {      \r\n  let i = 0;\r\n  let work = setInterval(function() {         \r\n      if(i == 3) {\r\n         callback();\r\n         clearInterval(work);        \r\n         return;     \r\n      }\r\n      console.log(\'Doing some work..\');\r\n      i = i + 1;\r\n  }, 1000);     \r\n}\r\n\r\nconsole.profile("profileTest()");\r\nprofileTest(function(){\r\n  console.profileEnd();\r\n});

\r\n

\r\n

\r\n

\n\n

注意：setInterval 用于模拟目的。

\n\n

正如@atavakoli已经回答的那样，创建的配置文件可以在“Javascript Profiler”选项卡的“CPU PROFILES”部分中看到，该选项卡可以从开发人员工具\xe2\x86\x92打开，三个点\xe2\x86\x92更多工具。例如，下面的屏幕截图显示了上述代码部分的结果配置文件。

\n\n

\n\n

请参阅以下链接：https://developers.google.com/web/updates/2016/12/devtools-javascript-cpu-profile-migration

\n\n

对于警告消息，可以参考以下问题链接。\n
\n Chrome：CPU 配置文件解析器正在修复 n 个缺失的样本

\n