How to set breakpoints on js files when working with vue / vite / VSCode / Chrome?

Question

I have various issues with breakpoints using Vue, Vite and VS Code. I have read other questions/answers, including this one and this one, but have met with no success.

I can set breakpoints in .vue files easily. But with .js files in the same project I can't set a bp until after I have stepped into that file from a .vue file. What's worse, after I have made a code change I cannot set a bp in a .js file at all, even after stepping into it, until I stop and restart the Vite server.

All the above is with the Chrome browser. Firefox debugging works, up to a point. The problem is that it's impossible to see the contents of objects , I just get

Proxy {<target>: Object, <handler>: Object}

when hovering over an object variable, whereas in Chrome I get to expand down into the object members.

My launch.json settings below; I haven't been able to find the pathmappings equivalent for Chrome.

{
"version": "0.2.0",
"configurations": [
{ 
 "type": "firefox",
 "request": "launch",
 "name": "Launch FireFox localhost",
 "url": "http://localhost:5173",
 "webRoot": "${workspaceFolder}",
 "pathMappings": [
  {
    "url": "http://localhost:5173/src/dragdrop.js",
    "path": "${workspaceFolder}/DragDrop/src/dragdrop.js"
  }
]
},
{
 "type": "chrome",
 "request": "launch",
 "name": "Launch Chrome against localhost",
 "url": "http://localhost:5173",
 "webRoot": "${workspaceFolder}/DragDrop",
}
]
}

and this is vite.config.js; I have tried the commented-out parts without success.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue() ],
  // build: {
  //   sourcemap: true,
  // },
  root: "DragDrop",
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js',
      // '@': fileURLToPath(new URL('./src', import.meta.url)),
    }
  }

})

How to set breakpoints on js files when working with vue / vite / VSCode / Chrome?

0 Answers0