Zenn
😸

[Nuxt3] debugging on VSCode

2024/07/17に公開
VS Code
debug
Windows 11
Nuxt 3
tech

[Environment]
node: v20.15.1
nuxt: 3.12.3
os: windows11

1. create "launch.json"

We can ceate ".vscode\launch.json" by hand, but for now, I used the function of VSCode.

Select "Run and Debug" view on VSCode.
Select "create a launch.json file" in the Run menu.

Replace the content of launch.json with these below.
These are the same as the contents in "Example VS Code Debug Configuration"

.vscode\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": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "server: nuxt",
      "outputCapture": "std",
      "program": "${workspaceFolder}/node_modules/nuxi/bin/nuxi.mjs",
      "args": [
        "dev"
      ],
    }
  ],
  "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": [
        "server: nuxt",
        "client: chrome"
      ]
    }
  ]
}

2. additional setting

I use ".env.local" to set "development environment".
So add the argument "--dotenv .env.local" to the command of starting server.

And I would like to access from external devices(like mobile) to dev-server.
So add the argument "--host" too.

Modify "args" setting in launch.json. like this below.

.vscode\launch.json
...
      "program": "${workspaceFolder}/node_modules/nuxi/bin/nuxi.mjs",
      "args": [
        "dev", "--host","--dotenv", ".env.local"
      ],
...

At the same time, modify "dev" setting in "package.json" too.

package.json
...
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev --host --dotenv .env.local",
...

3. start debugging

When we start Debugging,

  • Select "Run and Debug" view on VSCode.
  • And select "fullstack: nuxt", and push the triangle button in green.

note: When debugging, the server and client process will start.
And When we stop the debugging, we need to push "stop button" twice.

When we select "client: chrome", only our browser will start.
If we select "server: nuxt", only the server process will start.

Discussion