Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Debugger and current debugging line are both misplaced #335

Open
ghost opened this issue Jul 23, 2023 · 6 comments
Open

Debugger and current debugging line are both misplaced #335

ghost opened this issue Jul 23, 2023 · 6 comments

Comments

@ghost
Copy link

ghost commented Jul 23, 2023

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:
image

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
Copy link

ngentili commented Sep 5, 2023

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

@ngentili
Copy link

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
Copy link

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

Currently Vite is simply unusable with Firefox.

@HanKruiger
Copy link

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
Copy link

XDGFX commented May 21, 2024

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
Copy link

sadovsf commented Jun 26, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants