Vscode: Debug points getting hit but no visual indication when debugging nodejs (mocha tests)

[techyrajeev]

Issue Type: Bug

When I try to debug node js app I see execution stops at certain breakpoints which are set but vscode doesn't highlight that point.
Launch.json for debugging

{
            "type": "node",
            "request": "launch",
            "name": "Mocha All",
            "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
            "args": [
                "-r",
                "ts-node/register",
                "--timeout",
                "999999",
                "--colors",
                "${workspaceRoot}/test/**/*.test.ts"
            ],
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "protocol": "inspector",
            "env": {
                "NODE_CONFIG_DIR":"./src/config",
                "NODE_ENV": "test"
            }

VS Code version: Code 1.31.1 (1b8e8302e405050205e69b59abb3559592bb9e60, 2019-02-12T02:16:38.656Z)
OS version: Darwin x64 17.7.0

System Info

|Item|Value|
|---|---|
|CPUs|Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz (8 x 2800)|
|GPU Status|2d_canvas: enabled
checker_imaging: disabled_off
flash_3d: enabled
flash_stage3d: enabled
flash_stage3d_baseline: enabled
gpu_compositing: enabled
multiple_raster_threads: enabled_on
native_gpu_memory_buffers: enabled
rasterization: enabled
surface_synchronization: enabled_on
video_decode: enabled
webgl: enabled
webgl2: enabled|
|Load (avg)|2, 2, 3|
|Memory (System)|16.00GB (0.52GB free)|
|Process Argv||
|Screen Reader|no|
|VM|0%|

Extensions (23)

Extension|Author (truncated)|Version
---|---|---
npm-intellisense|chr|1.3.0
path-intellisense|chr|1.4.2
vscode-eslint|dba|1.8.0
es7-react-js-snippets|dsz|2.0.1
vscode-html-css|ecm|0.2.0
flow-for-vscode|flo|1.0.1
vscode-styled-components|jpo|0.0.25
graphql-for-vscode|kum|1.13.0
dotenv|mik|1.0.1
vsliveshare|ms-|0.3.1182
debugger-for-chrome|msj|4.11.1
color-highlight|nau|2.3.0
quicktype|qui|12.0.46
java|red|0.38.0
autoimport|ste|1.5.3
vscode-java-debug|vsc|0.16.0
vscode-java-dependency|vsc|0.3.0
vscode-java-pack|vsc|0.5.0
vscode-java-test|vsc|0.14.0
vscode-maven|vsc|0.14.2
vim|vsc|1.0.8
vscode-wakatime|Wak|1.2.5
vscode-import-cost|wix|2.12.0

[weinand]

When this happens could you please open the "Dev Tools" with the "Toggle Developer Tools" action and see whether there are any errors in the console.

[Bilchuck]

I have the same issue. I am debugging Nest js application and debugger works very strange after VS code update.
My config:

{
  // 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": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Nest Framework",
      "args": ["${workspaceFolder}/server/src/main.ts"],
      "runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
      "sourceMaps": true,
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "envFile": "${workspaceFolder}/server/.env"
  }
  ]
}

[weinand]

@Bilchuck When this happens could you please open the "Dev Tools" with the "Toggle Developer Tools" action and see whether there are any errors in the console.

[biogenez]

I have the same problem when trying to debug CRA (Create react app) via Chrome debug extension for VSCode. (just checked prev vscode version 1.30.2 - and it works without problems)

[Bilchuck]

@weinand There are no errors in console

[Bilchuck]

@weinand

When I enter the variable name to debug console for reading it's value it sends me from my .ts file to this javascript.
Also, I don't have access to any local variables. So debugger is not working at all. It just stops the process and can be resumed.

[Bilchuck]

@weinand But I can use debugger port provided by VS code in chrome inspector and debug there without problems.
Hope my comments will help you to fix the issue

[weinand]

@Bilchuck for evaluating local variables in the debug console, you will have to use the correct JS name. Some TS names are translated into different JS names. You can find the correct JS names in the variables view.

This functionality hasn't changed in VS Code 1.31

[weinand]

@Bilchuck this issue is about "Debug points getting hit but no visual indication when debugging nodejs". In your screenshot I'm seeing a "visual indication". So your issue seems to be unrelated. Please file a new issue.

[Bilchuck]

@weinand
1) I have the same issue with no visual indicator
2) I also don't have access to any variables
3) When I try to write any variable name to debug console it transfers me to strange js file maybe it is some vs code file, maybe ts compiler. And in this file, I have actually indicator. But it does not make any sense for me.

I just explored the issue wider.

[weinand]

Since we are not able to reproduce this problem, I cannot really investigate.

@Bilchuck please provide information about your platform, what version of node.js you are using and reproducible steps.
Ideally a minimal node.js program that shows the problem would be helpful.

[Bilchuck]

@weinand
Step to reproduce:
1) clone https://github.com/nestjs/nest.git
2) open sample/01-cats-app/ project in vs code
3) Start projects with commands: 1) yarn 2) yarn start
4) Put debugger here roles.guard.ts:10
5) Make get request to http://localhost:3000/cats

