Commit No Bug
Published on

Use VS Code's Source Tab to Hunt Bugs Like a Detective

Authors
A person in a dimly lit room holds a magnifying glass up to a large monitor filled with code, studying highlighted lines while pinned notes and a corkboard are visible on the wall, conveying a detective-like inspection of software.

You already know that sinking feeling - something broke, you're not sure what you changed, and git log is giving you a wall of commit messages that don't help. There's a faster way, and it's been sitting in your sidebar the whole time.

VS Code's source control tab has a built-in diff viewer that lets you compare your current working file against any previous commit. Once you start using it for debugging, it's hard to go back. I wish I’d found out about it and how effective it is much earlier :(.

How to get there

Open the Source Control panel (Ctrl+Shift+G or Cmd+Shift+G for macOS) and see the Graph panel. Click any commit, and you'll see all the files that changed in it. Click a file and VS Code opens a side-by-side diff: the old version on the left, your current file on the right. Additions in green, removals in red. That's it.

Benefits of the VS Code diff

The VS Code diff viewer gives you:

  • Full syntax highlighting on both sides
  • The ability to compare against any commit, not just the last one

The ability to compare against any commit is the important one. The bug could have crept in a few commits ago. You can jump straight to the commit before things broke, diff your current file against it, and immediately see every line that changed in between.

The workflow in practice

Say something is broken and you're not sure when it started. The approach that works:

  1. Open Source Control → Graph and select the file you suspect
  2. Find a commit you know was working - not necessarily the last one, but a stable point
  3. Click it, open the diff
  4. Scan the right side for behavior‑changing edits.

The diff view makes it very hard to miss something. A removed guard clause, a renamed variable, or a moved effect dependency - things that are easy to overlook - jump out when highlighted next to the version that worked.

This is especially effective for bugs that feel intermittent or mysterious. Nine times out of ten, side-by-side with a working commit, the cause is obvious within thirty seconds.

Conclusion

No extensions, no setup - open the Source Control tab first. Before sprinkling console.log everywhere, diff against a known good commit; the bug is often obvious within a minute.

Found this helpful? Please share it with someone who also might find it helpful. Would you like more posts from me? Subscribe to the newsletter. Got questions? Send an email to commitnobug@outlook.com.