Debugging

If debugging is the process of removing software bugs, then programming must be the process of putting them in.

• Donald Knuth

Contents

• Module Summary
• Learning Objectives
• Study Tips
• Module Projects
• Weekly Details:
  • Week 1: Assignments, Lesson Plan
  • Week 2: Assignments, Lesson Plan
• Study Materials:
  • Quiz
  • Isolate - examples and exercises
  • Integrate - projects to study
  • Class Recordings
  • Study Links (external)
• Curriculum (external)
• HYF Home (external)

---

Module Summary

Software Development is a many layered skill. One simple way to break it down is to think of these layers:

1. Source Code: The basic literacy of programming
   • Learning the key words (vocabulary) and syntax (grammar) for your programming language
   • Being able to read your code out loud, or write the code that someone else is describing
   • Fixing syntax errors that occur when you try to run your code
   • Writing code that does not have syntax errors, and spotting syntax errors when you do

   • The Debugging Module will focus on these skills

2. Machine Instructions: The basic mechanics of programming
   • Understanding the life-cycle of your program
   • Understand how the computer will interpret your source code to create a running program
   • Understand what about your code matters to the computer, and what matters to people
   • Predicting which lines of code will be executed in which order
   • Predicting how each line of code will change what is stored in program memory
   • Reading error messages & callstacks to fix fix semantic errors that occur when you run your code

   • The Debugging Module will focus on these skills

3. Problem Solving & Algorithms: Breaking down large problems to be solved in small steps
   • Understanding a coding challenge and being able to break it down in different ways
   • Determining which solution strategies are correct for which types of problems
   • Understanding how test cases are used to describe your solution strategy
   • Identifying the best language feature to use with your strategy
   • Reading test cases to understand how code is supposed to behave
   • Using Test Cases to structure your solution design process (Test Driven Development)
   • Identifying and isolating mistakes in your code by reading failing test cases
   • Demonstrating your code does what you think it does by passing test cases

   • The Testing Module will focus on these skills

4. Software Design: Organizing smaller pieces of code into full software solutions
   • All in good time ;)

   • Every other module starting with Separation of Concerns will focus on these skills

TOP

---

Learning Objectives

Programming Skills

• Learning from Code
  • Reading & understanding source code
  • Making small, incremental experiments
  • Copying & modifying others' code
• Tracing Program Execution
  • Stepping through code with JS Tutor, DevTools & VSC debugger
  • Tracing values manually with pencil & paper
  • Using the debugger statement & break points to explore your code
• Using console.assert for small inline tests
  • Learn to predict what will happen using console.assert
  • Instead of only describing what did happen using console.log
• Debugging:
  • Bugs are when you don't understand what your code is doing, not when your code doesn't understand what you want it to do! The computer is always right :)
  • Identify the line(s) of code that are not doing what you expect
  • Find several other ways of writing that line
  • Replace with the one that works and that you understand best

Isolating JavaScript

• Primitives Types & Strict Comparison
  • types: find the type of a primitive using typeof
  • strict comparison: compare the type and value of two primitives using === & !==
  • explicit coercion: casting between primitive types
• Explicit Type Coercion
  • Boolean, String, Number
• Operators & Comparisons
  • ===, !==
  • isNaN and Number.isNaN
  • >, <, >=, <=
  • &&, ||, ??, !
  • x++, ++x, x--, --x
  • +, *, /, -, %
  • x ? y : z
• Variables:
  • let & const
  • Declaration, Assignment & Re-Assignment.
• Functions:
  • Declaring vs. Calling
  • Arguments vs. Parameters
  • Return Values
  • Lexical scope
  • function () {} and () => {}
• Control Flow
  • Conditionals
  • Loops
• prompt, alert, and confirm
  • Reading different types from users
• Statements vs. Expressions
• JS Program Life-Cycle:
  1. Source code: The .js text file you write. These are just instructions saved as text in your computer, not a live program!
  2. Creation Phase: When the JavaScript interpreter first reads your instructions. At this point it will prepare the program memory and check for some types of errors.
  3. Execution Phase: This is the real deal! The JavaScript interpreter will now step through your instructions one line at at time, updating program memory according to your instructions.
• Errors:
  • Syntax vs. Semantic: Some errors happen because you wrote JavaScript that the interpreter couldn't interpret (syntax), other errors happen when you try to do something that isn't allowed (semantic).
  • Creation vs. Execution: Some errors are thrown before the program actually starts (creation phase), others are thrown during program execution when a line of code is reached (execution phase).

Integrating JavaScript

• Document Life-Cycle
  • <head>: Scripts & styles are loaded top to bottom, before the <body>
  • <body>: Everything is executed/loaded top to bottom
• Event-Driven Programming (Handling user input)
  • HTML onclick attribute
  • well-organized click handlers
  • separate functions for logic and click handling

Debugging Skills

• console.log
  • Printing values to understand what did happen in your code
  • Always print the type AND the value
• console.assert
  • Asserting values to predict what will happen in your code
  • Practice how to use all comparison operators to assert values in memory
• Stepping through code execution
  • Using debugging tools to execute your code one step at a time
  • Predict which line of code will execute next
  • Explain and understand how each line of code changes what is in memory
  • Predict what will change in memory after each step of execution
• The debugger statement
• Using professional JS debugging tools
  • Browser Debugger
  • VSCode Debugger
• Using learning-focused debugging tools
  • JS Tutor

TOP

---

Study Tips

• Don't rush, understand! Programming is hard.
  • The examples and exercises will still be there to study later.
  • It's better to fail tests slowly and learn from your mistakes than to pass tests quickly and not understand why.
• Practice Pair Programming: two people, one computer.
• Don't skip the examples! Understanding and experimenting with working code is a very effective way to learn programming.
• Take a look through the Learning From Code guide for more study tips

TOP

---

Module Projects

TOP