"Copy as HTML" on nested IFrame elements in Chrome Inspector

Question

In Chrome's web inspector, if you right-click a DOM element there's a "Copy as HTML" option that will normally give you an HTML string of that element and all its children. However, it doesn't seem to ever include the contents of IFrame tags despite the fact they appear in the inspector as child nodes.

The problem isn't caused by cross-domain restrictions: Even same-domain IFrames are excluded from the copied HTML.

Is there any way around this, short of just copy-and-pasting the HTML root of every nested IFrame and manually stitching them together in a text editor? I work for a site whose third-party ad scripts often produce large, sprawling trees of nested IFrames, and I need a way for coworkers to be able to copy-and-paste that structure so I can debug ad issues without my physically sitting down at their desk.

Example: jsfiddle.net/28yrA

Larry Battle
– Larry Battle

2012-12-13 23:14:26 +00:00
Commented Dec 13, 2012 at 23:14 — Larry Battle
– Larry Battle, Commented Dec 13, 2012 at 23:14

Larry Battle · Accepted Answer · 2012-12-14 00:20:35Z

I believe Google Chrome has hard coded the behavior inside their browser somewhere but I don't have time to find the section of code.

Here's a work around that will grab the html from all the iframes current on the webpage using google chrome.

Setup:

Close all of your Google Chrome browsers, then launch Google Chrome with web security disabled. Otherwise running DisplayIframeContent.js will produce an error like this.

Unsafe JavaScript attempt to access frame with URL ...

Example:

cd LOCATION\OF\GOOGLE\CHROME
chrome.exe --disable-web-security

When Google Chrome loads you should see an yellow warning stating,

You are using an unsupported command-line flag: --disable-web-security. Stabilty and security will suffer.

Usage:

After launching Google Chrome open up your test website.
Press F12 to open the devtools.
Copy and paste the content of jQuery inside the console.
Copy and paste DisplayIframeContent.js inside the console.

DisplayIframeContent.js

// @author Larry Battle <bateru.com/news> 12.13.2012 // requires jQuery 1.8.3+ clear(); if( !$("iframe").length ){ console.log("No iframes were found"); }else{ $("iframe").each(function (i) { console.log( "### iframe[%s].src = (%s)", i, $(this).attr("src") ); console.log( $(this).contents().find("html").html() ) }); } "done";

Copy and paste the output from the console.

Expected Output:

Example URL: http://jsfiddle.net/28yrA/ Output:

### iframe[0].src = (javascript:false) ...HTML... ### iframe[1].src = (javascript:false) ...HTML... ### iframe[2].src = (javascript:false) ...HTML... ### iframe[3].src = (http://fiddle.jshell.net/28yrA/show/) ...HTML... "done"

Excellent answer. Disabling XSS protection is a big hammer, but I doubt there's any other way. Thanks!

LeeC · Accepted Answer · 2020-01-22 16:02:19Z

I finally found a solution, via a Chrome Extension called Save Page WE by DW-dev.

https://chrome.google.com/webstore/detail/save-page-we/dhhpefjklgkmgeafimnjhojgjamoafof

It is also available for Firefox. https://addons.mozilla.org/en-US/firefox/addon/save-page-we/

Jean-François Savard · Accepted Answer · 2015-04-17 22:03:00Z

The other answer may works, but I don't like disabling the security just to copy some html.

Here another way that is IMHO way simplier.

First Inspect element and copy the iframe element now paste it wherever you want to add it.

The result should be en empty iframe tag with all it attributes :

<iframe src="src"></iframe>

Now inside that iframe manually type the #document and DOCTYPE so you now have something like :

<iframe> #document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </iframe>

Copy the parent node of the document in the iframe as html and it will copy all it childs as if you would copy a normal html page.

Simply paste back under the doctype and you have your entire iframe. The ending result should look something like this

<iframe> #document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <!-- All the child nodes --> </html> </iframe>

Collectives™ on Stack Overflow

"Copy as HTML" on nested IFrame elements in Chrome Inspector

3 Answers 3

Setup:

Usage:

Expected Output:

1 Comment

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Setup:

Usage:

Expected Output:

1 Comment

Comments

1 Comment

Linked

Related