Debugging Strategy

README.md

Debugging Strategry

• Resource: Debugging CSS Article

Stage 1: Identify Issues

• Document everything that's broken
• Document hypotheses of why they are broken (be specific)
• Document any information that you think is relevant (line numbers, files, classes etc)

Stage 2: Code Audit

• Step through the code and add notes to what is happening (be as detailed as is necessary)
  • identify lines of code relevant to the problem (via your hypotheses)
  • identify lines of code that you aren't sure what they are doing
• Inspect applied CSS with Devtools
  1. investigate elements that are using styles identified in the walk through
  2. investigate classes/elements that you don't know what they are doing
  3. investigate the broken elements
• Add notes to hypotheses
  • have you found information supporting or conflicting with your theories of why things are broken?
    • write them down
    • update your hypotheses if necessary

Stage 3: Plan of Attack

• Outline a plan to solve each bug
  • this will be a mixture of code organization and values
  • think through what classes need to change and why
  • essentially write a brief step by step on what you're going to do
  • potentially make a codepen for minimal scatch experiments
• Also account for what is not in scope

Stage 4: Bugfix

• Probably make a branch (but not necessary)
• Go through the steps that you outlined
  • make minor adjustments when necessary but avoid straying too far
• Evaluate if it did fix the issue
  • if it did not, did you get closer or further away and in what regards?

Stage 5: Retrospective

• What worked? what didn't?
• If it isn't fixed, outline why
• Come up with different hypotheses if necessary
• take a break that clears your head before trying again