/debugging

Primary LanguageJavaScriptOtherNOASSERTION

Debugging

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

Debugging Tactics

Contents

Getting Started

You will need NPM and nvm on your computer to study this material

Using a browser with good DevTools will make your life easier: Chromium, FireFox, Edge, Chrome

  1. Install or update the study-lenses package globally
    • $ npm install -g study-lenses (if you do not have it already)
    • $ npm update -g study-lenses (if you already have it installed)
    • if you're having trouble on Linux or Mac, try running $ sudo npm ...
  2. Clone this repository
    • $ git clone git@github.com:HackYourFutureBelgium/debugging.git
  3. cd into the repository
    • $ cd debugging
  4. Open the repository using study
    • $ study
  5. The material will open in your default browser, you're good to go!

If you have a windows computer and get this error:

  • ... /study.ps1 cannot be loaded because running scripts ...

follow the instructions in this StackOverflow answer, that should take care of it ; )

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.
  • Don't skip the examples! Understanding and experimenting with working code is a very effective way to learn programming.
  • Practice Pair Programming: two people, one computer.
  • Read the code out loud
  • Take a look through the HYF Study Tips for more inspiration

Priorities

If you can't finish all the material in this repository, that's expected! Anything you don't finish now will always be waiting for you to review when you need it. These 3 emoji's will help you prioritize your study time and to measure your progress:

  • 🥚 :egg: - Understanding this material is required, it covers the base skills you'll need for this module and the next. You do not need to finish all of them but should feel comfortable that you could with enough time.
  • 🐣 :hatching_chick: - Do your best to start this material. you don't need to master it or finish it but getting the main idea will be helpful for taking the next steps.
  • 🐥 :hatched_chick: - Have you finished all the 🥚's and started all the 🐣's? push yourself with these challenges.

Hashtags

There's sooo many examples and exercises in this repository, it's easy to forget of what you still need to finish or what you want to review again. Luckily VSCode is really good at searching through folders of code.

You can write hashtags in your comments while you're studying, then search for those hashtags later so you don't miss anything. Here's some ideas:

  • // #not-done, still a few blanks left - search for #not-done in VScode to find all the exercises you've started and not finished
  • // coercion is confusing, #review this again next week - search for #review to find the files you need to study again
  • ... anything goes! Find the hashtags that work for you

TOP

Learning Objectives

What can you expect to learn in this module?

expand/collapse

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
  • 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 becomes a process (creation phase), others are thrown during program execution when a line of code is reached (execution phase).

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.
    • Block Scope
  • Functions
    • () => {}:
    • Declaring vs. Calling
    • Arguments vs. Parameters
    • Return Values
    • Lexical scope
  • Control Flow
    • Conditionals
    • Loops
    • break, continue
  • prompt, alert, and confirm
    • Validating user input
    • Providing helpful feedback

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

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 process (a process is an active instance of a program)!
  2. Creation Phase: When the JavaScript interpreter first reads your instructions from the program. At this point it will load the program into memory (thus making a process) 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 a time, updating the (process) memory according to your instructions.

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 source files

TOP

Suggested Study

Helpful resources for this module

expand/collapse

hackyourfuture.github.io/study

Statements vs. Expressions

Debugging Tools

Tutorials

In this Repo

  • 🥚 ./strict-mode: a quick read and a couple examples. long story short: always use strict mode.
  • Skills: you don't need to finish all of the exercises in these folders, just enough to get comfortable with the processes
    • 🥚 ./stepping-through: Take a quick tour of the debugger and JS Tutor, two tools that will help you understand program memory and how JS follows your instructions one step at a time. Learn to use breakpoints and the debugger statement to pause your program on specific lines.
    • 🥚 ./fixing-errors: JavaScript errors! - get over the initial fear by learning to find and describe errors in your code. Then learn how to pause on errors in the debugger and to read callstack messages.
    • 🥚 ./logging: Learn how to create your own trace of a program's execution using console.log. Practice tracing different aspects of the same program's execution.
    • 🐣 ./fixing-bugs: Learn a structured approach to
    • 🐣 ./naming-variables: Code should be written for people first, computers second. Learn to give helpful names to your variables that describe what data they store and how they are used in your program.
  • Practice
    • 🐣 ./isolate: Practice the foundations of JavaScript in isolation. Learn to step through and predict your program's execution using the debugger and JS Tutor. These examples and exercises have no user input.
    • 🐣 ./integrate: Integrate all the skills and knowledge you've gained. You will read, debug, complete, and write full programs.
    • 🐣 ./using-functions: Learn how you can use functions to organize and and reuse your code.

Reference vs. Values

Arrays

Objects

More Examples and Exercises


TOP

Week 1

Use debuggers to step through your code one instruction at a time. Along the way you'll see how to visualize program memory, describe errors in your code, and start fixing bugs in a program.

