{"post":{"slug":"how-to-debug-in-vscode-2026","title":"How to debug in VS Code in 2026","excerpt":"VS Code has one of the most capable debuggers available, yet most developers rely on console.log. This guide covers launch configs, breakpoints, and AI-assisted debugging in 2026.","category":"code","date":"April 15, 2026","author":"ByteLedger Team","content":"<span class=\"dropcap\">M</span>ost developers debug by inserting `console.log`, running the program, checking output, removing the log, and repeating. VS Code has a full interactive debugger that makes this workflow obsolete. In 2026, with AI assistance integrated directly into the debug cycle, knowing the debugger saves hours every week. Here is how to use it properly.\n\n## What changed in 2026\n\n- **GitHub Copilot in VS Code** can now analyze a stack trace in the Debug Console and suggest a fix inline — the \"Explain this error\" button appears directly in the debug panel.\n- **JavaScript Debug Terminal** (built-in since VS Code 1.6x) auto-attaches to any Node process started in the integrated terminal — no `launch.json` needed for basic cases.\n- **Remote debugging over SSH** is built into VS Code's remote extension; attaching to a process on a remote server now takes two clicks.\n- **Inline variable values** are displayed in the editor next to each line when paused, making the Variables panel optional for simple inspections.\n\n## Setting up launch.json\n\nPress `F5` or click Run → Add Configuration. For a Node/TypeScript project:\n\n```json\n// .vscode/launch.json\n{\n  \"version\": \"0.2.0\",\n  \"configurations\": [\n    {\n      \"name\": \"Launch Node\",\n      \"type\": \"node\",\n      \"request\": \"launch\",\n      \"program\": \"${workspaceFolder}/src/index.ts\",\n      \"runtimeArgs\": [\"-r\", \"ts-node/register\"],\n      \"env\": { \"NODE_ENV\": \"development\" },\n      \"sourceMaps\": true,\n      \"outFiles\": [\"${workspaceFolder}/dist/**/*.js\"]\n    },\n    {\n      \"name\": \"Attach to Process\",\n      \"type\": \"node\",\n      \"request\": \"attach\",\n      \"port\": 9229,\n      \"sourceMaps\": true,\n      \"outFiles\": [\"${workspaceFolder}/dist/**/*.js\"]\n    }\n  ]\n}\n```\n\nCommit `.vscode/launch.json` so every team member gets the same debug config.\n\n## Starting Node with the inspector\n\n```bash\n# Start with debugger listener\nnode --inspect src/index.js\n\n# Break on first line (useful for short scripts)\nnode --inspect-brk src/index.js\n```\n\nThen attach using the \"Attach to Process\" config above, or use VS Code's auto-attach feature (search \"Auto Attach\" in Command Palette and set to \"Smart\").\n\n## Breakpoint types\n\n| Type | How to set | Use case |\n| --- | --- | --- |\n| Line breakpoint | Click gutter | Pause at a specific line |\n| Conditional breakpoint | Right-click gutter → \"Add Conditional\" | Pause only when expression is true |\n| Hit count breakpoint | Right-click → \"Add Hit Count\" | Pause after N hits |\n| Logpoint | Right-click → \"Add Logpoint\" | Print message without pausing |\n| Exception breakpoint | Run panel → Breakpoints section | Pause on any thrown error |\n\nConditional breakpoint example — break only when an array has a specific user ID:\n\n```\nusers.some(u => u.id === 'abc-123')\n```\n\n## Logpoints\n\nA logpoint prints to the Debug Console without stopping execution and without modifying source:\n\nRight-click a gutter → \"Add Logpoint\" → enter: `User object: {JSON.stringify(user)}`\n\nThis is the replacement for `console.log` during debugging. Remove all logpoints at once with \"Remove All Breakpoints\" in the Run menu.\n\n## The Watch panel\n\nAdd expressions to Watch to evaluate them continuously while stepping:\n\n- `users.length`\n- `response.status`\n- `this.cache.size`\n\nThis is faster than hovering over variables and more persistent than the Variables panel.\n\n## Debugging inside Docker\n\nIn `docker-compose.yml`, expose port 9229:\n\n```yaml\nservices:\n  api:\n    command: node --inspect=0.0.0.0:9229 dist/index.js\n    ports:\n      - \"9229:9229\"\n```\n\nIn `launch.json`, add a remote attach config:\n\n```json\n{\n  \"name\": \"Attach to Docker\",\n  \"type\": \"node\",\n  \"request\": \"attach\",\n  \"address\": \"localhost\",\n  \"port\": 9229,\n  \"localRoot\": \"${workspaceFolder}\",\n  \"remoteRoot\": \"/app\",\n  \"sourceMaps\": true\n}\n```\n\n## Debugging React / Next.js\n\nFor browser-based React debugging, use the built-in browser debugger:\n\n```json\n{\n  \"name\": \"Launch Chrome\",\n  \"type\": \"chrome\",\n  \"request\": \"launch\",\n  \"url\": \"http://localhost:3000\",\n  \"webRoot\": \"${workspaceFolder}\",\n  \"sourceMaps\": true\n}\n```\n\nOr use the \"JavaScript Debug Terminal\" and start `npm run dev` inside it — VS Code auto-attaches to Node processes.\n\n## How to pick your approach\n\n1. **Short script or one-off?** → JavaScript Debug Terminal — no config needed.\n2. **Team project?** → Commit a `launch.json` with named configs for all common scenarios.\n3. **Running in Docker?** → Expose port 9229, use attach mode with `localRoot`/`remoteRoot` mapping.\n4. **Production bug?** → Enable `--inspect` on a staging instance, use remote SSH debugging.\n\n## Common mistakes\n\n**No source maps.** Without `sourceMaps: true` and correct `outFiles`, breakpoints in TypeScript source do not hit because the debugger sees compiled JS. Always set both.\n\n**Forgetting `--inspect` in Docker.** The default `node dist/index.js` command does not enable the inspector. Add `--inspect=0.0.0.0:9229` to the Docker command.\n\n**Not committing `launch.json`.** Every developer recreates configs independently. Commit the file.\n\n**Leaving breakpoints in code.** `debugger;` statements committed to source break in production if the inspector is accidentally enabled. Use VS Code breakpoints, which are never in source.\n\n## What to skip\n\n- **Debugging with `console.log` in a loop.** A conditional breakpoint is faster and does not produce thousands of log lines.\n- **The `debugger;` statement in committed code.** It has its uses in development but should never be committed.\n- **Restarting the process for each debug iteration.** The watch + hot reload (`ts-node-dev`, `nodemon`) combined with attach mode lets you debug without restarting.\n\n## FAQ\n\n**Does VS Code debug Python, Go, and other languages?**\nYes. Install the language-specific debug extension (Python, Go, C/C++). Each adds a debugger type to `launch.json`.\n\n**How do I share debug configs across a team?**\nCommit `.vscode/launch.json`. Add `.vscode/settings.json` to `.gitignore` for personal settings, but keep `launch.json` tracked.\n\n**Can I debug Jest tests?**\nYes. Add a config with `\"program\": \"${workspaceFolder}/node_modules/.bin/jest\"` and `\"args\": [\"--runInBand\"]`. The `--runInBand` flag prevents Jest from using worker threads, which do not support the inspector.\n\n**What is the difference between launch and attach?**\nLaunch starts a new process with the debugger attached from the start. Attach connects to an already-running process. Use launch for development, attach for Docker and remote servers.\n\n## Where to go next\n\n- [How to set up a dev environment in 2026](/blog/how-to-set-up-a-dev-environment-2026)\n- [How to debug a memory leak in 2026](/blog/how-to-debug-a-memory-leak-2026)\n- [How to set up pre-commit hooks in 2026](/blog/how-to-set-up-pre-commit-hooks-2026)","hue":311,"metaTitle":"How to Debug in VS Code in 2026: Breakpoints, Launch Configs","metaDescription":"Complete guide to debugging in VS Code in 2026. Covers launch.json, conditional breakpoints, logpoints, attach mode, and AI-assisted debugging workflows.","keywords":["how to debug in vscode 2026","vscode debugger 2026","vscode launch json configuration","conditional breakpoints vscode","vscode attach debugger","logpoints vscode","debug nodejs vscode","debug typescript vscode","vscode debug docker","vscode debugging tips 2026"],"tldr":["**Conditional breakpoints save hours** — break only when a variable equals a specific value instead of stepping through thousands of iterations.","**`launch.json` is worth writing once** — a committed config lets the whole team debug with F5 instead of `console.log`.","**Attach mode debugs running processes** — use it for Docker containers, remote servers, and already-running Node processes.","**Logpoints replace debug console.log** — they print to the Debug Console without modifying source code.","**Skip:** adding and removing `console.log` statements for every debugging session — logpoints and the watch panel do the same thing non-destructively."],"readTime":"4 min read","wordCount":954},"related":[{"slug":"how-to-debug-javascript-2026","title":"How to Debug JavaScript in 2026: A Practical Guide","excerpt":"Debugging JavaScript is a method, not a guessing game: read the error, find where it breaks, and test one change at a time. Here is the full workflow.","category":"code","date":"June 5, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":240},{"slug":"how-to-debug-code-2026","title":"How to debug code in 2026: a systematic method that actually works","excerpt":"Debugging is the skill that separates productive developers from frustrated ones. Here is the systematic approach that works in 2026, with or without AI.","category":"code","date":"April 15, 2026","author":"ByteLedger Team","readTime":"5 min read","hue":320},{"slug":"what-is-debugging-2026","title":"What is debugging in 2026? A plain-language guide for developers","excerpt":"Debugging is the process of finding and fixing defects in software. This guide explains what debugging really involves, a reliable method, and the tools that make it faster in 2026.","category":"code","date":"June 2, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":10}],"sameCategory":[{"slug":"bazel-build-explained-2026","title":"Bazel Explained: What Hermetic Builds Actually Cost","excerpt":"Bazel delivers reproducible, precisely cached builds and demands that you describe everything. Here is what you get, what it costs, and who should say no.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":145},{"slug":"graphql-federation-2026","title":"GraphQL Federation: One Graph, Many Teams","excerpt":"Federation composes independently-owned subgraphs into a single API. Here is what it solves, the operational cost it adds, and when a simpler gateway is enough.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":300},{"slug":"hermetic-builds-explained-2026","title":"Hermetic Builds Explained: Same Inputs, Same Output","excerpt":"A hermetic build depends only on declared inputs. Here is what that property gives you, the common leaks that break it, and how to move toward it incrementally.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":130},{"slug":"monorepo-tooling-compared-2026","title":"Monorepo Tooling Compared: What You Actually Need","excerpt":"Monorepo tools solve task orchestration and caching, not repository layout. Here is what each tier provides and how to tell when you have outgrown the simple option.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":150}],"newer":{"slug":"how-to-debug-code-2026","title":"How to debug code in 2026: a systematic method that actually works","excerpt":"Debugging is the skill that separates productive developers from frustrated ones. Here is the systematic approach that works in 2026, with or without AI.","category":"code","date":"April 15, 2026","author":"ByteLedger Team","readTime":"5 min read","hue":320},"older":{"slug":"how-to-delegate-tasks-2026","title":"How to delegate tasks in 2026: give work away without losing quality","excerpt":"Delegation is the leverage point most managers never fully use. Here is how to hand off work clearly in 2026 so things get done well without constant follow-up.","category":"guides","date":"April 15, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":280}}