How to see results of console.profile()?
According to Chrome Console API Reference and MDN Docs, using console.profile('label') to start profiling and later using console.endProfile() to end profiling, should result in a profile added to Profiles (has been since renamed to Performance) panel in Chrome.
This works for me in Firefox, but I don’t get any profiles when I run my code in Chrome. Instead I get the warning:
DevTools: CPU profile parser is fixing 16 missing samples.
Am I missing something here or is this a bug in Chrome DevTools?
Turns out the profile goes into a different panel:
CPU profiles added to the JavaScript profiler panel. You can open it by clicking three dots menu (in the top right corner)
⋮-> More tools -> JavaScript Profiler.
The profiling can be observed from below code part.
function profileTest(callback) {
let i = 0;
let work = setInterval(function() {
if(i == 3) {
callback();
clearInterval(work);
return;
}
console.log('Doing some work..');
i = i + 1;
}, 1000);
}
console.profile("profileTest()");
profileTest(function(){
console.profileEnd();
});Note: setInterval is used for simulation purpose.
As @atavakoli have already answered, created profile can be seen in ‘CPU PROFILES’ part in ‘Javascript Profiler’ tab that can be opened from Developer Tools → Three dots → More tools. For example below screenshot shows the result profile of above code part.
See following link: https://developers.google.com/web/updates/2016/12/devtools-javascript-cpu-profile-migration
For the warning message, below question link can be referred.
Chrome: CPU profile parser is fixing n missing samples
