VSCode Debugger connection to Angular app fails Firefox 125.0 Beta 2 [Unverified breakpoints]

[crossan007]

Summary

My instance of Firefox Developer Edition updated last night from 124.0 beta 9 to 125.0 beta 2 and seems to have broken the VSCode developer extensions ability to debug Angular applications (and possibly others).

Update history is visible through about:support and clicking "Update History of Firefox" (source)

Platform:

• Windows 10
• VSCode v1.85.1 (user setup)
• Debugger for Firefox v2.9.10

Observed behavior:

• [Expected] Starting the debug session launches Firefox Developer
• [Unexpected] Clicking "Restart" in VSCode's developer tools fails to reload the page in the browser
• [Unexpected] All breakpoints are showing up as "unverified" and do not interrupt code execution
• [Unexpected] "Caught Exception" and "Uncaught Exception" breakpoints have no effect.
• No interesting log entries appear in VSCode's Extension Host Output tab.
• [Expected] Closing the browser window terminates the debugging session in VSCode

Task Manager shows the Firefox launch command to be:
"C:\Program Files\Firefox Developer Edition\firefox.exe" -start-debugger-server 6000 -no-remote -profile "C:\Users\Charles/Firefox Debug Profiles/my-debug-profile" http://localhost:4300 /prefetch:1

There appears to be an active TCP connection between VSCode and the Firefox debug listener:

> Get-NetTCPConnection | Where-Object { $_.State -eq 'Established' -and $_.RemotePort -eq 6000 } |fl

LocalAddress   : 127.0.0.1
LocalPort      : 51411
RemoteAddress  : 127.0.0.1
RemotePort     : 6000
State          : Established
AppliedSetting : Internet
OwningProcess  : 34916
CreationTime   : 3/21/2024 11:49:17 AM
OffloadState   : InHost

The TCP conversation between VSCode and Firefox is as follows:

226:{"from":"root","applicationType":"browser","testConnectionPrefix":"server1.conn0.","traits":{"networkMonitor":true,"resources":{"extensions-backgroundscript-status":true},"workerConsoleApiMessagesDispatchedToMainThread":true}}
30:{"to":"root","type":"getRoot"}
374:{"preferenceActor":"server1.conn0.preferenceActor1","addonsActor":"server1.conn0.addonsActor2","deviceActor":"server1.conn0.deviceActor3","heapSnapshotFileActor":"server1.conn0.heapSnapshotFileActor4","perfActor":"server1.conn0.perfActor5","parentAccessibilityActor":"server1.conn0.parentAccessibilityActor6","screenshotActor":"server1.conn0.screenshotActor7","from":"root"}
31:{"to":"root","type":"listTabs"}
25:{"tabs":[],"from":"root"}
31:{"to":"root","type":"listTabs"}
225:{"from":"root","error":"Error","message":"ChromeUtils.importESModule: global option is required in DevTools distinct global","fileName":"resource://devtools/server/actors/descriptors/tab.js","lineNumber":24,"columnNumber":13}

Best Guess

The listTabs call from VSCode to Firefox is failing, and crashing the extension.

There's a commit in the referenced issue below that claims to resolve how cypress-io handles tabs in the debugger connection: cypress-io/cypress@f8fc8d2

Related Issues

This behavior seems similar to these bugs; however, I have a --host 127.0.0.1 directive in my ng serve command already.

• Starting Angular with debugger fails microsoft/vscode#167353
• Angular debugging doesn't work with nightly vscode-js-debug microsoft/vscode-js-debug#1491
• [BUG] - Cannot hit breakpoints with ng serve if Node 18 LTS is used angular/angular-cli#24601
• [BUG] - Node 18 - ng serve - something has changed in Node v18 angular/angular-cli#24442 (comment)

It also looks like there could be another project experiencing an issue with the debugger interface in the latest updates to Firefox Developer edition: cypress-io/cypress#29172

Workaround

Reverting to Firefox Developer Edition version 124 beta 9 (FTP Download Archive) seems to work following steps here: https://support.mozilla.org/en-US/kb/install-older-version-firefox

Important: By default, Firefox is set for automatic updates. To prevent Firefox from automatically updating itself after you install an older version, you'll need to change your Firefox update settings: Click the menu button Fx89menuButton and select Settings. In the General panel, go to the Firefox Updates section.

The debugger TCP conversation using 124 beta 9 looks like this:

255:{"from":"root","applicationType":"browser","testConnectionPrefix":"server1.conn0.","traits":{"networkMonitor":true,"resources":{"extensions-backgroundscript-status":true},"workerConsoleApiMessagesDispatchedToMainThread":true,"supportsReleaseActors":true}}
30:{"to":"root","type":"getRoot"}
374:{"preferenceActor":"server1.conn0.preferenceActor1","addonsActor":"server1.conn0.addonsActor2","deviceActor":"server1.conn0.deviceActor3","heapSnapshotFileActor":"server1.conn0.heapSnapshotFileActor4","perfActor":"server1.conn0.perfActor5","parentAccessibilityActor":"server1.conn0.parentAccessibilityActor6","screenshotActor":"server1.conn0.screenshotActor7","from":"root"}
31:{"to":"root","type":"listTabs"}
25:{"tabs":[],"from":"root"}
31:{"to":"root","type":"listTabs"}
251:{"tabs":[{"actor":"server1.conn0.tabDescriptor8","browserId":2,"browsingContextID":3,"isZombieTab":false,"outerWindowID":5,"selected":true,"title":"New Tab","traits":{"watcher":true,"supportsReloadDescriptor":true},"url":"about:blank"}],"from":"root"}
56:{"to":"server1.conn0.tabDescriptor8","type":"getTarget"}
1442:{"frame":{"actor":"server1.conn0.child9/windowGlobalTarget2","browsingContextID":3,"processID":22072,"innerWindowId":6,"topInnerWindowId":6,"isTopLevelTarget":true,"isPopup":false,"isPrivate":false,"traits":{"isBrowsingContext":true,"supportsTopLevelTargetFlag":true,"frames":true,"logInPage":true,"watchpoints":true,"navigation":true},"title":"","url":"about:blank","outerWindowID":5,"consoleActor":"server1.conn0.child9/consoleActor3","inspectorActor":"server1.conn0.child9/inspectorActor4","styleSheetsActor":"server1.conn0.child9/styleSheetsActor5","memoryActor":"server1.conn0.child9/memoryActor6","reflowActor":"server1.conn0.child9/reflowActor7","cssPropertiesActor":"server1.conn0.child9/cssPropertiesActor8","animationsActor":"server1.conn0.child9/animationsActor9","responsiveActor":"server1.conn0.child9/responsiveActor10","webExtensionInspectedWindowActor":"server1.conn0.child9/webExtensionInspectedWindowActor11","accessibilityActor":"server1.conn0.child9/accessibilityActor12","changesActor":"server1.conn0.child9/changesActor13","manifestActor":"server1.conn0.child9/manifestActor14","networkContentActor":"server1.conn0.child9/networkContentActor15","screenshotContentActor":"server1.conn0.child9/screenshotContentActor16","tracerActor":"server1.conn0.child9/tracerActor17","objectsManagerActor":"server1.conn0.child9/objectsManagerActor18","threadActor":"server1.conn0.child9/thread1"},"from":"server1.conn0.tabDescriptor8"}
141:{"type":"frameUpdate","frames":[{"id":5,"isTopLevel":true,"url":"about:blank","title":""}],"from":"server1.conn0.child9/windowGlobalTarget2"}
141:{"type":"frameUpdate","frames":[{"id":5,"isTopLevel":true,"url":"about:blank","title":""}],"from":"server1.conn0.child9/windowGlobalTarget2"}
70:{"to":"server1.conn0.child9/windowGlobalTarget2","type":"listWorkers"}
151:{"to":"server1.conn0.child9/thread1","type":"attach","options":{"ignoreFrameEnvironment":true,"pauseOnExceptions":false,"ignoreCaughtExceptions":true}

[javieriserte]

I'm having the same issue. Using Firefox developer 125.b04

[hbenl]

This is caused by a bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1888899.
That bug appeared in Firefox 125, earlier versions (in particular the current stable version) still work.

[crossan007]

I just tested this in the Firefox Nightly build 126.0a1, and it seems that the issue is resolved

[Abdelhafid01]

I have approximately the same issue with the debugger in firefox developer edition (version 125.0b9) doesn't have effect, it doesn't work at all. so I swith to firefox normal edition (version 124.0.2) it works partially and I don't know why it is stopped and have the issue in debug console which tells me:
SyntaxError: import.meta may only appear in a module

NG0912: Component ID generation collision detected. Components 'NavbarItemMenusComponent' and 'NavbarItemMenusComponent' with selector 'bl-navbar-item-menus' generated the same component ID. To fix this, you can change the selector of one of those components or add an extra host attribute to force a different ID. Find more at https://angular.io/errors/NG0912
core.mjs:2149
[KEYCLOAK] Instantiation using the Keycloak function has been deprecated and support will be removed in future versions. Use the new operator to create an instance instead.
keycloak.mjs:30

TypeError: au.shift is not a function

here my launch.json config:
{
"version": "0.2.0",
"configurations": [
{
"type": "firefox",
"request": "launch",
"name": "Launch firefox",
"reAttach": false,
"url": "http://localhost:4999",
"webRoot": "${workspaceFolder}",
"firefoxExecutable": "C:\Program Files\Mozilla Firefox\firefox.exe",
"profileDir": "C:\Users\Abdelhafid.CHETOUANI\AppData\Roaming\Mozilla\Firefox\Profiles\p0g2jmlu.default",
"firefoxArgs": ["-private", "-purgecaches"]
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4999",
"webRoot": "${workspaceFolder}"
}
]
}

And with Chrome and Edge the debugger works nicely, Could someone help me ?