Angular8项目Chrome调试失效求助：断点命中但无变量值显示

Hey there, let's tackle this annoying debugging problem you're facing—breakpoints hit fine but you can't see variable values on hover. I've dealt with similar quirks using Angular + VS Code + Chrome, so here are some practical fixes to try:

1. Refresh or Update Your Debugger Extension #

First up, check your VS Code debugger extension. If you're using the old Debugger for Chrome (or the newer built-in JavaScript Debugger), sometimes glitches creep in:

• Open the Extensions panel (Ctrl+Shift+X / Cmd+Shift+X)
• Find the debugger extension, click Disable, restart VS Code, then re-enable it
• If there's an update available, install it immediately—updates often fix compatibility bugs

2. Verify Your launch.json Configuration #

A misconfigured debug setup can break variable inspection. Double-check your .vscode/launch.json file:

• Ensure sourceMaps is set to true (critical for linking compiled JS to your TypeScript code)
• Confirm webRoot points to your project root (like "webRoot": "${workspaceFolder}")
• Make sure the url matches your Angular dev server address (usually http://localhost:4200)

Here's a working example snippet:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome for Angular",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

3. Clear Caches & Restart Everything #

Sometimes stale caches or stuck processes mess up the debugger-browser connection:

• Close all Chrome windows, then open Task Manager (Windows) / Activity Monitor (Mac) and end all Chrome-related processes
• Stop your Angular dev server (Ctrl+C in the terminal), restart it with ng serve (try adding --source-map to force source map generation)
• Restart VS Code completely—don't just close the window, quit the app entirely

You can also reset Chrome DevTools to default: Open DevTools → click the three-dot menu → Restore defaults and reload

4. Check Angular's Source Map Settings #

Make sure Angular is generating source maps during builds:

• Open your angular.json file
• Under projects → [your-project-name] → architect → build → options, confirm "sourceMap": true
• If it was false, change it, restart the dev server, and try debugging again

5. Rule Out Chrome Extension Conflicts #

Third-party Chrome extensions can interfere with the debugger. Test in Incognito Mode (Chrome's File menu → New Incognito Window), then start your debug session. If hover works here, one of your extensions is the culprit—disable them one by one until you find the conflicting one.

6. Restart the Debug Session #

Sometimes the debug session itself gets into a weird state. Stop the current debug session (click the red square in the Debug panel), then click the green play button to restart it. You can also use the Restart button in the debug toolbar to reload the session without closing everything.

内容的提问来源于stack exchange，提问作者ArpitAJ