Improve your workflow using the JavaScript console

This is an interesting article to me. I'm professionally a scientist but this year I've set about to helping my partner start her business/website. I have a CSCI undergrad and a strong basis of computational/coding skills.

I find, in trying web development [I'm using Django], that everything is very simple and clear except for the debugging and problem solving. The tools are simple and the way you glue things together is simple but debugging things throwa you into the unholy mess that is how web apps are actually smashed together. I spend 80 percent of my webdev time trying to figure out how to figure out my problem. The rest of my time is crazy productive. If anyone could point me to ressources for people skilled in all things coding/NIX to get these sorts of troubleshooting skills, I would be grateful forever.

> The rest of my time is crazy productive

Maybe if you weren't "crazy productive" during those spurts, and maybe just "productive", you might not get in to as many situations where you can't even figure out how to figure out your problem?

I hear you - there definitely is a 'mess' factor to a lot of web tech. I've been doing this 20 years and still find that to be the case - moreso now today than 20 years ago. Most of my messes are someone else's making - I'm taking over a project that's undocumented, untested and often unbuildable. All those factors add in to the 'mess', and perhaps people just think it's 'normal'?

If the problems you're seeing are on projects you're building yourself from scratch, I'd recommend doing the 'productive' parts more slowly, perhaps spend time writing some tests, or docs, or even just re-explaining what you've done to someone else - the logic flow, where data is coming/going/etc. It may help you find problems earlier, and understand them better.

I never worked with Django so I don't know how much they mix backend and frontend code, but as a general advise: try to avoid debugging. And the cost of avoiding debugging can be quite high (e.g. factor 2) as you said already that you spend 4 times the time on debugging compared to development.

AFAIK, the most effective way of avoiding debugging is Test Driven Development (TDD). Try to modulize your code and test those modules before you use them. Building modules/libs with javascript can be achieved with tools like rollup.js [1].

Other than that, try to learn to use the dev-tools [2] (the first result on youtube search for 'devtools'; videos are good to give you an impression on what is possible) and curl to replicate network requests (the dev-tools have a function to generate curl commands).

[1]: https://rollupjs.org/guide/en

[2]: https://www.youtube.com/watch?v=H0XScE08hy8

Small world. Thank you!

From the frontend, you should try to master Chrome DevTools (or other tools if for some reason Chrome isn't ok with you).

There's pretty much everything you need in there:

- Emulate devices for design and testing

- Track network traffic

- Step by step debugging out of the box

- Performance diagnostics

- Inspection of the DOM tree with real-time replacement of CSS and HTML for UI development and debugging

- Plugins for React and other frameworks