At some point in your career, you might have glanced over the Performance tab in the devtools of your favorite browser. You eventually tried to generate a profile but probably got quickly discouraged by it. The high density of information displayed makes it a little overwhelming and somewhat scary. I have been there, I feel you!
Good news is: the learning curve is not actually that steep!! Once you have grasped a few concepts it suddenly becomes your most valued tool to tackle performance bottlenecks.
This article will give you a few keys to understand how the profiler works and how to make a good use of it. Let's completely forget about console.log and console.time, today we are diving into the Performance Profiler!
Side note: I won't go too deep into complex scenarios here but I will eventually do a follow up article about advanced techniques.
The first step that I took to actually understand how the profiler works was to read the Mozilla documentation about their new performance profiler (This is an excellent doc, go read it).