Improve your workflow using the JavaScript console

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

> 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.

What kind of problems are giving you the most grief?

Writing tests is one great answer, but be aware that writing and maintaining good tests will also take large amounts of time — and it’s worth it! It will save you time in the long run, but it will be very hard to feel any savings early on.

This SO answer looks good for Python / Django: https://stackoverflow.com/questions/1118183/how-to-debug-in-...

Aside from tests, proficiency with a debugger goes a long way. Take some time to read the manuals and explore debugging techniques. Chrome’s frontend debugger & profiler is very good, and so are the Firefox & IE & Safari debuggers. Start by finding out what features are available in your python & browser debuggers.

Look into Selenium for end-to-end regression testing.

Also just think about what it means to be crazy productive and how to increase productivity. Testing and debugging are necessary parts of overall productivity, so avoid thinking of coding as productive and debugging as unproductive.

Python is lovely because it lets you do all kinds of things super fast for small projects. But the small project coding style can turn into a liability for large projects. For example, it’s great to pack multiple kinds of values into a tuple array, using sorting and zip and map on ad-hoc combinations, and not have to slow down to define a class. But once your project gets bigger, that style will slow you down as debugging gets harder. The trick is making all of your code easy to understand at a glance to someone who didn’t write the code, and that’s a lot harder than it sounds. You have to plan some things and really work to avoid the temptation to be tricky. At least I do, anyway, and almost every programmer I’ve ever met.

If you’re talking about JavaScript, have you tried the GUI debugging tools built into each browser?

https://developers.google.com/web/tools/chrome-devtools/java...

There’s also a lot of features for viewing and experimenting with CSS.

https://developers.google.com/web/tools/chrome-devtools/css/

Disclaimer: I wrote those docs. Firefox and Safari have similar tools if you prefer those browsers. I’m just not as familiar with their stuff.

I'm not a IDE fan boy, but PyCharm rocks. Give it a look: https://blog.jetbrains.com/pycharm/2017/08/develop-django-un...

Django-debug-toolbar is another useful tool for error detection.

These two combined, will give you a speed boost in debugging and problem solving.

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

Something I didn't use for a long time in Django development that turned out to be helpful is the Python debugger.

https://stackoverflow.com/questions/1118183/how-to-debug-in-...