My env:
lanch.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": [
      {
        "type": "node",
        "request": "launch",
        "name": "Debug Nest Framework",
        "args": ["${workspaceFolder}/src/main.ts"],
        "runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
        "sourceMaps": true,
        "cwd": "${workspaceRoot}",
        "protocol": "inspector",
    }
    ]
  }

node: v10.9.0
npm: 6.4.1
yarn: 1.12.3
OS: Mojave 10.14

[biogenez]

how reproduce:
1) yarn create react-app my-app-name
2) configure launch.json (https://facebook.github.io/create-react-app/docs/setting-up-your-editor#visual-studio-code)
3) set breakpoint in any js file (for example on button click)
4) run dev server: yarn start
5) launch debugger in vscode
6) click the button from step 3).
VSCode icon will blink (on Windows), but the breakpoint source line will not be highlighted

[weinand]

@Bilchuck thanks for the steps (which do not really explain how and when the debugger is started).

These steps actually let me debug:

• clone https://github.com/nestjs/nest.git
  
  
  
  • open sample/01-cats-app/ project in vs code
  
  
  • Start projects with commands: 1) yarn 2) yarn start
  
  
  • Put breakpoint in roles.guard.ts:10
  
  
  • create a launch.json with the contents from above
  
  
  • kill yarn start
  
  
  • press F5
  
  
  • Open http://localhost:3000/cats in a browser
  
  

[weinand]

With the steps from above I see the following issue:

The breakpoint is hit but there is no visual indication in the editor (no highlighted line).
But after selecting the top frame in the CALL STACK view, the location in the editor is highlighted properly.

I have a guess what the problem is and I think I have found a workaround:

Just add a "smartStep": false to your launch config.

With this the location is highlighted properly:

[weinand]

@Bilchuck @biogenez @techyrajeev could you please verify that the workaround fixes the problem for you?

[techyrajeev]

Just now I checked after adding "smartStep": false in launch.json.
It is working like a charm.
@Bilchuck @biogenez please give it a try, we can close the issue after it's working for you.
@weinand thank you very much for your help.

[weinand]

@isidorn this issue has probably been introduced with the work on #64193 and/or #65012.
We will have to make sure that we do not end up in a situation where we have a stack but no frame selected and nothing highlighted in the editor.
In my repro from above the top frame is deemphasized (i.e. "uninteresting") so it is ok that this frame is not selected. But the second frame is not deemphasized, so it should be selected and the editor should show a green highlight.

@techyrajeev please don't close this issue. There is severe bug. And I've just provided a workaround, not a fix.

[techyrajeev]

@weinand ok no issues, will keep it open until fixed.

[biogenez]

Just now I checked after adding "smartStep": false in launch.json.
It is working like a charm.
@Bilchuck @biogenez please give it a try, we can close the issue after it's working for you.
@weinand thank you very much for your help.

yes, "smartStep": false works for me

[Bilchuck]

@weinand "smartStep": false works for me. Thanks.

[weinand]

@roblourens I wonder why in the repro from above the top frame shows as deemphasized (see screencasts). The frame is a TS frame and that by definition needs a working source map, and that should not result in a "deemphasized" hint.

[roblourens]

Yeah this is https://github.com/Microsoft/vscode/issues/68127#issuecomment-462577098. Thanks for doing so much investigation though...

Disabling smartStep in this case is the only workaround I have.

[isidorn]

Note to self: make sure to reveal the stack frame in tree when being selected.

[aprilandjan]

@weinand Thanks for your explanation! I encountered same issue when debugging with ts-jest in vscode v1.31.1. setting "smartStep": false works for me. Thanks!

[isidorn]

@weinand thanks for the great repro steps

[weinand]

@isidorn this needs to be verified for all issues resolved as duplicates (e.g. C++, PowerShell).
Maybe we need a test-item...

[isidorn]

The code is the same for all debug types, I would just like that we verify for one. So no test item needed.

[weinand]

@isidorn sure, the fix is debug type independent (which is true for 99.9% of all VS Code fixes). The question is whether your fix really covers all issues we were seeing in different debuggers. This cannot be proved by just verifying for node-debug.

[isidorn]

@weinand I have removed the duplicate from those issues so they also get verified

[gombosg]

I'm getting the same error when doing Jest tests with the VSCode extension. Problem is that by default when I click "debug" in the code lens, VSCode just auto attaches to the jest tester:

cd /home/$USER/$PROJECT ; env "CI=vscode-jest-tests" /usr/bin/node --inspect-brk=45641 node_modules/jest/bin/jest.js --runInBand $FILE.test.ts --testNamePattern "should $DOSOMETHING" 

It hits my breakpoints and clicking on the top stack frame entry does reveal the line. The top entry in the stack is greyed out by default.
Can't seem to turn off smartStep for auto attach, and right click - toggle skipping this file in stack list doesn't work.

EDIT: creating a manual debug config with smartStep off works.

(VSCode 1.31.1)

[roblourens]

@gombosg it's not fixed in 1.31. Please try in Insiders