Vite Dev Server Sourcemaps Don't Work or Point to Wrong Lines/Files in VScode Debugger

Quick Fix: Set "sourceMapPathOverrides" in "launch.json" for Chrome or "pathMappings" for Firefox to map webpack paths to source file paths and use the "vite-plugin-sentry" plugin to include source maps for Sentry.

The Solutions:

Solution 1: Update launch.json File

The sourcemap issue can be resolved by adding a “pathMappings” configuration to the “launch.json” file. This tells the debugger to locate source files in the same directory as the transformed files. Here’s the updated configuration:

{
  // ...existing configurations...
  "configurations": [
    {
      // ...existing Chrome configuration...
      "pathMappings": [
        {
          "url": "http://localhost:3000",
          "path": "${workspaceFolder}"
        }
      ]
    },
    {
      // ...existing Firefox configuration...
      "pathMappings": [
        {
          "url": "http://localhost:3000",
          "path": "${workspaceFolder}"
        }
      ]
    }
  ]
}

Q&A

How to fix Vite Dev Server Sourcemaps not working?

—

Add "pathMappings" to your launch.json file.

Can you fix Vite Dev Server incorrect line numbers in stack traces?

—

Update Vite and related dependencies.

What to do when Breakpoints don’t trigger at all on Vite Dev Server?

—

Check Vite build configuration for proper sourcemaps generation.

Video Explanation:

The following video, titled "Webpack 5 Crash Course | Frontend Development Setup - YouTube", provides additional insights and in-depth exploration related to the topics discussed in this post.

Webpack setup Webpack Dev Server HTML Webpack Plugin Sass Compiling Babel Transpiling Asset Resource Loaders Analyzer Plugin Source Maps ...

Vite Dev Server Sourcemaps Don't Work or Point to Wrong Lines/Files in VScode Debugger – Vite