Can't debug in vscode with use preview javascript debugger and old debuger takes minutes to hit a break point

I have spent WAY too long trying to get debugging to work using this recipie. I have tried so many different configurations and setups that I am sure I am just missing something. Right now I can set breakpoints in vscode and jump into them if I disable the preview javascript debugger in vscode. The problem is that it takes several minutes to jump from a breakpoint in chrome to vscode. While this is happening vscode is completely unusable. I would also like to be able to use all of the new features in the latest preview javascript debugger.

Any help with this would get greatly appreciated. Let me know if you need any more information.

This is my project folder setup.

here is my launch config

{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "trace":"verbose", "name": "vuejs: chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:/": "${webRoot}/", "/src/": "${webRoot}/", "/./~/": "${webRoot}/node_modules/" }, "preLaunchTask": "vuejs: start" } ] }

Here is my task

{ "version": "2.0.0", "tasks": [ { "label": "vuejs: start", "type": "npm", "script": "serve", "isBackground": true, "presentation": { "reveal": "always", "panel": "shared", }, "problemMatcher": { "owner": "typescript", "fileLocation": "relative", "pattern": { "regexp": "^([^\s].)$(\d+|\,\d+|\d+,\d+,\d+,\d+)$:\s+(error|warning|info)\s+(TS\d+)\s:\s(.)$", "file": 1, "location": 2, "severity": 3, "code": 4, "message": 5 }, "background": { "activeOnStart": true, "beginsPattern": ".", "endsPattern": "App running at", } }

  }

]

}

Here is my vuew.config.js

const CopyPlugin = require('copy-webpack-plugin')

module.exports = {

pages: { index: { entry: 'src/index.js', template: 'public/index.html', filename: 'index.html' } }, devServer: { clientLogLevel: 'warning', hot: true, contentBase: 'dist', compress: false, open: true, overlay: { warnings: false, errors: true }, publicPath: '/', quiet: true, watchOptions: { poll: false, //I want to be able to jump into node_modules to debug ignored: /node_modules/ } }, chainWebpack: config => { config.plugins.delete('prefetch-index'), config.module .rule('vue') .use('vue-loader') .tap(args => { //args.compilerOptions.whitespace = 'preserve' }) }, productionSourceMap: false, assetsDir: './assets/', configureWebpack: { devtool: 'source-map', plugins: [ new CopyPlugin({ patterns: [ { from: 'src/assets/img', to: 'assets/img' }, { from: 'src/assets/logos', to: 'assets/logos' }, { from: 'src/assets/fonts', to: 'assets/fonts' } ], }), ] } }

here is my babel config

module.exports = { "env":{ "development":{ "sourceMaps":true, "retainLines":true, } }, presets: [ '@vue/app' ] }

here is my webpack.config.js (I was just experimenting with babel-loader and those lines probably need to be taken out)

// webpack.config.js module.exports = { // ... entry: { "app": "src/main.js" }, //mode: 'development', rules: [ { test: /.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: [ '@vue/app' ] } } } ] };

the latest debugadapter log is included.

vscode-debugadapter-5757a25a.json.gz

microsoft / vscode-recipes

Can't debug in vscode with use preview javascript debugger and old debuger takes minutes to hit a break point #287