How to inspect iframes in Chrome DevTools?

Question

I'd like to point the developer tools at a specific iframe within a document. In Firefox, there is a button in the toolbar. In Chrome, I found this:

But I don't know how to use this feature in panels other than the Console. In Firefox, "If you select an entry in the list, all the tools in the toolbox - the Inspector, the Console, the Debugger and so on - will now target only that iframe, and will essentially behave as if the rest of the page does not exist."

How to inspect elements in an iframe as if the rest of the page does not exist? I need to see how the iframe fits in the parent page, but don't want to see the elements of the parent page in the Elements panel (because of the depth of the elements).

Marcel

Answer 1

One possible workaround is to enable the still-in-development Out-of-process iframes (OOPIF) using chrome://flags/#enable-site-per-process flag:

• A new devtools floating window will open when an iframe is inspected via rightclick menu.
  To inspect a youtube-like iframe with a custom context menu just rightclick again on that menu.
• IFRAME contents won't be shown in the parent Inspector since it's in a different process.

You may want to do it on a separate installation of Chrome like Canary or a portable because the feature breaks iframes on some sites (these flags affect the entire data folder with all profiles inside).

Medlar

I didn't see any difference after enabling OOPIFs and relaunching Chrome. IIUC it's because the iframe and the parent document is in the same origin. – Marcel

This option is no longer available – Benignant

Because it's enabled by default and devtools is multi-process now. – Medlar

Answer 2

In chrome debugger, before the end of the iframe object in your html code ie. </iframe> there should be a tiny the horizontal 3 dot button. If you push that button a #document should pop up which will contain the inspectable elements of the code contained in the iframe.

Frondescence