Using React Dev Tools (react-devtools) with WordPress and Safari

readme.md

Introduction

The react-devtools package can be used to debug React applications in Safari (and other environments). Here's a quick example of using react-devtools with WordPress and Safari. This is useful for use cases where you're building React apps in wp-admin. It's also useful for exploring the structure and design of the Gutenberg block editor.

Install react-devtools package

Use these instructions to install react-devtools.

Install the PHP plugin code on this Gist

If you don't know how to add the code in enqueue-react-devtools-script.php as a plugin to your site, try using Pluginception to create a new custom plugin, paste in the code, and activate your new custom plugin.

Note: if your react-devtools screen shows you a different script source URL, update the PHP code to match. In the example, the URL is http://localhost:8097. Yours might be different.

Using it

Navigate to your React app in wp-admin, flip over to the react-devtools app, and explore your React app in the interface.

Screenshot of react-devtools displaying the structure of the Gutenberg block editor in WordPress.

Resources

https://www.npmjs.com/package/react-devtools

enqueue-react-devtools-script.php

<?php
// This loads the react-devtools script in wp-admin when using Safari.
add_action( 'admin_enqueue_scripts', function() {
	if ( ! empty( $_SERVER['HTTP_USER_AGENT'] ) && strpos( $_SERVER['HTTP_USER_AGENT'], 'Safari' ) !== false ) {
		?>
		<script src="http://localhost:8097"></script>
		<?php
	}
} );