Debugger and current debugging line are both misplaced

[ghost]

This is the only thing currently keeping me from switching to firefox

Repo to reproduce

Repro steps:

add launch.json from below
npm install
npm run dev
In src/App.vue add a breakpoint between line 5 and 8
Start debugging

I am trying to debug from vscode a vue 3 with TS and vite project

As stated in the docs i did:

open the Developer Tools Settings and check the checkboxes labeled “Enable browser chrome and add-on debugging toolboxes” and “Enable remote debugging”

and executed Firefox as follows

"C:\Program Files\Mozilla Firefox\firefox.exe" -start-debugger-server

The problem is that the debugger is all jumpy and doesn’t hit the correct line:

Here is my launch.json (the one for chrome works perfectly well)

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}",
            "urlFilter": "http://127.0.0.1:4000/*"
        },
        {
            "name": "Attach to Firefox",
            "type": "firefox",
            "request": "attach",
            "url": "http://127.0.0.1:4000",
            "webRoot": "${workspaceFolder}",
            "pathMappings": [
                {
                    "url": "http://127.0.0.1:4000/src",
                    "path": "${workspaceFolder}/src"
                }
            ]
        }
    ]
}

[ngentili]

I am seeing this issue as well using React with TypeScript in a Vite project. Chrome debugger is working fine.

[ngentili]

It may be worth noting that the browser debugger works normally for me, which leads me to think there may be a vscode source map issue. But I'm not sure how to look into that.

Also there doesn't seem to be an issue debugging Angular projects, which don't use Vite

[crazyjat]

Same issue here. I posted a separate issue though... #362

Currently Vite is simply unusable with Firefox.

[HanKruiger]

I am having the same issues. Looking in the debugger tab (in Firefox) it seems like the breakpoint is triggered in a non-sourcemapped version of the file: The offset seems to correspond with the difference between the source and the JavaScript that is executed.

[XDGFX]

Same issue here.

The extension troubleshooting section recommends looking at PathConversion logger output. I've posted mine below, not sure what it tells us, although getting a response to "getBreakpointPositionsCompressed" with ""positions":{}" seems like maybe an issue?

Log

