CODEWITHSUNDEEP
iframegoogle-chrome-devtools
user159
user159

Reputation: 1343

How to inspect iframes in Chrome DevTools?

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:

chrome-iframe-console

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).

Upvotes: 10

Views: 16107

Answers (2)

kawthuldrok
kawthuldrok

Reputation: 101

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.

Upvotes: 0

woxxom
woxxom

Reputation: 73846

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).

Upvotes: 6

Related Questions