playground-tools

WordPress Playground tools

This repository contains the tools and applications built using WordPress Playground:

• Playground plugin for WordPress to clone your site
• Playground Block for Gutenberg
• WordPress Playground for Visual Studio Code
• "Edit Visually" Browser extension powered by WordPress Playground
• wp-now

If you were looking for the Playground itself, you can find it here: WordPress Playground

Contributing

Playground Tools are in their early days. If the feature you need is missing, you are more than welcome to start a discussion, open an issue, and even propose a Pull Request to implement it.

Getting started

Clone the repo and build the projects:

git clone https://github.com/WordPress/playground-tools
cd playground-tools
npm install
npm run build
# or `npm run dev` to watch for changes

You'll find the built assets in the dist directory. You can make changes, run the VS Code extension or install the interactive code plugin, and test them.

Debug Flags

The following flags are available on the wp-now cli tool to aid in debugging:

• --inspect - Connect to a Node debugging client.
• --inspect-brk - Connect to a Node debugging client, break immediately on script execution start.
• --trace-exit - Prints a stack trace whenever an environment is exited proactively, i.e. invoking process.exit().
• --trace-uncaught - Print stack traces for uncaught exceptions; usually, the stack trace associated with the creation of an Error is printed, whereas this makes Node.js also print the stack trace associated with throwing the value (which does not need to be an Error instance).
• --trace-warnings - Print stack traces for process warnings (including deprecations).

Usage:

npx wp-now start [FLAGS]

Connecting to DevTools

When connecting to DevTools with --inspect or --inspect-brk, the NodeJS debug icon should appear in green at the top left of the DevTools window, click on it.

You should see the step-debugger open, with the script paused on the first line if --inspect-brk was selected: