Skip to content

Commit

Permalink
Add VSCode Chrome debugging support (#1088)
Browse files Browse the repository at this point in the history
## What is this PR doing?

Adds support for debugging Playground using VSCode and Chrome.

## What problem is it solving?

It simplifies debugging of the Playground web version.

## How is the problem addressed?

By adding a VSCode configuration entry.

## Testing Instructions

- Checkout this branch
- Start Playground
- Open the project in VSCode
- Open the _Run and Debug_ tab
- Select _Launch Chrome_ and click Start Debugging
- Confirm that Chrome debugging works (it sometimes requires a reload)

![Screenshot 2024-03-06 at 10 34
49](https://github.com/WordPress/wordpress-playground/assets/1199991/13a534b5-47ea-458e-a0c9-d580a0b1043a)
  • Loading branch information
bgrgicak authored Mar 7, 2024
1 parent 4ebb398 commit 740aa4e
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 0 deletions.
7 changes: 7 additions & 0 deletions .vscode/launch.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,13 @@
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "chrome",
"url": "http://localhost:5400/website-server/",
"webRoot": "${workspaceFolder}"
},
{
"name": "Test playground sync",
"request": "launch",
Expand Down
15 changes: 15 additions & 0 deletions packages/docs/site/docs/13-contributing/02-code.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,18 @@ valet proxy playground.test http://localhost:5400 --secure
```

Your dev server is now available via https://playground.test.

## Debugging

### Debugging with VSCode and Chrome

Playground can be debugged using VSCode and Chrome. To do so, follow these steps:

- Open the project in VSCode
- Go to the _Run and Debug_ view (Ctrl+Shift+D)
- Select _Launch Chrome_ from the dropdown
- Click the green play button to start the debugger (F5)

### Debugging PHP

In the web version of Playground, you can see PHP errors in the browser console. PHP errors are also logged after every PHP request using `console.debug` in the browser console.

0 comments on commit 740aa4e

Please sign in to comment.