DEBUG|005.488|BreakpointsManager: Setting 1 breakpoints for /Users/<workspace folder>/client/src/components/MapView.vue
DEBUG|005.490|SourceAdapter: Going to delete 0 breakpoints
DEBUG|005.490|SourceAdapter: Going to delete 0 breakpoints
DEBUG|005.490|SourceAdapter: Going to delete 0 breakpoints
DEBUG|005.490|SourceAdapter: Going to delete 0 breakpoints
DEBUG|005.490|SourceAdapter: Going to add 1 breakpoints
DEBUG|005.490|SourceActorProxy: Fetching breakpointPositions of http://localhost:5173/src/components/MapView.vue?t=1716281901596&vue&type=style&index=1&lang.css
DEBUG|005.490|SourceActorProxy: Fetching breakpoint positions of http://localhost:5173/src/components/MapView.vue?t=1716281901596&vue&type=style&index=1&lang.css for range: {"start":{"line":275,"column":0},"end":{"line":275,"column":9007199254740991}}
DEBUG|005.490|DebugConnection: Sending request {"to":"server1.conn12.child9/source111","type":"getBreakpointPositionsCompressed","query":{"start":{"line":275,"column":0},"end":{"line":275,"column":9007199254740991}}}
DEBUG|005.490|SourceAdapter: Going to add 1 breakpoints
DEBUG|005.490|SourceActorProxy: Fetching breakpointPositions of http://localhost:5173/src/components/MapView.vue?t=1716281901596&vue&type=style&index=0&scoped=1b2abc32&lang.css
DEBUG|005.490|SourceActorProxy: Fetching breakpoint positions of http://localhost:5173/src/components/MapView.vue?t=1716281901596&vue&type=style&index=0&scoped=1b2abc32&lang.css for range: {"start":{"line":275,"column":0},"end":{"line":275,"column":9007199254740991}}
DEBUG|005.490|DebugConnection: Sending request {"to":"server1.conn12.child9/source110","type":"getBreakpointPositionsCompressed","query":{"start":{"line":275,"column":0},"end":{"line":275,"column":9007199254740991}}}
DEBUG|005.490|SourceAdapter: Going to add 1 breakpoints
DEBUG|005.491|SourceMappingSourceActorProxy: Calculating ranges for http://localhost:5173/src/components/MapView.vue within its generated source
DEBUG|005.495|SourceMappingSourceActorProxy: Fetching generated breakpoint locations for http://localhost:5173/src/components/MapView.vue, 15:0 - 402:0
DEBUG|005.495|SourceActorProxy: Fetching breakpoint positions of http://localhost:5173/src/components/MapView.vue?t=1716281901596 for range: {"start":{"line":15,"column":0},"end":{"line":402,"column":0}}
DEBUG|005.495|DebugConnection: Sending request {"to":"server1.conn12.child9/source112","type":"getBreakpointPositionsCompressed","query":{"start":{"line":15,"column":0},"end":{"line":402,"column":0}}}
DEBUG|005.495|SourceAdapter: Going to add 1 breakpoints
DEBUG|005.495|SourceActorProxy: Fetching breakpointPositions of http://localhost:5173/src/components/MapView.vue?t=1716281901596
DEBUG|005.495|SourceActorProxy: Fetching breakpoint positions of http://localhost:5173/src/components/MapView.vue?t=1716281901596 for range: {"start":{"line":275,"column":0},"end":{"line":275,"column":9007199254740991}}
DEBUG|005.495|DebugConnection: Sending request {"to":"server1.conn12.child9/source112","type":"getBreakpointPositionsCompressed","query":{"start":{"line":275,"column":0},"end":{"line":275,"column":9007199254740991}}}
DEBUG|005.495|DebugConnection: Received response/event {"positions":{},"from":"server1.conn12.child9/source111"}
DEBUG|005.495|SourceActorProxy: Received getBreakpointPositions response
DEBUG|005.496|DebugConnection: Received response/event {"positions":{},"from":"server1.conn12.child9/source110"}
DEBUG|005.496|SourceActorProxy: Received getBreakpointPositions response
DEBUG|005.496|SourceActorProxy: Fetching breakableLines of http://localhost:5173/src/components/MapView.vue?t=1716281901596&vue&type=style&index=1&lang.css
DEBUG|005.496|DebugConnection: Sending request {"to":"server1.conn12.child9/source111","type":"getBreakableLines"}
DEBUG|005.496|SourceActorProxy: Fetching breakableLines of http://localhost:5173/src/components/MapView.vue?t=1716281901596&vue&type=style&index=0&scoped=1b2abc32&lang.css
DEBUG|005.496|DebugConnection: Sending request {"to":"server1.conn12.child9/source110","type":"getBreakableLines"}
DEBUG|005.499|DebugConnection: Received response/event {"positions":{"15":[109,239],"19":[34,50],"22":[4],"23":[4],"24":[25,28],"25":[16,19],"26":[21,24],"27":[21,24],"28":[18],"29":[62,73],"32":[6],"33":[6],"37":[6],"41":[6],"42":[6],"43":[6],"44":[4],"45":[22,25],"47":[21],"48":[29,34],"49":[24,59],"51":[6],"52":[4],"53":[4,13],"54":[6,18],"66":[6,27],"67":[6,32],"68":[6,16],"69":[8,8,21,21],"70":[10,10,41,41],"71":[8,8],"72":[8,8,21,21],"86":[8,8,21,21],"101":[8,8,13,13],"102":[14,14,28,28],"103":[12,12],"104":[29,29,42,42],"107":[14,14],"108":[12,12,20,20],"109":[10,10,21,21],"120":[8,8],"121":[8,8,21,21],"122":[14,14],"123":[12,12],"124":[10,10],"128":[10,10],"129":[8,8],"130":[33,33,36,36],"132":[14,14],"133":[12,12,46,46],"135":[23,23,38,38],"136":[23,23,23,27,27,27],"138":[12,12,48,48],"140":[15,15,45,45],"142":[8,8],"143":[8,8,13,13],"146":[30,30],"147":[18,18,32,32,48,48,48],"148":[16,16,44,44],"149":[16,16],"152":[32,32],"153":[14,14,28,28],"155":[10,10],"158":[29,29],"160":[11,11,29,29],"161":[8,8,21,21],"162":[10,10],"163":[8,8],"164":[8,8,21,21],"165":[10,10],"166":[30,30],"167":[30,30],"169":[10,10],"170":[8,8],"171":[8,8,21,21],"172":[10,10],"173":[8,8],"174":[8,8],"175":[10,10,23,23,48,48],"192":[10,10,23,23],"196":[8,8],"197":[6,6],"198":[4],"199":[4,15],"200":[10],"201":[8,18],"202":[4],"203":[25],"204":[6],"205":[4],"206":[6],"207":[4],"208":[4,11],"209":[4],"210":[2],"213":[21,29,41,66,71],"214":[19],"218":[19],"219":[35,47,70,89],"229":[35,47,70,89],"239":[19],"242":[35,47,70,89],"252":[19],"255":[35,47,70,89],"265":[19],"269":[9,23],"273":[6],"276":[17],"284":[6],"285":[6],"286":[9,27],"289":[10],"290":[19,33],"295":[40,40],"296":[66,66],"297":[35,35,42,42],"300":[14],"303":[25],"314":[10],"318":[8,24],"322":[19],"323":[59],"328":[12],"329":[12],"346":[12],"347":[12],"350":[23],"353":[23],"354":[36],"355":[37],"363":[12],"364":[12],"367":[23],"370":[23],"371":[36],"372":[37],"380":[12],"381":[12],"384":[23],"387":[23],"388":[36],"389":[37]},"from":"server1.conn12.child9/source112"}
DEBUG|005.499|SourceActorProxy: Received getBreakpointPositions response
DEBUG|005.499|DebugConnection: Received response/event {"positions":{},"from":"server1.conn12.child9/source112"}
DEBUG|005.499|SourceActorProxy: Received getBreakpointPositions response
DEBUG|005.499|DebugConnection: Received response/event {"lines":[1,2,3,4,5,6],"from":"server1.conn12.child9/source111"}
DEBUG|005.499|SourceActorProxy: Received getBreakableLines response
DEBUG|005.499|DebugConnection: Received response/event {"lines":[1,2,3,4,5,6],"from":"server1.conn12.child9/source110"}
DEBUG|005.499|SourceActorProxy: Received getBreakableLines response
DEBUG|005.499|SourceMappingSourceActorProxy: Computing original breakpoint locations for 142 generated lines
WARN |005.499|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":19,"column":34}
WARN |005.499|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":19,"column":50}
WARN |005.499|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":22,"column":4}
WARN |005.500|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":203,"column":25}
WARN |005.500|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":204,"column":6}
WARN |005.500|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":205,"column":4}
WARN |005.500|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":206,"column":6}
WARN |005.500|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":207,"column":4}
WARN |005.500|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":208,"column":4}
WARN |005.500|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":208,"column":11}
WARN |005.500|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":209,"column":4}
WARN |005.500|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":210,"column":2}
WARN |005.500|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":213,"column":21}
WARN |005.500|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":213,"column":29}
WARN |005.500|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":213,"column":41}
WARN |005.501|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":213,"column":66}
WARN |005.501|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":213,"column":71}
WARN |005.501|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":214,"column":19}
WARN |005.501|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":239,"column":19}
WARN |005.501|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":252,"column":19}
WARN |005.501|SourceMappingInfo: Got original location {"source":null,"line":null,"column":null,"name":null} for generated location {"line":265,"column":19}
DEBUG|005.501|SourceActorProxy: Fetching breakableLines of http://localhost:5173/src/components/MapView.vue?t=1716281901596
DEBUG|005.501|DebugConnection: Sending request {"to":"server1.conn12.child9/source112","type":"getBreakableLines"}
DEBUG|005.501|ThreadActorProxy: Setting breakpoint at 146:30 in http://localhost:5173/src/components/MapView.vue?t=1716281901596
DEBUG|005.501|DebugConnection: Sending request {"to":"server1.conn12.child9/thread1","type":"setBreakpoint","location":{"line":146,"column":30,"sourceUrl":"http://localhost:5173/src/components/MapView.vue?t=1716281901596"},"options":{}}
DEBUG|005.502|DebugConnection: Received response/event {"lines":[1,4,5,6,7,9,10,11,12,15,19,22,23,24,25,26,27,28,29,32,33,37,41,42,43,44,45,47,48,49,51,52,53,54,66,67,68,69,70,71,72,86,101,102,103,104,107,108,109,120,121,122,123,124,128,129,130,132,133,135,136,138,140,142,143,146,147,148,149,152,153,155,158,160,161,162,163,164,165,166,167,169,170,171,172,173,174,175,192,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,213,214,218,219,229,239,242,252,255,265,269,273,276,284,285,286,289,290,295,296,297,300,303,314,318,322,323,328,329,346,347,350,353,354,355,363,364,367,370,371,372,380,381,384,387,388,389,408,411,412,413,414,415,416,417,418,420,422,424,426],"from":"server1.conn12.child9/source112"}
DEBUG|005.502|SourceActorProxy: Received getBreakableLines response
DEBUG|005.502|SourceActorProxy: Fetching breakpointPositions of http://localhost:5173/src/components/MapView.vue?t=1716281901596
DEBUG|005.502|SourceActorProxy: Fetching breakpoint positions of http://localhost:5173/src/components/MapView.vue?t=1716281901596 for range: {"start":{"line":276,"column":0},"end":{"line":276,"column":9007199254740991}}
DEBUG|005.502|DebugConnection: Sending request {"to":"server1.conn12.child9/source112","type":"getBreakpointPositionsCompressed","query":{"start":{"line":276,"column":0},"end":{"line":276,"column":9007199254740991}}}
DEBUG|005.502|DebugConnection: Received response/event {"from":"server1.conn12.child9/thread1"}
DEBUG|005.502|ThreadActorProxy: Received setBreakpoint or removeBreakpoint or pauseOnExceptions response
DEBUG|005.503|DebugConnection: Received response/event {"positions":{"276":[17]},"from":"server1.conn12.child9/source112"}
DEBUG|005.503|SourceActorProxy: Received getBreakpointPositions response
DEBUG|005.503|ThreadActorProxy: Setting breakpoint at 276:17 in http://localhost:5173/src/components/MapView.vue?t=1716281901596
DEBUG|005.503|DebugConnection: Sending request {"to":"server1.conn12.child9/thread1","type":"setBreakpoint","location":{"line":276,"column":17,"sourceUrl":"http://localhost:5173/src/components/MapView.vue?t=1716281901596"},"options":{}}
DEBUG|005.503|DebugConnection: Received response/event {"from":"server1.conn12.child9/thread1"}
DEBUG|005.503|ThreadActorProxy: Received setBreakpoint or removeBreakpoint or pauseOnExceptions response
DEBUG|005.510|SourceActorProxy: Fetching breakpointPositions of http://localhost:5173/src/components/MapView.vue?t=1716281901596&vue&type=style&index=1&lang.css
DEBUG|005.510|SourceActorProxy: Fetching breakpoint positions of http://localhost:5173/src/components/MapView.vue?t=1716281901596&vue&type=style&index=1&lang.css for range: {"start":{"line":275,"column":0},"end":{"line":275,"column":9007199254740991}}
DEBUG|005.510|DebugConnection: Sending request {"to":"server1.conn12.child9/source111","type":"getBreakpointPositionsCompressed","query":{"start":{"line":275,"column":0},"end":{"line":275,"column":9007199254740991}}}
DEBUG|005.511|DebugConnection: Received response/event {"positions":{},"from":"server1.conn12.child9/source111"}
DEBUG|005.511|SourceActorProxy: Received getBreakpointPositions response
DEBUG|005.544|SourceActorProxy: Fetching breakpointPositions of http://localhost:5173/src/components/MapView.vue?t=1716281901596&vue&type=style&index=1&lang.css
DEBUG|005.544|SourceActorProxy: Fetching breakpoint positions of http://localhost:5173/src/components/MapView.vue?t=1716281901596&vue&type=style&index=1&lang.css for range: {"start":{"line":276,"column":0},"end":{"line":276,"column":9007199254740991}}
DEBUG|005.544|DebugConnection: Sending request {"to":"server1.conn12.child9/source111","type":"getBreakpointPositionsCompressed","query":{"start":{"line":276,"column":0},"end":{"line":276,"column":9007199254740991}}}
DEBUG|005.545|DebugConnection: Received response/event {"positions":{},"from":"server1.conn12.child9/source111"}
DEBUG|005.545|SourceActorProxy: Received getBreakpointPositions response