expand/collapse

Before Class

You don't need to understand this material perfectly, it's just important you aren't seeing it for the first time in class on Sunday.

During Class

Before Break

Dig deeper into program execution and the debugger:

After Break

A method for finding and fixing bugs in your code

After Class

Learning to program with JavaScript is a marathon. This week you can keep working through your favorite tutorials, and be sure make time to get comfortable stepping through and predicting small programs in your debugger. Try starting with:

  • 🥚 ./strict-mode: a quick read
  • Skills: you're not expected to master these skills in one week, but starting to practice the them in week 1 will make everything else easier. Practicing a little bit every day is the best way to build a skill.
  • Practice
    • 🐣 ./isolate: through conditionals
      • you're not expected to master coercion or operator precedence this week, but you should start them
    • 🐣 ./integrate: through conditionals

Isolate goes in depth on type coercion and primitive operators. You aren't expected to master these topics in one week, it will take lots of practice for this to sink in.

Study together! Working in small groups and taking turns to predict and explain what is happening with the code is a nice way to spend a few hours. Teaching is a great way to learn.

Your class repository has a folder called /javascript and a project board for tracking your issues & PRs. Over the next four weeks you and your classmates will start your own JS Study Guide. This is just the start! Learning JS is a never-ending story, you will keep building this study guide for the rest of your time at HYF.


TOP

Week 2

  • Naming Variables
  • Numbers and NaN
  • for loops
expand/collapse

Before Class

The main topics for this Sunday will be naming variables and writing programs. To come prepared you should study up on these JS language features:

During Class

Before Break

After Break

  • ./integrate:
    • numbers/repeat-string
    • maybe also numbers/repeat-characters

After Class

Keep working your way through your favorite tutorials.

Try make at least one contribution per week to the class /javascript study guide. It doesn't need to be anything fancy! Reviewing a PR or adding a new link is helpful.


TOP

Week 3

Learn to trace function execution, and to use function in small programs.

expand/collapse

Before Class

The examples and exercises in this repository all use () => {} functions, while many resources online cover function functions. This repository focuses on arrow functions because:

  • the syntax is cleaner and less distracting to read
  • this and arguments are less distracting with arrow functions (more on those things later)
  • function expressions are easier to study in the debugger since they are not hoisted

Prep work:

During Class

Before Break

  • ./isolate:
    • /documenting-functions
    • /passing-tests

After Break

After Class

Keep working your way through your favorite tutorials and the exercises in this repository. If you haven't already, take a look at:

Try make at least one contribution per week to the class /javascript study guide. It doesn't need to be anything fancy! Reviewing a PR or adding a new link is helpful.


TOP

Week 4

Reference vs. Value! This week you will learn about arrays, objects and side-effects.

expand/collapse

Before Class

This week's class will focus almost entirely on how arrays/objects are stored in memory, and how to use them as arguments to functions. Take a look through the examples in these folders to be ready for class:

During Class

Before Break

After Break

After Class

  • 🥚 ./isolate: through Side Effects. Reference vs. Value and Side Effects are another "invisible" thing about JS, you can't see it in the source code! You need to understand how JS program memory works and to learn how debugging tools can help you see this
  • 🐣 ./fixing-bugs: Arrays & Objects
  • 🐣 ./integrate: Arrays
  • 🐣 ./using-functions: Avoid Side-Effects

Keep working through your favorite tutorials and the exercises in this repository. It's important to come prepared for the first Sunday of Behavior, Strategy, Implementation so be sure to make time for the prep work!

Try make at least one contribution per week to the class /javascript study guide. It doesn't need to be anything fancy! Reviewing a PR or adding a new link is helpful.


TOP

Class Recordings

  • Students: Here you can find recordings of this module from past classes. Enjoy!
  • Coaches: When sending your PR's with links please ...
    • Indicate which class you were teaching
    • Which week it was (if the module is more than 1 week)
    • Give your name
    • and a helpful description

class-9-10

Maël, Unmesh, Evan

  1. Week 1:
    1. Functions, Primitive Types, Coercion
    2. onclick, Prompt, Alert, Confirm
    3. Wrap-up & Homework
  2. Week 2:
    1. for and while loops
    2. Shared Script Variables
  3. Process week:

Class-11-12

Maël, Nawang, Thibault

  1. Week 1:
  2. Week 2:
  3. Week 3:

Class-13-14

Maël, Yildiray, Razvan, Emilien

  1. Week 1:

  2. Week 2:

    • Part 1 hasn't been recorded due to a technical issue. Our apologies.
    • Part 2

  3. Week 3:

  4. Week 4:

Class 15

Maël, Yildiray, Razvan, Unmesh

  1. Week 1
  2. Week 2
  3. Week 3