Skip to content
This repository was archived by the owner on Apr 18, 2025. It is now read-only.
This repository was archived by the owner on Apr 18, 2025. It is now read-only.

[TECH ED] Watch the VSCode Debugger Video #166

Open
@SallyMcGrath

Description

@SallyMcGrath

Link to the coursework

https://code.visualstudio.com/docs/introvideos/debugging

Why are we doing this?

🧰 We are building a toolkit to help us write great software. In our toolkit we are collecting skills with:

📝 Specifications, like user stories, acceptance criteria, and Given/When/Then
Help us understand what to write and check we've written the right thing.

🧪 Tests, like unit tests and assertions
Help us break down our problems and check our solutions work even when we change things.

💬 Asking questions
Helps us formally reason through our problems and identify gaps in our mental models.

🤖Playing computer
Helps us reason about code with a mental model.

🦺 Audits, like Lighthouse
Help us identify performance and quality improvements we can make to our code.

And now we can add debuggers to our toolkit.

🐛 Debuggers are tools that help us find and fix problems, or "bugs", in our JavaScript code. They let us step through our code line-by-line while it runs to see what is happening. This helps us find the place where our mental model of the code is different from our implementation. Your browser has a debugger and so does VSCode.

Key reasons we use debuggers:

  • See what's happening inside functions
  • Check if variables have expected values
  • Pause execution and step through slowly
  • Find exactly where mistakes happen

JavaScript debuggers give control over execution flow to methodically test and fix bugs. Watch the first four minutes of the video and then explore the VSCode Debugger on your machine.

Maximum time in hours

.5

How to get help

AI can help you here. Code along with AI so it has the context and ask it when you get stuck. Use this starting prompt:

Act as a friendly, supportive, knowledgeable programming mentor. I am learning the debugger in VSCode.Talk me through the interface step by step. Provide a simple example of a Node script with a bug in it and walk me through finding the bug by setting breakpoints with the debugger. Don't tell me what the bug is. When I get stuck, answer my questions in CEFR B2 English meant for an adult professional speaking in a second language. When I ask for hints, give me useful pointers. Say okee dokee if you understand and begin your walkthrough.

Remember to use careful prompting when you don't understand, so you get real learning out of the exchange. Say things like:

The execution is paused and it shows me that i is undefined and this is undefined, but I don't understand why it says that. Can you explain this to me?

And remember you should always ask your friendly humans in Slack when you get really stuck. This coursework will be set again in later modules, so if it's beyond you right now, you'll pick it up later.

Metadata

Metadata

Assignees

No one assigned

    Labels

    🎯 Topic CommunicationReading, writing, speaking, and listening in English; expressing our ideas🎯 Topic RequirementsInterpreting requirements with precision and accuracy🎯 Topic TestingIt's important that software works and that people can use it🏝️ Priority StretchDo this once mandatory and key work is done📅 JS1📅 Week 4🦔 Size TinyLess than 30 minutes

    Type

    No type

    Projects

    Status

    📋 Backlog

    Status

    No status

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions