Overview

Because the iFrame is obscured by the React app that renders an overlay in front of it, it is very difficult to inspect the content of the iFrame.

There is a secret keyboard shortcut that was snuck in that is very very helpful for debugging the output inside the iFrame.

If you press and hold the V key, the React app will 'disappear' until you release the key.

If you press the V key and then click on the iFrame (focusing into it) then the V key can be released and the UI will remain hidden. Once hidden, it becomes much easier to use the browser's developer tools to inspect elements inside the iFrame.

You can then click outside of the iFrame and tap the V key to return the UI.

Proposed resolution

This V key 'secret' should be explained in contributing.md.

User interface changes

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

jessebaker created an issue. See original summary.

wim leers’s picture

Component: Page builder » Documentation
Assigned: jessebaker » Unassigned
Status: Active » Reviewed & tested by the community

🤯🤩

wim leers’s picture

Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.