JavaScript debugger not working

[rajinder-yadav]

Type: Bug

Ionic Angular application builds and run when debugger is started, but breakpoint is never triggered.
The other bug is chrome fails to launch and open at url.

debug launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Ionic",
      "request": "launch",
      "type": "chrome",
      "runtimeExecutable": "stable",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "preLaunchTask": "npm: start"
    }
  ]
}

Refresh browser several times, see console log print everytime, breakpoint never triggered.

Extension version: 2023.11.1317
VS Code version: Code - Insiders 1.85.0-insider (05cd2640ec8a106a4ee99cb38e6ee34fbec04f11, 2023-11-21T05:34:53.583Z)
OS version: Linux x64 6.6.2-1-default
Modes:

System Info

Item	Value
CPUs	AMD Ryzen 9 5900X 12-Core Processor (24 x 3999)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok video_decode: enabled video_encode: disabled_software vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: disabled_off
Load (avg)	1, 1, 1
Memory (System)	62.71GB (41.50GB free)
Process Argv	. --crash-reporter-id 210d9130-10f4-4cf9-ad76-187d60112fd6
Screen Reader	no
VM	0%
DESKTOP_SESSION	plasma5
XDG_CURRENT_DESKTOP	KDE
XDG_SESSION_DESKTOP	KDE
XDG_SESSION_TYPE	x11

A/B Experiments

vsliv695:30137379
vsins829:30139715
vsliv368:30146709
vsreu685:30147344
python383:30185418
vspor879:30202332
vspor708:30202333
vspor363:30204092
vslsvsres303:30308271
pythontb:30258533
vsc_aa:30263845
pythonptprofiler:30281269
vshan820:30294714
vscod805cf:30301675
bridge0708:30335490
bridge0723:30353136
vsaa593cf:30376535
pythonvs932:30404738
py29gd2263:30784851
vsclangdf:30492506
c4g48928:30535728
dsvsc012cf:30540253
pynewext54:30618038
2i9eh265:30646982
showlangstatbar:30737417
pythonfmttext:30716741
fixshowwlkth:30771523
showindicator:30805243
pythongtdpath:30726887
i26e3531:30792625
welcomedialog:30812478
pythonnosmt12:30779711
pythonidxpt:30768918
pythonnoceb:30776497
asynctok:30898717
dsvsc013:30777762
dsvsc014:30777825
pythonmhint1:30859868
dsvsc015:30821418
pythontestfixt:30866404
pythonregdiag2:30871582
pyreplss1:30879911
pythonmypyd1:30859725
pythoncet0:30859736
pythontbext0:30879054
accentitlementst:30870582
dsvsc016:30879898
dsvsc017:30880771
dsvsc018:30880772
aa_t_chat:30882232

[rajinder-yadav]

I added the "debugger" statement to the code, vscode still fails to trigger breakpoint. However the browser webtool debugger gets triggered correctly.

[rajinder-yadav]

If I remove,

"preLaunchTask": "npm: start"

from launch.json, then from the terminal I run my web app using:

npm start

Now if I hit F5 to run the debugger it will hit my breakpoint. So I would like to be able to trigger the npm script to run the app and the browser to launch with the debugger working.

Not sure what is brokem, or the correct way to set the launch.json config for debugging a web application.

Here is a demo app project to use: https://github.com/rajinder-yadav/demo-debug

[connor4312]

You haven't shared your launch.json, but it looks like debugging never starts in VS Code because it's waiting for the npm start task to finish before starting the debugger. You likely need to configure it as a background task as described here: https://code.visualstudio.com/docs/editor/tasks#_background-watching-tasks

[rajinder-yadav]

Hello my launch.json is in the original message at the top. In the past this use to work, infact in the past I didn't even need to create my own launch,json file.

I think this bug should be re-opened and worked on, as it use to work before out of the box.

[rajinder-yadav]

OK if you start with no launch.json the debugger will show the following in the debug panel, so click on the highlighted option.

You will then see the following, select, "Node.js"

You will then see, select the top option, "Run Script: start"

This will start the debugger and your breakpoint will never get hit.

FYI: The debugger should be smart enough to detect the "npm" scipts in package.json file and it should select, "npm start" as default and then be able to detect if it's a web app (ionic, angular, vue, react). If it's a web app launch the browser when debugging. If not, treate it as a node.js server app and debug likewise.

The debugger should just work out of the box and provide the best developer experience.

You can check the "dependencies" for an idea what type of app is getting launched in package,json

The following is a ionic / anguar web app so launch a browser with the debugger automatically.

  "dependencies": {
    "@angular/animations": "^17.0.2",
    "@angular/common": "^17.0.2",
    "@angular/compiler": "^17.0.2",
    "@angular/core": "^17.0.2",
    "@angular/forms": "^17.0.2",
    "@angular/platform-browser": "^17.0.2",
    "@angular/platform-browser-dynamic": "^17.0.2",

..

    "@ionic/angular": "^7.5.0",

[rajinder-yadav]

This is definitely a bug, why should there be a difference between me, having to type, "npm start" from a terminal and then run the debugger by hitting F5 for things to work, compaed to VSCode doing both?

[connor4312]

Sorry, I meant that you hadn't shared your tasks.json where the npm: start task is defined.

If you debug the "run script: start", you will be debugging the Node.js server that is compiling and serving your Angular project. In that case your breakpoints will not be bound, because Angular code is not running in this server. You instead want to debug the browser.

Here's a tutorial from our docs on an Angular setup in VS Code: https://code.visualstudio.com/docs/nodejs/angular-tutorial though that doesn't cover setting up a prelaunch task which was your original issue. To do that ideally, the Angular folks would provide a problem matcher in their extension, but they don't do this today angular/vscode-ng-language-service#625

The debugger should be smart enough to detect the "npm" scipts in package.json file and it should select, "npm start" as default and then be able to detect if it's a web app (ionic, angular, vue, react).

I thought about that in the past,but opted not to it. There are an infinite number of frontend frameworks and ways to launch frontend frameworks. I'm not interested in maintaining a list of matchers for them and being responsible for updating matchers as CLIs and their usages change. While users occasionally get confused when they try to debug their npm script instead of their web app, this is not terribly common and in my view not enough to justify the maintenance burden of trying to 'magic' over it.

[rajinder-yadav]

I agree with you about the maintanance headace, I reazlied that as soon as I submitted my request (my bad). As for the angular article, this is what I am already doing. The part in the article where it says:

"Press F5 or the green arrow to launch the debugger and open a new browser instance."

It stop working like this, nothing is running or gets executed like the npm "start" script. So a browser opens at "http://localhost:4200" like this

The work-around I found is I need to first go to the terminal and type, "npm start", then press F5 and it will work and the breakpoint is immediately triggered.

However that last step, before I didn't need to do this. Also if I add the following to the launch.json config

"preLaunchTask": "npm: start"

it starts the build but like you said the debugger is not debugging angular anymore? So can this be fixed, or maybe provide a default (drop down) option like, "run npm start and open browser" ???

I don't think it obvious to new dev how to get the debugger working, it just seem broken.

Ideally hitting F5 should build and run either a node.js server app, or as node.js web app if package.json is found to exist. Then you just need to check for one file and provide maybe two default options.

1. Debug node.js server app (don't need browser)
2. Debug node.js web app (opens browser)

Added comment for your understanding, how you word these default options is up to you.

I would just like option 2) to kick of "npm start" and open the web browser to begun debugging.