How to use the Chrome DevTools debugger?

Question

JavaScript

Where can I find articles, tutorials on how to use the profiler in Chrome DevTools, for really, really dummies?
For example, the site, after loading, freezes for a second when running scripts. I roughly understand what you need to look at the "Performance" tab, but besides the fact that there is a lot of things there, a lot of calls from libraries like jQuery or frameworks like Vue, it's still not clear how to find the moment I need, how to combine JS calls and FPS drop. Maybe it's not in JS at all, or not in my code, but I don't know how to check it.
Or let's say I have a class that manipulates the DOM a lot. Constantly creates new elements, changes, calls third-party plugins, and removes them. I'd like to make sure I don't have memory leaks. Again, I guess that this should be looked for in the "Memory" tab, but there is somehow a lot of things. On the "Allocation Timeline" when the DOM changes, the bars remain blue. As I understand it, this indicates that there is data that has remained in memory and has not been cleared. But how to understand what kind of data it is? Where are they from, what led to this?