Inspecting DOM as HTML w/ Plunker

[paroche]

Is there a way to see the DOM as HTML in the Plunker sandbox? When we are changing the DOM it can be nice to see what the new document looks like, in HTML form. The only way I've managed to do this so far is to put the code in an HTML file, load it in the browser (Chrome), then look at the Elements in DevTools. That's not all that hard, but is there a simpler way?

Does this make sense?

[iliakan]

Not sure there's a simpler way.

P.S. We could implement something, but people should know how to use DevTools if they are moving towards WebDev ;)

[paroche]

Well, they should then know (be told) that it's not going to work in the sandbox, no? If people are supposed to know more than has been taught in tutorial (besides basic HTML & CSS), it would be good to be clear on that.

[iliakan]

Here we talk about dev tools, the Elements pane: http://javascript.info/dom-nodes#see-it-for-yourself
Should we separate it to another article maybe?

[paroche]

I'm not talking about how to use dev tools, per se, just that it doesn't seem to necessarily work for all things in the Plunker sandbox, which is what's used for all the demos, etc.

[iliakan]

Maybe I'm not just getting the idea. Could you provide an example of what's confusing now and can be improved?

[paroche]

In the course of testing the examples, I have HTML w/ JS code that modifies the DOM. I run it in the Plunker sandbox. I can see the results (the modified web page, displayed), but have not been able to get devtools to show me the modified DOM contained within the Plunker window. Maybe there's a way, but I haven't found it. Instead, I've been keeping an .html file on my computer, pasting the HTML & JS into it, then opening it in a Chrome tab. Then, of course, devtools elements will show me the modified DOM. I was asking if this could also be done in Plunker. And if not, suggesting that maybe this should be mentioned.

[iliakan]

@paroche That's bit tricky. The plunker shows the document inside an iframe.

The simplest way is to right-click on the element in the document and choose "Inspect" from the menu.

That is, here: