unbound breakpoint problem while debugging client side code with debugger for Firefox

[Hacksign]

What have I done ?

I tried to set a breakpoint on a piece of client side code written by react under VSCode. The breakpoint dot is actually a hollow and there is a error message "unbound breakpoint". But when I tried debugger for chrome, I can successfully breaked at the right place.

What is the expecting behavior ?

The breakpoint works ...

How to reproduce ?

1. clone and setup project:

[pand0ra@SynoArch ~]$ git clone https://github.com/Hacksign/example-ts-react
Cloning into 'example-ts-react'...
remote: Enumerating objects: 12, done.
remote: Counting objects: 100% (12/12), done.
remote: Compressing objects: 100% (11/11), done.
remote: Total 12 (delta 0), reused 12 (delta 0), pack-reused 0
Receiving objects: 100% (12/12), 5.64 KiB | 5.64 MiB/s, done.
[pand0ra@SynoArch ~]$ cd example-ts-react/
[pand0ra@SynoArch example-ts-react]$ ls
babel.config.js  package.json  src  tsconfig.json  webpack.client.js
[pand0ra@SynoArch example-ts-react]$ npm install

added 382 packages, and audited 383 packages in 36s

32 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

2. open folder with vscode, then start Bg Debug & Fg Debug
3. try to set a breakpoint in src/wrapper.tsx, and it fails ...
4. end the Fg Debug then start Launch Chrome, the breakpoint works

Logs

launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Launch Chrome",
        "request": "launch",
        "type": "chrome",
        "url": "http://localhost:2000",
        "webRoot": "${workspaceFolder}"
      },
      {
          "type": "firefox",
          "request": "launch",
          "name": "Fg Debug",
          "reAttach": true,
          "url": "http://127.0.0.1:2000",
          "webRoot": "${workspaceFolder}",
          "log": {
            "fileName": "${workspaceFolder}/log.txt",
            "fileLevel": {
              "default": "Debug",
            }
          }
      },
      {
          "name": "Bg Debug",
          "outputCapture": "std",
          "request": "launch",
          "runtimeArgs": [
            "run-script",
            "start:development"
          ],
          "runtimeExecutable": "npm",
          "skipFiles": [
            "<node_internals>/**"
          ],
          "type": "pwa-node",
          "sourceMaps": true,
      },      
    ]
}

debugger for firefox log:

DEBUG|000.142|DebugConnection: Received response/event {"from":"root","applicationType":"browser","testConnectionPrefix":"server1.conn2.","traits":{"networkMonitor":true,"resources":{"extensions-backgroundscript-status":true},"workerConsoleApiMessagesDispatchedToMainThread":true}}
DEBUG|000.143|RootActorProxy: Fetching root
DEBUG|000.143|DebugConnection: Sending request {"to":"root","type":"getRoot"}
DEBUG|000.146|DebugConnection: Received response/event {"preferenceActor":"server1.conn2.preferenceActor1","addonsActor":"server1.conn2.addonsActor2","deviceActor":"server1.conn2.deviceActor3","heapSnapshotFileActor":"server1.conn2.heapSnapshotFileActor4","perfActor":"server1.conn2.perfActor5","parentAccessibilityActor":"server1.conn2.parentAccessibilityActor6","screenshotActor":"server1.conn2.screenshotActor7","from":"root"}
DEBUG|000.146|RootActorProxy: Received root response
DEBUG|000.147|RootActorProxy: Fetching tabs
DEBUG|000.147|DebugConnection: Sending request {"to":"root","type":"listTabs"}
DEBUG|000.151|DebugConnection: Received response/event {"tabs":[{"actor":"server1.conn2.tabDescriptor8","browserId":7,"browsingContextID":21,"isZombieTab":false,"outerWindowID":17,"selected":true,"title":"127.0.0.1:2000/","traits":{"watcher":true,"supportsReloadDescriptor":true},"url":"http://127.0.0.1:2000/"}],"from":"root"}
DEBUG|000.151|RootActorProxy: Received 1 tabs
DEBUG|000.152|RootActorProxy: Tab server1.conn2.tabDescriptor8 opened
DEBUG|000.152|TabDescriptorActorProxy: Connecting to tab
DEBUG|000.152|DebugConnection: Sending request {"to":"server1.conn2.tabDescriptor8","type":"getTarget"}
DEBUG|000.161|DebugConnection: Received response/event {"frame":{"actor":"server1.conn2.child10/windowGlobalTarget2","browsingContextID":21,"processID":1069,"innerWindowId":4294967298,"topInnerWindowId":4294967298,"isTopLevelTarget":true,"isPopup":false,"isPrivate":false,"traits":{"isBrowsingContext":true,"supportsTopLevelTargetFlag":true,"frames":true,"logInPage":true,"watchpoints":true,"navigation":true},"title":"","url":"http://127.0.0.1:2000/","outerWindowID":17,"consoleActor":"server1.conn2.child10/consoleActor3","inspectorActor":"server1.conn2.child10/inspectorActor4","styleSheetsActor":"server1.conn2.child10/styleSheetsActor5","storageActor":"server1.conn2.child10/storageActor6","memoryActor":"server1.conn2.child10/memoryActor7","reflowActor":"server1.conn2.child10/reflowActor8","cssPropertiesActor":"server1.conn2.child10/cssPropertiesActor9","animationsActor":"server1.conn2.child10/animationsActor10","responsiveActor":"server1.conn2.child10/responsiveActor11","webExtensionInspectedWindowActor":"server1.conn2.child10/webExtensionInspectedWindowActor12","accessibilityActor":"server1.conn2.child10/accessibilityActor13","changesActor":"server1.conn2.child10/changesActor14","webSocketActor":"server1.conn2.child10/webSocketActor15","eventSourceActor":"server1.conn2.child10/eventSourceActor16","manifestActor":"server1.conn2.child10/manifestActor17","networkContentActor":"server1.conn2.child10/networkContentActor18","screenshotContentActor":"server1.conn2.child10/screenshotContentActor19","threadActor":"server1.conn2.child10/thread1"},"from":"server1.conn2.tabDescriptor8"}
DEBUG|000.162|TabDescriptorActorProxy: Received getTarget response
INFO |000.163|FirefoxDebugSession: Tab opened with url http://127.0.0.1:2000/
DEBUG|000.164|TabActorProxy: Attaching to tab server1.conn2.child10/windowGlobalTarget2
DEBUG|000.165|DebugConnection: Sending request {"to":"server1.conn2.child10/windowGlobalTarget2","type":"attach"}
DEBUG|000.166|DebugConnection: Received response/event {"type":"frameUpdate","frames":[{"id":17,"isTopLevel":true,"url":"http://127.0.0.1:2000/","title":""}],"from":"server1.conn2.child10/windowGlobalTarget2"}
DEBUG|000.167|DebugConnection: Received response/event {"type":"frameUpdate","frames":[{"id":17,"isTopLevel":true,"url":"http://127.0.0.1:2000/","title":""}],"from":"server1.conn2.child10/windowGlobalTarget2"}
DEBUG|000.172|FirefoxDebugAdapter: Setting exception filters: []
DEBUG|000.178|FirefoxDebugAdapter: 0 threads
DEBUG|000.210|DebugConnection: Received response/event {"error":"unrecognizedPacketType","message":"Actor server1.conn2.child10/windowGlobalTarget2 does not recognize the packet type 'attach'","from":"server1.conn2.child10/windowGlobalTarget2"}
WARN |000.210|TabActorProxy: Unknown message from TabActor: {"error":"unrecognizedPacketType","message":"Actor server1.conn2.child10/windowGlobalTarget2 does not recognize the packet type 'attach'","from":"server1.conn2.child10/windowGlobalTarget2"}
DEBUG|019.994|DebugConnection: Received response/event {"type":"tabNavigated","url":"http://127.0.0.1:2000/","state":"start","isFrameSwitching":false,"from":"server1.conn2.child10/windowGlobalTarget2"}
DEBUG|019.994|TabActorProxy: Tab server1.conn2.child10/windowGlobalTarget2 will navigate to http://127.0.0.1:2000/
DEBUG|020.043|DebugConnection: Received response/event {"type":"frameUpdate","frames":[{"id":17,"isTopLevel":true,"url":"http://127.0.0.1:2000/","title":""}],"from":"server1.conn2.child10/windowGlobalTarget2"}
DEBUG|020.154|DebugConnection: Received response/event {"from":"root","type":"tabListChanged"}
DEBUG|020.154|RootActorProxy: Received tabListChanged event
DEBUG|020.154|RootActorProxy: Fetching tabs
DEBUG|020.154|DebugConnection: Sending request {"to":"root","type":"listTabs"}
DEBUG|020.158|DebugConnection: Received response/event {"tabs":[{"actor":"server1.conn2.tabDescriptor8","browserId":7,"browsingContextID":21,"isZombieTab":false,"outerWindowID":17,"selected":true,"title":"127.0.0.1:2000/","traits":{"watcher":true,"supportsReloadDescriptor":true},"url":"http://127.0.0.1:2000/"}],"from":"root"}
DEBUG|020.158|RootActorProxy: Received 1 tabs
DEBUG|020.198|DebugConnection: Received response/event {"type":"frameUpdate","frames":[{"id":17,"isTopLevel":true,"url":"http://127.0.0.1:2000/","title":""}],"from":"server1.conn2.child10/windowGlobalTarget2"}
DEBUG|020.198|DebugConnection: Received response/event {"type":"tabNavigated","url":"http://127.0.0.1:2000/","title":"","state":"stop","isFrameSwitching":false,"from":"server1.conn2.child10/windowGlobalTarget2"}
DEBUG|020.198|TabActorProxy: Tab server1.conn2.child10/windowGlobalTarget2 did navigate to http://127.0.0.1:2000/
DEBUG|032.625|BreakpointsManager: Setting 1 breakpoints for /home/pand0ra/Code/ts-debug/src/wrapper.tsx
DEBUG|042.398|DebugConnection: Received response/event {"type":"tabNavigated","url":"http://127.0.0.1:2000/","state":"start","isFrameSwitching":false,"from":"server1.conn2.child10/windowGlobalTarget2"}
DEBUG|042.398|TabActorProxy: Tab server1.conn2.child10/windowGlobalTarget2 will navigate to http://127.0.0.1:2000/
DEBUG|042.425|DebugConnection: Received response/event {"type":"frameUpdate","frames":[{"id":17,"isTopLevel":true,"url":"http://127.0.0.1:2000/","title":""}],"from":"server1.conn2.child10/windowGlobalTarget2"}
DEBUG|042.611|DebugConnection: Received response/event {"from":"root","type":"tabListChanged"}
DEBUG|042.611|RootActorProxy: Received tabListChanged event
DEBUG|042.611|RootActorProxy: Fetching tabs
DEBUG|042.612|DebugConnection: Sending request {"to":"root","type":"listTabs"}
DEBUG|042.625|DebugConnection: Received response/event {"tabs":[{"actor":"server1.conn2.tabDescriptor8","browserId":7,"browsingContextID":21,"isZombieTab":false,"outerWindowID":17,"selected":true,"title":"127.0.0.1:2000/","traits":{"watcher":true,"supportsReloadDescriptor":true},"url":"http://127.0.0.1:2000/"}],"from":"root"}
DEBUG|042.625|RootActorProxy: Received 1 tabs
DEBUG|042.626|DebugConnection: Received response/event {"type":"frameUpdate","frames":[{"id":17,"isTopLevel":true,"url":"http://127.0.0.1:2000/","title":""}],"from":"server1.conn2.child10/windowGlobalTarget2"}
DEBUG|042.643|DebugConnection: Received response/event {"type":"tabNavigated","url":"http://127.0.0.1:2000/","title":"","state":"stop","isFrameSwitching":false,"from":"server1.conn2.child10/windowGlobalTarget2"}
DEBUG|042.643|TabActorProxy: Tab server1.conn2.child10/windowGlobalTarget2 did navigate to http://127.0.0.1:2000/
INFO |053.633|FirefoxDebugSession: Connection to Firefox closed - terminating debug session

Other things

This is a relevant issue with THIS ONE

[hbenl]

When I follow your instructions, I get this notification from the extension: If I click "Yes", the extension adds this path mapping to the launch configuration:

"pathMappings": [
  {
    "url": "webpack://ts-debug/src",
    "path": "${workspaceFolder}/src"
  }

After restarting "Fg Debug", breakpoints in wrapper.tsx work.

[Hacksign]

@hbenl

I think this issue should be re-opened. Add the configuration above do NOT resolve the problem on my environment. The break point still unbounded ...

[Hacksign]

OK I just noticed the version of my Debugger for firefox is 2.9.1. After upgrade to 2.9.7, problem solved ....