5

I am developing a Vue.js web app (Vue 2) in Visual Studio Code and using the chrome debugger extension. I set this up many months ago following the advice from this SO post: visual-studio-code-breakpoint-appearing-in-wrong-place

Everything was working completely fine until the latest VS Code update (Version: 1.47.0) got pushed a few days ago. Now debug points appear in the wrong place in the code, just like the previously linked post.

In the example gif below, the debugger will never stop at the break points that I actually click. The break point jumps to line 40, and that is the only point that actually breaks when debugging. The debugger will never stop at line 142, 147, 150... only line 40 (which was never set by me).

enter image description here

Here is the .vscode/launch.json configuration that has worked for the past several months:

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

UPDATE

I had wondered if something in my workflow (such as switching git branches) was the cause of trouble, but this seems not to be the case. I have been working on the same git branch for a week and cannot set breakpoints in several .vue files.

UPDATE 2021 November

I'm currently debugging a Vue/Electron app. The app loads a page with no components, and I want to debug components that are loaded later. I'm noticing that breakpoints that are set before the initial load don't work. But if I set a break point in a component AFTER that component has been loaded, it seems to work.

Not sure if this will hold true for all Vue debugging, or if it is specific to Vue/Electron, but I wanted to leave the note in case a pattern emerges.

Richard
  • 679
  • 1
  • 11
  • 21
  • Debugging problems still happen on occasion, but I'm starting to wonder if it is something else in my workflow. It seems like this may be happening when I switch git branches... Has anyone had this type of debugging issue when switching branches? – Richard Aug 06 '20 at 16:37
  • Branch switching is not the cause. I currently cannot set debug points for several of my .vue files and I have been working on the same git branch for a week. – Richard Sep 15 '20 at 13:51
  • Facing the same issue – Abhishek Pankar Oct 12 '21 at 09:37
  • @AbhishekPankar I wish I had an update for you, but I'm still limping along with the same breakpoint issue. – Richard Nov 02 '21 at 13:18

2 Answers2

0

I was able to fix this by upgrading to the newest version of the Javascript debugger via right clicking on the Javascript Debugger in the Extensions Marketplace list.

Upgrade Javascript Debugger

Marcello B.
  • 4,177
  • 11
  • 45
  • 65
oudles
  • 1
  • 1
    This did not help, unfortunately. I tried enabling the Microsoft Javascript Debugger extension and upgrading to the newest version (1.47.5), but debug breakpoints still jump away from where I place them. – Richard Jul 16 '20 at 11:35
0

For new projects, use Vue3 + Vite for seamless debugging! I started a new project in Vue3 using the recommended setup with VITE, and I have not had any trouble with debugging in VS code.

This is not the best answer for projects that still require Vue2 since the configuration options are a bit different (vs Volar). But I have been extremely happy to have breakpoints working in VScode with the new Vue3 project!

The Vue3 quickstart guide automatically sets up a new project with Vite.

Richard
  • 679
  • 1
  • 11
  • 21
  • debugging is not mentioned in either of your links; this answer would be more useful if it gave a specific example of a setup from scratch including the json configuration that worked for you. – Stacker Lee Jul 21 '23 at 11:10