[nuancebydefault]

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.

[dlisboa]

Most people don't know all the tools at their disposal, or how to use them. I certainly don't and I consider myself above average in this regard.

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?

[nuancebydefault]

You are right. But what I wanted to say is, some people stick to very basic tools, even after you show them more convenient tools like a sharp knife with a firm handle and a knife sharpener. Often the switching part of the process seems to big of a hassle.

[shortrounddev2]

Yeah, I've shown the junior devs a dozen times how to set up breakpoints in VSCode and they still opt to console.log everything instead

[MonaroVXR]

I'm junior myself and this is so weird.

[sa46]

Chrome dev tools are an engineering marvel; the downside is it’s quite hard to find the perfectly shaped tool.

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

[dotancohen]

If you'd care to list some of your most used - or most useful tools - I'd love to read it. I suspect that I don't even know about most tools available to web devs.

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!

[shortrounddev2]

Not him but I use typescript with webpack. Webpack has webpack serve, which runs a simple HTTP server that shows an index.html for testing your script. It adds some file watchers on your source so if you make any changes it automatically compiles. Webpack will build the .map files so you can run breakpoints in your browser on the original source, but if you develop with vscode, you can create a launch profile which allows you to attach your vscode debugger to the browser and put your breakpoints in VSCode instead of the browser (which I prefer the UI for). This works with react as well

[dotancohen]

Thank you. I have been learning React lately (as a backend developer, I love it) and this will be helpful. I've considered using webpack or one of the competitors - there are so many that I've simply just avoided them until now.