Improve your workflow using the JavaScript console

https://medium.freecodecamp.org/how-you-can-improve-your-workflow-using-the-javascript-console-bdd7823a9472

by optimusrex • 8 years ago

63 13 8 years ago

medium.freecodecamp.org

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.

lowercased• 8 years ago

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.

kaycebasques2• 8 years ago

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.

arendtio3• 8 years ago

:D I just saw that I recommended your video ;-)

Great work man.

arendtio3• 8 years ago

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

ellyagg• 8 years ago

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

antonkm• 8 years ago

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

dahart• 8 years ago

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.

bitfhacker• 8 years ago

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.

arendtio3• 8 years ago

Last time I played with those console methods (about 2 years ago), I had to find out, that their cross-browser compatibility wasn't very good.

Does anybody know if that changed?

adamhepner• 8 years ago

I can definitely see how this is useful for enhancing testing and test reporting purposes. Very nice article.

jscholes• 8 years ago

A console is an interface intrinsically driven by text and data. So it's a shame to see yet another article where all code samples are, presumably, screenshots. Search engines can't index them, readers can't search through the page for them, and blind people can't access them with a screen reader.

Improve your workflow using the JavaScript console

Related Stories