Skip to content

Commit

Permalink
Add vscode web debugger and compound (#9567)
Browse files Browse the repository at this point in the history
Adds 2 debug configurations to vscode/launch.json

- Web Debugger (launches the built-in chrome web debugger)
- Compound of Dev + Api + Web (launches a fully debuggable redwood with
a single configuration)

It makes sense to disable the browser open in the redwood.toml if you
want to use the web debugger alone or in compound.

```
[browser]
  open = false
 ```
 
 It'd also be possible to add a --fwd="--open=false" but that is currently being discussed as an issue in #9209

---------

Co-authored-by: Tobbe Lundberg <tobbe@tlundberg.com>
  • Loading branch information
xmaxcooking and Tobbe committed Dec 5, 2023
1 parent e9f5f01 commit cc33ebc
Show file tree
Hide file tree
Showing 8 changed files with 194 additions and 28 deletions.
24 changes: 22 additions & 2 deletions __fixtures__/test-project/.vscode/launch.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"version": "0.3.0",
"configurations": [
{
"command": "yarn redwood dev --apiDebugPort 18911",
"command": "yarn redwood dev --apiDebugPort 18911", // you can add --fwd='--open=false' to prevent the browser from opening
"name": "Run Dev Server",
"request": "launch",
"type": "node-terminal"
Expand All @@ -18,7 +18,16 @@
"localRoot": "${workspaceFolder}/node_modules/@redwoodjs/api-server/dist",
"remoteRoot": "${workspaceFolder}/node_modules/@redwoodjs/api-server/dist",
"sourceMaps": true,
"restart": true
"restart": true,
"preLaunchTask": "WaitForDevServer",
},
{
"name": "Launch Web debugger",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8910",
"webRoot": "${workspaceRoot}/web/src",
"preLaunchTask": "WaitForDevServer",
},
{
"command": "yarn redwood test api",
Expand All @@ -32,5 +41,16 @@
"request": "launch",
"type": "node-terminal"
},
],
"compounds": [
{
"name": "Start Debug",
"configurations": [
"Run Dev Server",
"Attach API debugger",
"Launch Web debugger"
],
"stopAll": true
}
]
}
43 changes: 43 additions & 0 deletions __fixtures__/test-project/.vscode/tasks.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
{
"version": "2.0.0",
"tasks": [
{
"label": "WaitForDevServer",
"group": "none",
"type": "shell",
"windows": {
"command": "powershell",
"args": [
"-NoProfile",
"-ExecutionPolicy", "Bypass",
"$port = $env:PORT; while (-not (Test-NetConnection -ComputerName localhost -Port $port)) { Start-Sleep -Seconds 1 };"
]
},
"linux": {
"command": "bash",
"args": [
"-c",
"port=$PORT; while ! nc -z localhost $port; do sleep 1; done;"
]
},
"osx": {
"command": "bash",
"args": [
"-c",
"port=$PORT; while ! nc -z localhost $port; do sleep 1; done;"
]
},
"options": {
"env": {
"port": "18911"
}
},
"presentation": {
"reveal": "silent",
"revealProblems": "onProblem",
"panel": "shared",
"close": true
}
},
]
}
47 changes: 25 additions & 22 deletions docs/docs/project-configuration-dev-test-build.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -104,40 +104,28 @@ You can find all the details in the [source](https://github.com/redwoodjs/redwoo

You can customize the types that Redwood generates from your project too! This is documented in a bit more detail in the [Generated Types](typescript/generated-types#customising-codegen-config) doc.

## Debugger configuration
The `yarn rw dev` command is configured by default to launch a debugger on the port `18911`, your Redwood app also ships with default configuration to attach a debugger from VSCode.

Simply run your dev server, then attach the debugger from the "run and debug" panel. Quick demo below:

<ReactPlayer width='100%' height='100%' controls url='https://user-images.githubusercontent.com/1521877/159887978-95075ccd-d10c-403c-90cc-a5b944c429e3.mp4' />
## Debug configurations

### Dev Server
The `yarn rw dev` command is configured by default to open a browser and a debugger on the port `18911` and your redwood app ships with several default configurations to debug with VSCode.

<br/>

> **ℹ️ Tip: Can't see the "Attach debugger" configuration?** In VSCode
>
> You can grab the latest launch.json from the Redwood template [here](https://github.com/redwoodjs/redwood/blob/main/packages/create-redwood-app/templates/ts/.vscode/launch.json). Copy the contents into your project's `.vscode/launch.json`

#### Customizing the debug port
You can choose to use a different debug port in one of two ways:

#### Customizing the configuration
**a) Using the redwood.toml**

Add/change the `debugPort` under your api settings
Add/change the `debugPort` or `open` under your api settings

```toml title="redwood.toml"
[web]
# .
# .
[api]
port = 8911
# .
// highlight-next-line
debugPort = 18911 # 👈 change me!
debugPort = 18911 # change me!
[browser]
// highlight-next-line
open = true # change me!
```

If you set it to `false`, no debug port will be exposed. The `debugPort` is only ever used during development when running `yarn rw dev`

**b) Pass a flag to `rw dev` command**

You can also pass a flag when you launch your dev servers, for example:
Expand All @@ -149,6 +137,21 @@ The flag passed in the CLI will always take precedence over your setting in the

Just remember to also change the port you are attaching to in your `./vscode/launch.json`

### API and Web Debuggers
Simply run your dev server, then attach the debugger from the "run and debug" panel. Quick demo below:

<ReactPlayer width='100%' height='100%' controls url='https://user-images.githubusercontent.com/1521877/159887978-95075ccd-d10c-403c-90cc-a5b944c429e3.mp4' />

### Compound Debugger
The compound configuration is a combination of the dev, api and web configurations.
It allows you to start all debugging configurations at once, facilitating simultaneous debugging of server and client-side code.

<br/>

> **ℹ️ Tip: Can't see the debug configurations?** In VSCode
>
> You can grab the latest launch.json from the Redwood template [here](https://github.com/redwoodjs/redwood/blob/main/packages/create-redwood-app/templates/ts/.vscode/launch.json). Copy the contents into your project's `.vscode/launch.json`
## Ignoring the `.yarn` folder

The `.yarn` folder contains the most recent Yarn executable that Redwood supports
Expand Down
24 changes: 22 additions & 2 deletions packages/create-redwood-app/templates/js/.vscode/launch.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"version": "0.3.0",
"configurations": [
{
"command": "yarn redwood dev --apiDebugPort 18911",
"command": "yarn redwood dev --apiDebugPort 18911", // you can add --fwd='--open=false' to prevent the browser from opening
"name": "Run Dev Server",
"request": "launch",
"type": "node-terminal"
Expand All @@ -18,7 +18,16 @@
"localRoot": "${workspaceFolder}/node_modules/@redwoodjs/api-server/dist",
"remoteRoot": "${workspaceFolder}/node_modules/@redwoodjs/api-server/dist",
"sourceMaps": true,
"restart": true
"restart": true,
"preLaunchTask": "WaitForDevServer",
},
{
"name": "Launch Web debugger",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8910",
"webRoot": "${workspaceRoot}/web/src",
"preLaunchTask": "WaitForDevServer",
},
{
"command": "yarn redwood test api",
Expand All @@ -32,5 +41,16 @@
"request": "launch",
"type": "node-terminal"
},
],
"compounds": [
{
"name": "Start Debug",
"configurations": [
"Run Dev Server",
"Attach API debugger",
"Launch Web debugger"
],
"stopAll": true
}
]
}
29 changes: 29 additions & 0 deletions packages/create-redwood-app/templates/js/.vscode/tasks.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"version": "2.0.0",
"tasks": [
{
"label": "WaitForDevServer",
"group": "none",
"type": "shell",
"command": "bash",
"args": [
"-c",
"while ! echo -n > /dev/tcp/localhost/18911; do sleep 1; done;"
],
"windows": {
"command": "powershell",
"args": [
"-NoProfile",
"-ExecutionPolicy", "Bypass",
"while (-not (Test-NetConnection -ComputerName localhost -Port 18911)) { Start-Sleep -Seconds 1 };"
]
},
"presentation": {
"reveal": "silent",
"revealProblems": "onProblem",
"panel": "shared",
"close": true
}
},
]
}
24 changes: 22 additions & 2 deletions packages/create-redwood-app/templates/ts/.vscode/launch.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"version": "0.3.0",
"configurations": [
{
"command": "yarn redwood dev --apiDebugPort 18911",
"command": "yarn redwood dev --apiDebugPort 18911", // you can add --fwd='--open=false' to prevent the browser from opening
"name": "Run Dev Server",
"request": "launch",
"type": "node-terminal"
Expand All @@ -18,7 +18,16 @@
"localRoot": "${workspaceFolder}/node_modules/@redwoodjs/api-server/dist",
"remoteRoot": "${workspaceFolder}/node_modules/@redwoodjs/api-server/dist",
"sourceMaps": true,
"restart": true
"restart": true,
"preLaunchTask": "WaitForDevServer",
},
{
"name": "Launch Web debugger",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8910",
"webRoot": "${workspaceRoot}/web/src",
"preLaunchTask": "WaitForDevServer",
},
{
"command": "yarn redwood test api",
Expand All @@ -32,5 +41,16 @@
"request": "launch",
"type": "node-terminal"
},
],
"compounds": [
{
"name": "Start Debug",
"configurations": [
"Run Dev Server",
"Attach API debugger",
"Launch Web debugger"
],
"stopAll": true
}
]
}
29 changes: 29 additions & 0 deletions packages/create-redwood-app/templates/ts/.vscode/tasks.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"version": "2.0.0",
"tasks": [
{
"label": "WaitForDevServer",
"group": "none",
"type": "shell",
"command": "bash",
"args": [
"-c",
"while ! echo -n > /dev/tcp/localhost/18911; do sleep 1; done;"
],
"windows": {
"command": "powershell",
"args": [
"-NoProfile",
"-ExecutionPolicy", "Bypass",
"while (-not (Test-NetConnection -ComputerName localhost -Port 18911)) { Start-Sleep -Seconds 1 };"
]
},
"presentation": {
"reveal": "silent",
"revealProblems": "onProblem",
"panel": "shared",
"close": true
}
},
]
}
2 changes: 2 additions & 0 deletions packages/create-redwood-app/tests/template.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ describe('template', () => {
"/.vscode/extensions.json",
"/.vscode/launch.json",
"/.vscode/settings.json",
"/.vscode/tasks.json",
"/.yarn",
"/.yarn/releases",
"/.yarn/releases/yarn-3.7.0.cjs",
Expand Down Expand Up @@ -103,6 +104,7 @@ describe('JS template', () => {
"/.vscode/extensions.json",
"/.vscode/launch.json",
"/.vscode/settings.json",
"/.vscode/tasks.json",
"/.yarn",
"/.yarn/releases",
"/.yarn/releases/yarn-3.7.0.cjs",
Expand Down

0 comments on commit cc33ebc

Please sign in to comment.