--- title: The Ultimate JavaScript Debugging Cheat Sheet: 25 Shortcuts Every Developer Needs siteUrl: https://logzly.com/codecheatsheet author: codecheatsheet (Coding Cheat Sheet) date: 2026-06-23T08:05:25.911382 tags: [debugging, javascript, cheatsheet] url: https://logzly.com/codecheatsheet/the-ultimate-javascript-debugging-cheat-sheet-25-shortcuts-every-developer-needs --- If you’ve ever stared at a console full of “undefined” and felt the urge to pull your hair out, you’re not alone. Debugging JavaScript can feel like searching for a needle in a haystack, especially when you’re on a deadline. That’s why I put together this quick cheat sheet for the Coding Cheat Sheet blog. It’s a list of 25 shortcuts and tricks that will shave minutes—or even hours—off your debugging sessions. ## Why a Debugging Cheat Sheet Matters Right Now Most of us write code in a rush, then hit a bug that seems to appear out of nowhere. The usual “add a console.log” routine works, but it’s noisy and slow. Having a set of go‑to shortcuts lets you see what’s happening without cluttering your code. It also helps you keep a clean console, which makes spotting real problems easier. ## Quick Setup: Get Your Tools Ready Before diving into the shortcuts, make sure you have the right tools: - **Chrome DevTools** (or Firefox’s debugger – they’re pretty similar) - **VS Code** with the JavaScript Debugger extension (optional but handy) - A fresh terminal window for Node debugging All of these are free, and you probably already have them. The Coding Cheat Sheet blog always recommends using what you already know, so no extra installs needed. ## 1. Open the Debugger in One Click - **Chrome**: Press `Ctrl+Shift+I` (Windows/Linux) or `Cmd+Option+I` (Mac) → then `Ctrl+Shift+J` to jump straight to the Console tab. - **VS Code**: Hit `F5` to start debugging the current file. ## 2. Break on All Errors In Chrome DevTools, go to **Sources → Pause on exceptions** and click the pause icon. This stops execution at the exact line that throws an error. No more guessing. ## 3. Conditional Breakpoints Right‑click a line number in the Sources panel, choose **Add conditional breakpoint**, and type a condition like `i > 10`. The debugger will only stop when that condition is true. ## 4. Logpoints (No Code Change Needed) Instead of adding `console.log`, right‑click a line and select **Add logpoint**. Type the expression you want logged, e.g., `myVar`. The log appears in the console without touching your source file. ## 5. Step Over vs. Step Into - **Step Over (`F10`)** runs the current line and moves to the next. - **Step Into (`F11`)** dives into any function call on that line. Use them to control how deep you go into the call stack. ## 6. Watch Expressions In the **Watch** panel, add any variable or expression. It updates live as you step through code, so you can see how values change without adding extra logs. ## 7. Use the Call Stack The Call Stack panel shows the chain of function calls that led to the current line. Click any entry to jump back and inspect that context. ## 8. Blackboxing Libraries If a third‑party library is cluttering your stack trace, right‑click its source file and choose **Blackbox script**. The debugger will skip over it, letting you focus on your own code. ## 9. Live Edit In the Sources panel, you can edit JavaScript on the fly and press `Ctrl+S` (or `Cmd+S`) to apply changes without reloading the page. Great for quick tweaks. ## 10. Network Throttling Simulate slower connections by opening **Network → Throttling** and picking a preset like “Slow 3G”. This helps you catch timing bugs that only appear on bad networks. ## 11. Preserve Log Check **Preserve log** in the Console tab so messages don’t disappear after a page reload. Handy when the bug only shows up on the first load. ## 12. Filter Console Output Use the filter box at the top of the Console to show only warnings, errors, or messages that contain a specific word. No more scrolling through endless logs. ## 13. Debugging Async Code When dealing with `async/await`, set a breakpoint on the line after the `await`. The debugger will pause once the promise resolves, letting you see the result. ## 14. Use `debugger;` Statement Drop a `debugger;` line anywhere in your code. When the script runs, it will automatically pause at that spot—no need to set a breakpoint manually. ## 15. Inspect DOM Elements Right‑click an element in the page, choose **Inspect**, then go to the **Elements** panel. You can edit HTML or CSS live and see how it affects the page instantly. ## 16. Track Event Listeners In the Elements panel, click the **Event Listeners** tab to see which events are attached to a node. This is a lifesaver when a click isn’t firing as expected. ## 17. Memory Snapshots Open **Memory → Take snapshot** to see where objects are being held in memory. Use this to hunt down leaks that cause your app to slow down over time. ## 18. Use `console.table` Instead of a long list of `console.log` statements, use `console.table(myArray)` to get a neat grid view. It’s easier to read and spot anomalies. ## 19. Group Console Output Wrap related logs with `console.group('My Group')` and `console.groupEnd()`. The console will collapse them, keeping things tidy. ## 20. Source Maps for Minified Code If you’re debugging production code that’s been minified, make sure source maps are enabled. This maps the minified code back to your original files, so you can debug with the real variable names. ## 21. Keyboard Shortcuts Cheat Sheet | Action | Shortcut (Win/Linux) | Shortcut (Mac) | |--------|----------------------|----------------| | Open DevTools | Ctrl+Shift+I | Cmd+Option+I | | Open Console | Ctrl+Shift+J | Cmd+Option+J | | Pause/Resume | F8 | F8 | | Step Over | F10 | F10 | | Step Into | F11 | F11 | | Step Out | Shift+F11 | Shift+F11 | | Add Watch | Alt+W | Option+W | Print this table and stick it near your monitor. The Coding Cheat Sheet blog loves quick reference sheets. ## 22. Debug Node.js with `node --inspect` Run your script with `node --inspect-brk yourFile.js`. Then open Chrome and navigate to `chrome://inspect`. You’ll get a full DevTools experience for server‑side code. ## 23. Use `npm run dev` with Hot Reload If you’re using a bundler like Webpack, enable hot module replacement. It updates the page without a full reload, preserving the current state and making debugging smoother. ## 24. Turn Off Source Maps in Production When you ship code, disable source maps. It prevents users from seeing your original source and speeds up loading. The Coding Cheat Sheet blog always reminds readers to toggle this setting before deployment. ## 25. Keep a Debugging Journal It sounds old‑school, but writing down what you tried, what worked, and what didn’t can save you from repeating the same steps. A simple text file or a note in your IDE works fine. --- ## Putting It All Together The next time you hit a bug, resist the urge to sprinkle `console.log` everywhere. Open your DevTools, set a conditional breakpoint, add a watch, and let the debugger do the heavy lifting. Most of the time, the problem becomes obvious within a few steps. I’ve used these shortcuts on everything from tiny scripts to large React apps, and they’ve cut my debugging time dramatically. The Coding Cheat Sheet blog is all about giving you short, practical tips that you can start using right now. Keep this cheat sheet bookmarked, and you’ll find yourself solving problems faster, with less frustration. Happy debugging, and may your console be ever clean!