Foundations Refresher: How to approach debugging

[MinoshkaBocarro]

I was wondering if it might be good to have some sort of a refresher of the approach to debugging perhaps just before the calculator project. This is where I've seen lots of people start to struggle with things not working but with no idea why they aren't.

There is the 'Understanding Errors' lesson but for cases where there's no concrete error message and you have to figure out the error source? It can be difficult to know where/how to begin looking. The 'Debug Javascript' devtools tutorial is present in the 'JavaScript Developer Tools' lesson but from my experience, I didn't really get much out of it. I was just mechanically following it without actually extracting the useful steps for later use. Perhaps a summary of the relevant broad steps would be useful. Something like (from the tutorial):

1. Reproduce the bug.
2. Pause the code with a breakpoint
3. Step through the code
4. Check variable values

I've kind of developed my own process from helping people debug their code because having a low level of knowledge about their variables actually helps a lot. It goes something like hypothesise where the error might be -> step through it, monitoring scope. In particular look at info passed from arguments to parameters in relevant functions. If the error is not there then console.log relevant variable definitions and manipulations -> add breakpoints at the start of the definitions -> step through code, monitoring changes in key variables in watch.

Perhaps utilising this experience by presenting them with some sort of not obviously broken code and tasking them to figure out the source of the error, helped by the outlined steps, would be helpful? They can be given a walkthrough after they've had a crack at it instead of hand holding them through the debugging like the tutorial. There was a discussion here that is adjacent to this suggestion, #27997, though slightly more advanced then I think it should be for foundations. Fix the bug exercises were mentioned but I couldn't find them from a quick google search but I might have missed them.

I'm in two minds about it because it is a process that you develop and personalise with time and experience and a section cannot possibly cover all the approaches and of course they can always ask questions in discord but at the same time seeing people be completely frustrated with their code or not even giving a shot at figuring out is tough.

[EmmaBeansHare]

Thank you for opening this discussion @MinoshkaBocarro!

I understand where you're coming from, and I think putting thought into how we could enhance the teaching of debugging would be a very good idea.

Debugging definitely is a skill that needs practice and personalisation. However, giving a user a sort of "kick start" in the process of developing that skill would be a good idea. Especially, as you've said, before the Calculator project, which usually requires a user to do quite a bit of debugging.

The Debug JavaScript link in the JavaScript Developer Tools lesson you mentioned does go through the process of debugging, but I think it's a bit too cluttered and instruction-filled for a user to actually have a proper overview of it and understand how the process is seen through the eyes of a more experienced developer.

In my opinion, adding some sort of lesson or reminder which would be structured in a way similar to the Problem Solving lesson, which covers the steps of planning and solving a given problem, could prove useful.

Perhaps giving the user a guide of our own would help them understand, and motivate them into practicing given skill, especially when they can see for themselves, in our Discord server, how we help other people debug their code.

Overall a good observation you've made.