firefox-devtools / firefox-devtools/vscode-firefox-debug

Debugger and current debugging line are both misplaced

Open
#335 6 comments 5 reactions 0 assignees View on GitHub
bug sourcemaps
Dominant language
TypeScript
Stars
447
Forks
76
PR merge metrics
No merged PRs in 30d

Description

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

[Repo to reproduce](https://github.com/ldiane/vfd)

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](https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug) 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](https://github.com/firefox-devtools/vscode-firefox-debug/assets/62384847/88665aa1-0c6e-4671-b5c0-4dd5416c49b4)

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.