JavaScript Debugging using the Browser Dev Tools

By Eric Lathrop on

This is a presentation I gave at JSLou on Wednesday, August 17th, 2016.

Figuring out the root cause of a bug is often the hardest part of fixing it. I will show how to use your browser's built-in developer tools to track down bugs so you can fix them.

How to run the examples:

  1. git clone https://github.com/TwoScoopGames/Cluster-Junk.git
  2. cd Cluster-Junk
  3. git checkout ed47c187149d06104d3fa3eca7259b4efb9d2719
  4. npm install
  5. Download file cluster-junk-bugs.patch
  6. git apply <cluster-junk-bugs.patch
  7. npm start
  8. Open http://localhost:4000
  9. Open your browser's developer tools (Usually the F12 key on PCs)

So you have a problem...

Approaches

  1. console.log / println
  2. interactive debugger

console.log

Stack Traces

Interactive Debugging

Pause the program, and look at the variables.