WP Manifestindependent plugin directory
manifest / developer / divi-react-scan

Divi React Scan

Run React Scan inside the Divi 5 Visual Builder — both the builder UI and the canvas iframe the Chrome extension can't reach.

by eduard-un · github.com/eduard-un/divi-react-scan · website

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/eduard-un/divi-react-scan/archive/refs/heads/main.zip
Readme github.com/eduard-un/divi-react-scan ↗

Runs one React Scan instance across both React trees in the Divi 5 Visual Builder:

  • the builder panels in the top window;
  • page modules in the same-origin #et-vb-app-frame iframe.

The toolbar and overlay live in the top window. Divi registers the iframe's React renderer on the parent's DevTools hook, so one instrumentation receives commits from both renderers.

Why the React Scan bundle is patched

Stock React Scan can receive iframe commits through a shared DevTools hook, but it treats every host element's rectangle as if it belonged to the overlay window. An iframe element's getBoundingClientRect() is relative to the iframe viewport, so outlines are offset and mis-scaled when Divi:

  • leaves room for the builder and page bars;
  • centres tablet and phone previews;
  • applies preview zoom with transform: scale(...).

The vendored bundle maps and clips same-origin iframe rectangles into the top viewport before drawing. It also performs deep iframe hit-testing for the inspector and reacts to iframe scrolling, resizing, and style-based zoom.

It additionally fixes an upstream toolbar rendering bug: React Scan's Tailwind stylesheet lives in a shadow root, where browsers ignore its @property registrations, so the power toggle's knob dropped out of its track when scanning was off and element borders went missing.

This is a source patch, not a runtime monkey-patch of minified internals. See patches/README.md for its exact upstream commit, hash, and rebuild steps.

Install

Copy this directory into wp-content/plugins/ and activate it. The built asset is committed; installation needs no package manager or build step.

Requirements

  • Divi 5.x Visual Builder
  • define( 'ET_DEBUG', true ); in wp-config.php for readable component names

When ET_DEBUG is off, the plugin forces React Scan to run against Divi's production React build and warns that component names will be minified.

Runtime design

All plugin assets load only in the top Visual Builder document and only for a user who can edit posts. They load in <head> before Divi's footer React scripts, so the parent DevTools hook exists before either renderer initializes.

The app-frame request loads no React Scan assets. Divi's own footer script assigns the iframe DevTools hook to the parent hook. That assignment is required; the previous two-instance design blocked it with hook-guard.js.

React Scan's auto bundle starts once while evaluating. Options are seeded in localStorage["react-scan-options"] before it loads because calling window.reactScan() afterwards would start a second instrumentation.

useOffscreenCanvasWorker is disabled: iframe scroll and zoom changes update the live outline geometry held on the main thread.

Toolbar

There is one toolbar, initially at bottom-right. Existing React Scan toolbar settings are preserved, so a dragged position survives reloads. Its power toggle controls both React trees.

Turning it off

  1. Use the toolbar's power toggle.
  2. Append ?rscan=0 to the Visual Builder URL.
  3. Define DIVI_REACT_SCAN_DISABLE as true.

Manual verification

  1. Open the Visual Builder and confirm one toolbar.
  2. Type in a settings field; the panel should outline accurately.
  3. Edit a module; its canvas element should outline accurately.
  4. Repeat in desktop, tablet, and phone previews.
  5. Repeat at non-100% preview zoom and while scrolling the canvas.
  6. Use the inspector on both a panel and a canvas module.
  7. Confirm React DevTools still lists both trees.
  8. Add ?rscan=0 and confirm neither document loads React Scan assets.

Tests

Run manually:

node --test assets/__tests__/
php -l divi-react-scan.php

Licence and attribution

This plugin is GPL-2.0-or-later. See LICENSE.

assets/react-scan.js is a modified build of React Scan 0.5.7 by Aiden Bai and contributors, distributed under the MIT licence. The source patch and upstream licence notice are retained in patches/.

Divi is a commercial theme by Elegant Themes and is not included here.