Remy Sharp – The Art of Debugging #fronteers15

Personal debugging workflow
Don’t Write Bugs!
Although…
the opposite is true
the artifact of writing software is fixing bugs
gives you experience
no silver bullet to debugging
you need to pick and chose the right tools
debugging helps you to identify issues earlier
Disclaimer 1: Frameworks?
- Don’t have a project that required frameworks.
- Tools I use are not for frameworks
- For react: It brings it own debugging tool, because it has to as it is so abstract.
Disclaimer 2: I rarely do x-browser testing
- Current work is not requiring it, mostly doing JavaScript
The art of debugging (says wikipedia)
The parts to debugging
1. Replicate
  - Hardest and most important part
  - Bug report: Saving doesn’t work.
  - I know saving works.
  - But it doesn’t work for them.
  - Wontfix is no solution.
  - Litmus-Test to see if it happens at the URL that the user is using.
  - Likely: Series of event happens to the bug
  - Debugging is the end of the process, it should have been caught in tests, right?!
  - Caching and browser add-ons mess with pages
2. Isolate
  - Pair down to the simplest form where the bug occurs
3. Eliminate
  - That makes fixing the bug much easier
But what is if you have a Heisenburg bug? (A bug that changes its shape while you’re debugging.)
Clean the environment as much as possible
State
- All debugging comes out of state.
- Two types: passive state
  - What happens?
  - Literally looking how the canvas was built
  - Memory history.
- Interactive state
  - Fixing in the browser to not lose context
  - no back and forth to the editor and back
- The stack
Two methods:
- Inside out
  - When something changes and you have no idea where in the stack is the error introduced.
- Outside in
  - You know where the bug is and you go in and edit the file.
You can import your local source in the Chrome devtools debugger and link it to the running files
Timeline mode is also useful to find performance bugs
DOM breakpoints allow you to stop the script when an element changes and shows the code snippet
Debug memory leaks with profiles. The memory should be on the level where it started. Snapshot help
Red background in profiles: Garbage collection didn’t work out right.
There is no silver bullet!