VSCode搭配Chrome调试Vue项目（基于Vue官方调试方案）的异常问题求助

阿华AIGC实验室

2026-4-29

Troubleshooting Vue.js Debugging in VSCode: Slow Old Debugger & Misplaced Breakpoints in New Debugger

I’ve dug through your configuration and the symptoms you’re describing—this is a classic sourcemap alignment issue combined with debugger performance quirks. Let’s walk through targeted fixes to get both debuggers working properly:

Quick Recap of Your Pain Points

Old JavaScript Debugger: Breaks hit reliably but take minutes to trigger, and VSCode locks up completely during the wait
Preview JavaScript Debugger: Breaks fire instantly but land in the wrong line/location, and you can’t set breakpoints in many parts of your code
You’ve already tested every sourceMapPathOverrides combo, tweaked Babel/Webpack/VSCode settings, and confirmed sourcemaps work with the old debugger—so the issue is about how the new debugger interprets those maps

1. Fix the Preview Debugger’s Sourcemap Mismatch

The preview debugger is way stricter about sourcemap path matching than the old one. Let’s update your launch.json to match exactly how Vue CLI’s Webpack emits sourcemap paths:

"sourceMapPathOverrides": {
  "webpack:///./src/*": "${webRoot}/src/*",
  "webpack:///node_modules/*": "${webRoot}/node_modules/*",
  "webpack:///*": "${webRoot}/*"
}

The ./src prefix is key here—Vue CLI’s Webpack config adds this to sourcemap paths, so the preview debugger needs an exact match
Always list more specific paths first (like ./src) before broader ones (like *)

Double-check that webRoot is set correctly: if your src folder lives directly in your workspace root, ${workspaceFolder} is perfect. If not, adjust it to ${workspaceFolder}/your-project-subfolder.

2. Speed Up the Old Debugger (Fix the Lag)

Your current devtool: 'source-map' produces high-quality maps but is extremely slow for the old debugger. Switch to a faster, debug-friendly option in vue.config.js:

configureWebpack: {
  devtool: 'eval-cheap-module-source-map', // Balances speed and line-number accuracy
  // ... keep your existing plugins and settings
}

eval-cheap-module-source-map is the sweet spot for development: it’s fast enough to avoid the lag, and it preserves line numbers so breakpoints hit the right place
Avoid eval (loses line numbers) or inline-source-map (bloats your bundle)

3. Clean Up Redundant Configs

Let’s strip out settings that might be causing conflicts:

Remove "sourceMap": true from jsconfig.json—Webpack and Babel handle sourcemap generation, so this is redundant and can confuse VSCode

Simplify your Babel config to ensure it’s not fighting with Vue CLI’s defaults:

module.exports = {
  presets: ['@vue/app'],
  env: {
    development: {
      sourceMaps: true,
      retainLines: true // Critical for keeping breakpoint lines aligned
    }
  }
};

4. Tweak VSCode Debugger Settings

For the preview debugger, fix the "can’t set breakpoint" issue and reduce misalignment:

Open VSCode settings (Ctrl+,), search for JavaScript > Debug: Allow Breakpoints Everywhere and enable it
Disable any entries under JavaScript > Debug: Skip Files that might be blocking your source files (like auto-excluded node_modules if you need to debug them)
Make sure JavaScript > Debug: Use Preview is enabled (you already have this, but double-check)

5. Resolve Webpack Config Conflicts

You have both a standalone webpack.config.js and vue.config.js—Vue CLI prioritizes vue.config.js, so the standalone file might be causing unexpected behavior. Try:

Removing the standalone webpack.config.js (all your custom rules can go into vue.config.js)

If you need to add Babel rules, use chainWebpack in vue.config.js instead of a separate file:

chainWebpack: config => {
  // ... your existing vue-loader tweaks
  config.module
    .rule('js')
    .exclude.add(/node_modules|bower_components/)
    .end()
    .use('babel-loader')
    .loader('babel-loader')
    .options({
      presets: ['@vue/app']
    });
}