Toto
Toto

Reputation: 397

Get a proper DOM copy

With the objective of debugging an IE9 styles issue which is not present on Chrome or Firefox, I thought I could compare the 'calculated' DOM on IE9 vs these two browsers (I say calculated DOM because most of my page is made through DOM manipulation since it is using GWT). However I cannot get a proper copy of the DOM with Google Chrome. I go "inspect element", then click the element I want, right click > copy, then paste that into a text file.

If I select the top html element, I end up with just that !

<html><head>
        <title>title</title>
        </head><frameset>
            <frame src="ezaeza.jsp" name="sqdsqdsq" id="sqdsqdsq" scrolling="no" noresize="noresize">
            <frameset cols="210,20,*" border="0" name="retract" id="retract">
                <frame src="one.jsp" noresize="noresize" name="jiojiji" id="jiojiji">
                <frame src="two.jsp" noresize="noresize" name="jiojiji" id="jiojiji" scrolling="no">
                <frame src="three.jsp" noresize="noresize" name="main" id="main">
            </frameset>
        </frameset>     


</html>

And I could end up with a subtree copy being bigger than the copy of the parent tree. This make no sense, any idea what I am doing wrong ?

Copying the DOM (and failing)

Upvotes: 0

Views: 514

Answers (1)

Garbee
Garbee

Reputation: 10991

This seems to be working as expected. The copy command here is copying the DOM of the primary document context. Frames and iframes for example create new document contexts within the primary page. DevTools will only copy the given context. To create the full structure, you would need to open each frame and copy against their HTML element as well. This is also recursive in case they have frames/iframes within them.

A new document context is displayed with #document in the tree view. New document context

For anyone wanting to experiment with this, a sample site using frames can be found at quackit.

Upvotes: 1

Related Questions