February 1, 2023

JavaScript Debugging Course

So I've got two major projects this year that I have my eye on finishing and both have the potential to earn some income towards climbing mountains.

JavaScript Debugging Course

So I've got two major projects this year that I have my eye on finishing and both have the potential to earn some income towards climbing mountains. The first is a mountain weather phone app which I'm currently working up a prototype and the second is to do with JavaScript debugging.

Focusing on the second I was scanning Udemy for courses to help the people out in my organization work on the overall breadth of their knowledge and there are amazing courses on JavaScript, Typescript and React, as well as clean code and data structures, but a hole seems to lie with debugging.

I had supposed this would be a well travesed area as most every person coming out of university or out of a bootcamp and gets there first job lands in a world of some application that is huge, has legacy code, not all of it best practice, maybe some of it was best practice when the library the code interacts with was two versions earlier, but now its' brittle and difficult to trace bugs in the organically grown code. Tech debt hasn't really been addressed and its amazing that the huge code base actually works.

So I decided to pull together my thoughts on javascript debugging and pulled together a course for Udemy.

Here's my outline so far (obviously some work still to do, but hopefully a good start):

Section 1 - Introduction
 Introduction to the course
   What happens when you've completed that bootcamp and are now sat in front of a large scale application with years of legacy code, bugs, a large team and QA and users throwing bombs at you?
 What is debugging? Why do we need it?
   Legacy code
   Large applications
   Large teams
   Organically grown code
   Large lists of libraries
 Introduction to Javascript debugging tools
   IDEs
   Web app debugging tools
     Chrome Dev Tools (other browser tools are available)
     Firefox debugger
   Node.js Inspector (Node related)
   Network Tools
     Postman
   JSON Formatter/Validator
   Webpack stats data
   Performance tools
   Memory Tools
 Setting up the code for better debugging
   Prevention - Linting, Prettier, clean code
   Typing
   Tests
   Looking out for poorly named variables
   Looking out for functions that are too big

Section 2 - Debugging Concepts
 Debugging concepts
   Classes of defect
     Syntax or type errors
     Typos or other simple errors
     Implementation errors
     Logical errors
   Difficulties
     Symptoms might not point to the cause
     Symptoms are hard to reproduce
     Errors may be correlated
     Fixing an error might introduce new bugs
   Strategies
     Backtracking
     Binary search
     Problem simplification
     Cause elimination method
     program slicing
 Deciphering error messages
 Breakpoints
 Call stacks
 Logging
 Source maps
 The console

Section 3 - Debugging Code
 Debugging code
 The process
 Examples
   Need to cover the basics like missing closing brackets and not returning from a function
     double versus triple equals
     comparing objects and comparing primitives pitfalls
     Mutation with arrays and objects
   Need to look at intermediate issues
     Such as dealing with async issues
     Need to handle errors
     Perhaps dealing with api calls to systems you don't control
   Need to look at large scale messy issues such as failing libraries in Large scale apps
     Memory leaks
     Need some big scary ones here to work through

The aim would be to help ease the transition from bootcamp to working on a live project. That has to be worth a few bucks to someone.