Skip to main content

Debug with a method

Debugging is not about randomly changing code until the error disappears. This involves gradually reducing the space of possible causes.

The five-step loop​

  1. Reproduce the problem with stable steps.
  2. Observe the error message, status and affected query.
  3. Formulate a precise hypothesis.
  4. Modify a single variable to test this hypothesis.
  5. Check the fix and the absence of regression.

Browser tools​

  • Console: JavaScript errors and observed values;
  • Network: requests, HTTP codes, durations and responses;
  • Elements: HTML structure and calculated styles;
  • Sources: breakpoints and step-by-step execution;
  • Storage: cookies, local storage and session data.
function total(prix, quantite) {
  console.assert(quantite >= 0, "La quantité doit être positive");
  return prix * quantite;
}

A helpful message describes what was expected, what actually happened and the value that triggered the problem.

Quick challenge​

Take a page that does not load a resource. Use the Network tab to Identify the URL, HTTP code, and response. Then write a hypothesis that these three observations allow us to test.