Tests catch regressions and document behavior. Unit tests cover pure logic (utils, hooks); integration tests cover components with their dependencies; E2E tests cover key user flows (login, checkout) in a real browser.

Focus on what matters most: critical paths, fragile logic, and areas you change often. Avoid testing implementation details; test behavior so refactors do not break tests unnecessarily.

console.log and debugger are quick ways to inspect state. DevTools Sources (or Debugger) lets you set breakpoints, step through code, and inspect variables. Network shows every request, status, and timing; Elements shows the DOM and computed styles.

When a bug is hard to reproduce, isolate it: strip the page down to the smallest case that still shows the issue. Check async timing, dependency arrays in effects, and whether state updates are immutable.

State not updating? In React, ensure you are not mutating state; use immutable updates. Check dependency arrays in useEffect/useMemo so they include every value the effect uses. CORS or 404? Verify the request URL and that the server sends the right headers.

Layout shift? Reserve space for images and dynamic content (aspect-ratio, min-height, skeleton). [MDN – Testing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started).