Loopback-next: How debugging Loopback 4

[pavelgronsky]

Hello. I don't understand how I can debug Loopback 4 project?

First: I added debbuger to my controller.ts but after npm start I can't to catch debugger in chrome console.
Second: I try to debugging used VSCode. But it doesn't work for me.

What I must added to launch.json and package.js for debuging code and why my debugger doesn't work in Chrome?

Who can explain why Chrome doesn't have file from controller, model and repo ?

[Narrator]

I've been debugging successfully using VSCode. Try adding this to your launch config:

Using nodemon (So it auto-reloads on file save given you have the transpiler running)

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server auto reload",
      "runtimeExecutable": "nodemon",
      "program": "${workspaceFolder}/index.js",
      "outFiles": [
        "${workspaceFolder}/**/*.js"
      ],
      "restart": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "envFile": "${workspaceFolder}/.env",
    }
  ]
}

Using only node:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server",
      "runtimeExecutable": "node",
      "program": "${workspaceFolder}/index.js",
      "outFiles": [
        "${workspaceFolder}/**/*.js"
      ],
      "restart": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "envFile": "${workspaceFolder}/.env",
    }
  ]
}

[dhmlau]

@Narrator, thanks for the information. I think it would be beneficial to have that in our documentation: https://github.com/strongloop/loopback-next/blob/master/docs/site/DEVELOPING.md. Would you like to submit a PR? Thanks.

[abhisekp]

(So it auto-reloads on file save given you have the transpiler running)

@Narrator What do you mean by - "transpiler running"? Do you mean npm run build:watch (which is not working properly)?

[Narrator]

@abhisekp Yes, it means running npm run build:watch or lb-tsc es2017 --outDir dist --watch in a separate terminal, so the .ts files are continuously transpiled to .js files. Why is not working properly?

@dhmlau Sure thing. I will try to create a PR later today at some point.

[pookdeveloper]

@Narrator is possible to use:
➜ DEBUG=loopback:connector:* npm start
or
➜ DEBUG=loopback:connector:* npm run build:watch

With the vscode debugger ? I want to use DEBUG MODE (to show more info in the console log) with the vscode debugger

I can use attaching but to node process doesn't reload.

Thanks!

[dhmlau]

@pookdeveloper, you might want to take a look at the launch.json in https://github.com/strongloop/loopback4-example-shopping/blob/master/.vscode/launch.json as a reference for running on debug.

[pookdeveloper]

I see @dhmlau but I want to activate the DEBUG MODE for loopback to view a log about the queries of the database etc.. Thanks!

[dougal83]

@dhmlau Is the lb3 page still relevant? https://loopback.io/doc/en/lb3/Setting-debug-strings.html I think that is what is being requested.

[pookdeveloper]

@dougal83 yes, now it is used the same as raymondfeng commented in the issue: https://github.com/strongloop/loopback-next/issues/3027

I want to know if I can use that with nodemon and restart automatically the server: Like that @Narrator says before (https://github.com/strongloop/loopback-next/issues/2791#issuecomment-486292004), I mean Loopback in debug mode and vscode in debug mode, thanks

[dougal83]

@pookdeveloper So if I understand correctly, these are env variables? So perhaps, inject them? See https://stackoverflow.com/questions/29971572/how-do-i-add-environment-variables-to-launch-json-in-vscode. Is that what you are looking for?

[pookdeveloper]

yes @dougal83 , this is i needed !! Thanks!!
"env": { "DEBUG": "loopback:connector:*" },
Entry launch.json file:
json { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Server auto reload", "runtimeExecutable": "nodemon", "program": "${workspaceFolder}/index.js", "outFiles": [ "${workspaceFolder}/**/*.js" ], "env": { "DEBUG": "loopback:connector:*" }, "restart": true, "console": "integratedTerminal", "internalConsoleOptions": "neverOpen", "envFile": "${workspaceFolder}/.env", } ] }
I run:
➜ npm run build:watch
Then enter debug mode F5 in VSCode
Thanks again!

[pavelgronsky]

Thanks!