On a tangent, it is weird sometimes that people not always pick the right tool for the job, even if the effort is small and the results pay off immediately. Like slicing carrots using a potato knife or even a table knife.
Chrome DevTools has that issue since it's always changing, adding new things, and they're not discoverable/learnable from inside of it.
If you had a drawer of 50 kitchen implements, would you even think to search for the mandoline slicer if you didn't already know about it?
I spent about a week tracking down a memory leak in our web app. About 5 days in I discovered you could compare heap snapshots which led to the root cause of a chrome bug with hidden classes. The fix was to move object spread to the bottom of an object literal.
Here’s the bug. It was a fun one to hunt: https://crbug.com/v8/13303
For what it's worth, I stick to server-side for most of my work. But occasionally I have to fix something on the front end - whether it be a UI issue in CSS/HTML or a real problem in Javascript. So a quick mention of those front-end tools available and what they do would be great. Thank you!