Title: Debugging with Xdebug in WordPress Playground
Published: July 15, 2026
Last modified: July 16, 2026

---

# Debugging with Xdebug in WordPress Playground

## In this article

 * [Why Xdebug matters for PHP WASM](https://developer.wordpress.org/playground/developers/xdebug/?output_format=md#why-xdebug-matters-for-php-wasm)
 * [XDebug on WordPress Playground](https://developer.wordpress.org/playground/developers/xdebug/?output_format=md#xdebug-on-wordpress-playground)
 * [Two debugging approaches](https://developer.wordpress.org/playground/developers/xdebug/?output_format=md#two-debugging-approaches)
 * [What you’ll need](https://developer.wordpress.org/playground/developers/xdebug/?output_format=md#what-youll-need)

[ Back to top](https://developer.wordpress.org/playground/developers/xdebug/?output_format=md#wp--skip-link--target)

Xdebug is a debugging extension for PHP that lets you set breakpoints, inspect variables,
and step through your code. WordPress Playground includes Xdebug in its WebAssembly-
compiled PHP, so you can debug WordPress code running directly in your browser or
IDE.

## 󠀁[Why Xdebug matters for PHP WASM](https://developer.wordpress.org/playground/developers/xdebug/?output_format=md#why-xdebug-matters-for-php-wasm)󠁿

Debugging PHP code in WebAssembly is different from debugging traditional PHP. Without
Xdebug, you’re limited to `var_dump()` and `error_log()` statements. Xdebug gives
you a proper debugger with breakpoints, variable inspection, and call stack navigation—
the same tools you’d use when debugging PHP on a regular server.

## 󠀁[XDebug on WordPress Playground](https://developer.wordpress.org/playground/developers/xdebug/?output_format=md#xdebug-on-wordpress-playground)󠁿

For a quick start, check the [getting started with Xdebug guide](https://developer.wordpress.org/playground/developers/xdebug/getting-started)

You’ll learn to debug:

 * Form processing logic
 * Input validation
 * WordPress hooks and filters

## 󠀁[Two debugging approaches](https://developer.wordpress.org/playground/developers/xdebug/?output_format=md#two-debugging-approaches)󠁿

WordPress Playground supports two ways to debug with Xdebug:

**Chrome DevTools**: Debug directly in your browser without any IDE setup. Great
for quick debugging sessions or when you want to see everything in one place.

**IDE integration**: Use VSCode or PhpStorm with full IDE features, including code
navigation, project-wide search, and advanced breakpoint conditions. Better for 
complex debugging scenarios.

## 󠀁[What you’ll need](https://developer.wordpress.org/playground/developers/xdebug/?output_format=md#what-youll-need)󠁿

 * Node.js installed
 * Chrome or Chromium browser (for DevTools debugging)
 * Visual Studio Code or PhpStorm (for IDE debugging, optional)
 * Basic familiarity with WordPress plugin development

**Next**: [Getting Started with Xdebug ](https://developer.wordpress.org/playground/developers/xdebug/getting-started)

First published

July 15, 2026

Last updated

July 16, 2026

Edit article

[ Improve it on GitHub: Debugging with Xdebug in WordPress Playground ](https://raw.githubusercontent.com/WordPress/wordpress-playground/trunk/packages/docs/site/docs/developers/07-xdebug/01-introduction.md)

Changelog

[ See list of changes: Debugging with Xdebug in WordPress Playground ](https://developer.wordpress.org/playground/developers/xdebug/?output_format=md#)

[  Previous: Using WordPress Playground in Node.js](https://developer.wordpress.org/playground/developers/local-development/php-wasm-node/)

[  Next: Getting Started with Xdebug](https://developer.wordpress.org/playground/developers/xdebug/getting-started/)