I have an application that’s a bit like CodePen, JSBin, etc. where there’s a ~fullscreen sandboxed iframe which contains the actual (user-written) content of the page.
The top-level frame is not “relevant” to users/developers on the platform, but the top-level frame is of course is what’s “focussed” in DevTools by default whenever DevTools is opened via Ctrl+Shift+I/J.
This can be confusing to newbie users, because they expect to be able to e.g. type a global variable and hit enter. They don’t realize that they have to first open the console tab, then find the dropdown, then find the correct frame in that dropdown (or, as a hacky shortcut, they can use the element selector and click an element inside the iframe). This isn’t an issue if “Inspect Element” is used to open DevTools, but users don’t know that by default.
I’m wondering whether there’s any way to “tell” DevTools to focus on the iframe instead of the top-level frame.
I’m definitely open to accepting somewhat “hacky” solutions here. For example, I’ve noticed that Cloudflare Turnstile (Captcha) programmatically/dynamically triggers a debugger statement if DevTools is open, which causes the containing frame/worker (of that debugger statement) to gain “focus” within DevTools. It somehow clears itself moments later (maybe via terminating/deleting the worker/frame from the outside?). This is actually a bit annoying, but probably less annoying to a newbie coder than not knowing why DevTools “isn’t working” due to having the wrong frame focus.
That said, ideally there would be a slightly less disruptive way than this to get a frame to “grab focus” within DevTools.
Note: My current solution here is to tell users to right-click and “Inspect Element” as a way to open DevTools. I’m looking for a better solution than this.