0

Hi im demonstrating the html tags that are new in CSS3 and I'm making a documentation for the easy viewing and interpretation on comparing both the source code and the output.And its its really hard for me going to the source code and then selecting the file and browsing it on the browser

It would be great if I could view both the source code and the output on the same html page.

For example(I m talking from the page I ve attached below) if I select Source code the source code must be displayed on the screen or from any of the text editors.

I don't know whether it is possible to do so,If possible it would be great if anyone of you could guide me.

On clicking the source code link the source code must be viewed

Improve this question
6
  • 1
    You mean you want what is available when typing ctrl-maj-I in most browsers ? Commented Aug 16, 2012 at 11:12
  • 1
    my link code is <a href="file:///home/gladnick/work/projects/css3/2d-matrix-method.html"><Pre>2D Transform Matrix Method Source Code</pre></a> and the source code of "file:///home/gladnick/work/projects/css3/2d-matrix-method.html" must be displayed on clicking the link Commented Aug 16, 2012 at 11:16
  • 1
    @dystroy sorry couldn't understand what is the "maj" in that ctrl-maj-I command!! Commented Aug 17, 2012 at 6:45
  • 1
    Sorry. I meant ctrl-uppercase-I. That's the shortcut to open the browser's developer tools. For example developers.google.com/chrome-developer-tools/docs/elements Commented Aug 17, 2012 at 6:47
  • 1
    It shows you the complete source code, with a lot of goodies (interpreted css with reasons, element displayed when you hover the mouse, search, etc.). I suggest you read the doc. Other browsers have similar tools and they're the most essential tool of any web developer. Commented Aug 17, 2012 at 8:04

2 Answers 2

Reset to default
2

To get the source of just one element, do this:

HTML: <div id="one"><span id="two"></span></div>
JS:

document.getElementById('one').innerHTML // returns <span id="two"></span>
document.getElementById('one').outerHTML // returns <div id="one"><span id="two"></span></div>

To get the source of the entire page, do this: 

document.doctype + document.documentElement.outerHTML

document.doctype returns the doctype, and document.documentElement.outerHTML returns the code for the <html> tag and everything inside it.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Use the developer tools you have in all modern browsers (the most advanced ones being Chrome and Firefox).

You typically open such a toolset using the Ctrl-Uppercase-i shortcut.

Then you have a lot of useful tools, as described here for Chrome or here for Firefox.

One of them seems to be exactly what you need. For example in Chrome, the first tab, called "Elements", shows you the source code with a lot of goodies (interpreted css with reasons, element displayed when you hover the mouse, search, etc.).

I'd suggest you take the time to read the linked documentation, as this is an essential tool of any web developer. And you won't be able to stop using those tools as soon as you go deeper in javascript or css.

Improve this answer

2 Comments

Editing(adding the codes,saving,etc) the source code is going to be another challenge through this developer tools right?
Yes. You must use an editor too. Note that you generally can't simply generate and see as most modern web sites aren't static : part of the content is generated by javascript so user interactions change the displayed page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.