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.
Use these instructions to install react-devtools
.
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.
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.