Vue/Vite/VSCode/Chrome环境下JS文件断点调试异常求助

Chrome 调试异常 #

• .vue文件可直接设置断点，但同项目的.js文件需先从.vue文件单步进入后才能设置断点
• 修改代码后，即便单步进入.js文件也无法设置断点，必须重启Vite服务器才能恢复

Firefox 调试异常 #

调试可正常运行，但鼠标悬停对象变量时，仅显示如下内容，无法展开查看对象成员（Chrome中可正常展开）：

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

相关配置文件 #

launch.json 配置 #

{
  "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",
    }
  ]
}

注：未找到Chrome对应的pathmappings配置项

vite.config.js 配置 #

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)),
    }
  }
})

注：尝试过注释部分配置，但无效果

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