Debugger and current debugging line are both misplaced #335

ghost · 2023-07-23T08:14:09Z

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

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

The text was updated successfully, but these errors were encountered:

ngentili · 2023-09-05T15:24:22Z

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

ngentili · 2023-09-20T11:52:35Z

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 · 2024-04-18T23:22:05Z

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

Currently Vite is simply unusable with Firefox.

HanKruiger · 2024-05-07T11:58:22Z

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 · 2024-05-21T09:02:39Z

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

sadovsf · 2024-06-26T07:43:58Z

This happens to me on Vue as well although it was not always the case. At some point when updating Vue and Vite debugging broke. Log output has bunch of
INFO |001.928|PathConversion: Can't convert url data:application/json;base64,eyJ2.......
When i decode given JSON it is valid and contains correct paths so there seems to be some issue in how plugin interprets them

sadovsf mentioned this issue Jun 26, 2024

Debugging of Vite + Lit + TS problematic using VS Code. vitejs/vite#12265

Open

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Debugger and current debugging line are both misplaced #335

Debugger and current debugging line are both misplaced #335

ghost commented Jul 23, 2023 •

edited by ghost

Loading

ngentili commented Sep 5, 2023 •

edited

Loading

ngentili commented Sep 20, 2023

crazyjat commented Apr 18, 2024

HanKruiger commented May 7, 2024

XDGFX commented May 21, 2024

sadovsf commented Jun 26, 2024

Debugger and current debugging line are both misplaced #335

Debugger and current debugging line are both misplaced #335

Comments

ghost commented Jul 23, 2023 • edited by ghost Loading

ngentili commented Sep 5, 2023 • edited Loading

ngentili commented Sep 20, 2023

crazyjat commented Apr 18, 2024

HanKruiger commented May 7, 2024

XDGFX commented May 21, 2024

sadovsf commented Jun 26, 2024

ghost commented Jul 23, 2023 •

edited by ghost

Loading

ngentili commented Sep 5, 2023 •

edited

Loading