Figuring out the root cause of a bug is often the hardest part of fixing it. Eric Lathrop will show how to use your browser's built-in developer tools to track down bugs so you can fix them.
git clone https://github.com/TwoScoopGames/Cluster-Junk.git
cd Cluster-Junk
git checkout ed47c187149d06104d3fa3eca7259b4efb9d2719
npm install
- Download attached file
cluster-junk-bugs.patch
git apply <cluster-junk-bugs.patch
npm start
- Open http://localhost:4000
- Open your browser's developer tools (Usually the F12 key on PCs)
- Complex app with complex problems.
- Not every bug is a crash
- Admiral Grace Hopper
- console.log / println
- interactive debugger
- Divide and Conquer
- Logging complex objects
Example: rain doesn't draw
- How does a computer know where to
return
? - Think of a stack of plates
Example: stacktrace.html Example: crash when you click to start game
Pause the program, and look at the variables.
- breakpoints
debugger;
- step in/over/out
- watch expressions
Example: waves should be offset every other row