JavaScript · Intermediate level

Intermediate level · Module 5 of 6 · 13 guided hours

Debugging and Code Quality in JavaScript

Debug efficiently with DevTools, keep code consistent with ESLint and Prettier, and handle errors with clear custom error types.

Learning objectives

  • Debug JavaScript with breakpoints, watches and the call stack
  • Configure and use ESLint and Prettier
  • Design clear error handling with custom errors

Topics

  • Sources panel and breakpoints
  • conditional breakpoints and logpoints
  • async stack traces
  • npm and package.json
  • ESLint and Prettier
  • custom Error classes

Lessons

  1. Lesson 1 Debugging with DevTools

    Use breakpoints, stepping, watches, conditional breakpoints and logpoints to find bugs quickly.

    breakpointstep over / into / outwatch and scopeconditional breakpoint and logpoint

  2. Lesson 2 Linting and Formatting

    Use npm to add ESLint and Prettier to a project, so common mistakes are caught and code style is consistent.

    npm and package.jsondevDependenciesESLint rulesPrettier

  3. Lesson 3 Designing Error Handling

    Create custom error types, decide where errors are caught and show users helpful messages while logging details for developers.

    Error subclasserror.causewhere to catchuser vs developer messages

Practical activity

Find four seeded bugs in a small app using DevTools, then set up ESLint and Prettier and fix every reported problem.

Expected outcomes

  • Systematic debugging habits
  • Consistent, lint-clean code

Assessment

Practical: locate seeded bugs and explain the evidence found in DevTools; submit a project with a lint configuration and zero errors.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.