How to Check JavaScript in Chrome

Steps

Estimated time: 20-45 minutes

1. 1

   Open Chrome DevTools

   Open Chrome, load your test page, and press Ctrl+Shift+J (Windows/Linux) or Cmd+Option+J (macOS) to open DevTools. This gives you access to Console, Sources, Network, and more. The reason for this step is to establish the debugging environment you’ll use throughout the guide.

   Tip: Familiarize yourself with the DevTools layout; you’ll revisit each panel in later steps.
2. 2

   Inspect the Console for logs and errors

   Switch to the Console tab and look for error messages, warnings, and explicit logs from your code. Console.log statements are your first line of insight, showing current variables and flow. If there’s an error, note the message and stack trace.

   Tip: Filter messages by level (Errors, Warnings, Logs) to reduce noise.
3. 3

   Reload page and reproduce the issue

   Reload the page to reproduce the bug while keeping DevTools open. If you have hot module replacement or dynamic content, ensure you observe the exact moment the issue occurs. This step confirms the problem is reproducible in the current session.

   Tip: Enable Preserve log in the Console to keep messages after reload.
4. 4

   Locate the script in Sources

   Go to the Sources panel and browse the file tree to find the JavaScript file or module involved. You can use the search (Ctrl/Cmd+P) to jump to a filename quickly. Understanding where the code lives is critical for targeted debugging.

   Tip: If you’re unsure which file runs first, check the page’s HTML references and module imports.
5. 5

   Set breakpoints at key lines

   Click the line number to set a breakpoint or use conditional breakpoints for specific states (e.g., when a variable equals a value). Breakpoints pause execution so you can inspect variables, call stacks, and the location in code.

   Tip: Use conditional breakpoints to avoid pausing for every iteration, especially in loops.
6. 6

   Step through code to inspect state

   Use Step Over, Step Into, or Step Out to move through the code. Inspect variable values in the Scope panel and watch expressions as the code executes. This reveals how data changes over time.

   Tip: Add quick watch expressions for variables you want to monitor closely.
7. 7

   Pause on exceptions and network checks

   Enable Pause on Exceptions to automatically stop on thrown errors. Check the Network tab to see script loading, timing, and caching behavior. Look for failed requests or slow responses.

   Tip: Disable caching in Network settings during debugging to ensure fresh responses.
8. 8

   Use Snippets for quick experiments

   In Sources, use Snippets to run small, isolated JavaScript tests without altering your page. This helps validate hypotheses quickly and safely.

   Tip: Keep snippets small and well-named so you can reuse them later.
9. 9

   Review asynchronous flows

   Async code (promises, async/await) often causes subtle bugs. Use async stepping, Inspect the Promise state, and verify then/catch chains. If a bug relates to timing, add logs around awaits to understand sequencing.

   Tip: Consider using async/await with try/catch to simplify error handling.
10. 10

    Inspect network and cache impact

    If your script depends on external resources, verify that network requests complete and caching behavior doesn’t serve stale code. Tools like Network and Coverage help you assess impact and load order.

    Tip: Test in different network conditions to see how loading affects JS behavior.
11. 11

    Document findings and iterate

    Summarize the root cause, fix, and validation steps. Re-run through the debugging steps to confirm the solution resolves the issue and doesn’t introduce new bugs.

    Tip: Create a reusable checklist to speed up future debugging sessions.