Best Way to View Generated Source of Webpage

Question

I m looking for a tool that will give me the proper generated source including DOM changes made by AJAX requests for input into W3 s validator  I ve tried the following methods    Web Developer Toolbar - Generates invalid source according to the doc-type  e g  it removes the self closing portion of tags   Loses the doctype portion of the page  Firebug - Fixes potential flaws in the source  e g  unclosed tags   Also loses doctype portion of tags and injects the console which itself is invalid HTML  IE Developer Toolbar - Generates invalid source according to the doc-type  e g  it makes all tags uppercase  against XHTML spec   Highlight   View Selection Source - Frequently difficult to get the entire page  also excludes doc-type    Is there any program or add-on out there that will give me the exact current version of the source  without fixing or changing it in some way  So far  Firebug seems the best  but I worry it may fix some of my mistakes   Solution  It turns out there is no exact solution to what I wanted as Justin explained  The best solution seems to be to validate the source inside of Firebug s console  even though it will contain some errors caused by Firebug  I d also like to thank Forgotten Semicolon for explaining why  View Generated Source  doesn t match the actual source  If I could mark 2 best answers  I would

User · Answer

Why not type this is the urlbar   javascript alert document body innerHTML

User · Answer

Justin is dead on  The key point here is that HTML is just a language for describing a document  Once the browser reads it  it s gone  Open tags  close tags  and formatting are all taken care of by the parser and then go away  Any tool that shows you HTML is generating it based on the contents of the document  so it will always be valid   I had to explain this to another web developer once  and it took a little while for him to accept it   You can try it for yourself in any JavaScript console   el   document createElement  div    el innerHTML     lt p gt Some text lt P gt More text   el innerHTML      lt p gt Some text lt  p gt  lt p gt More text lt  p gt    The un-closed tags and uppercase tag names are gone  because that HTML was parsed and discarded after the second line   The right way to modify the document from JavaScript is with document methods  createElement  appendChild  setAttribute  etc   and you ll observe that there s no reference to tags or HTML syntax in any of those functions  If you re using document write   innerHTML  or other HTML-speaking calls to modify your pages  the only way to validate it is to catch what you re putting into them and validate that HTML separately   That said  the simplest way to get at the HTML representation of the document is this   document documentElement innerHTML

User · Answer

Check out  quot View Rendered Source quot  chrome extension  https   chrome google com webstore detail view-rendered-source ejgngohbdedoabanmclafpkoogegdpob

User · Answer

Using the Firefox Web Developer Toolbar  https   addons mozilla org en-US firefox addon 60   Just go to View Source -  View Generated Source  I use it all the time for the exact same thing

User · Answer

Only thing i found is the BetterSource extension for Safari this will show you the manipulated source of the document only downside is nothing remotely like it for Firefox

User · Answer

I was able to solve a similar issue by logging the results of the ajax call to the console   This was the html returned and I could easily see any issues that it had   in my  done   function of my ajax call I added console log results  so I could see the html in the debugger console    x000D   x000D  function GetReversals     x000D          getReversalsLoadingButton   removeClass  d-none    x000D          getReversalsButton   addClass  d-none    x000D   x000D        ajax   x000D          url    Home LookupReversals   x000D          data      LookupReversals   serialize    x000D          type   Post   x000D          cache  false x000D         done function  result    x000D              reversalResults   html result   x000D          console log result   x000D         fail function  jqXHR  textStatus  errorThrown    x000D            alert  There was a problem getting results   Please try again      jqXHR responseText           jqXHR statusText   x000D              reversalResults   html   lt div class  text-danger  gt     jqXHR responseText     lt  div gt     x000D         always function      x000D              getReversalsLoadingButton   addClass  d-none    x000D              getReversalsButton   removeClass  d-none    x000D          x000D    x000D   x000D   x000D

User · Answer

If you load the document in Chrome  the Developer Elements view will show you the HTML as fiddled by your JS code  It s not directly HTML text and you have to open  unfold  any elements of interest  but you effectively get to inspect the generated HTML

User · Answer

updating in response to more details in the edited question    The problem you re running into is that  once a page is modified by ajax requests  the current HTML exists only inside the browser s DOM-- there s no longer any independent source HTML that you can validate other than what you can pull out of the DOM   As you ve observed  IE s DOM stores tags in upper case  fixes up unclosed tags  and makes lots of other alterations to the HTML it got originally  This is because browsers are generally very good at taking HTML with problems  e g  unclosed tags  and fixing up those problems to display something useful to the user   Once the HTML has been canonicalized by IE  the original source HTML is essentially lost from the DOM s perspective  as far as I know   Firefox most likley makes fewer of these changes  so Firebug is probably your better bet    A final  and more labor-intensive  option may work for pages with simple ajax alterations  e g  fetching some HTML from the server and importing this into the page inside a particular element  In that case  you can use fiddler or similar tool to manually stitch together the original HTML with the Ajax HTML  This is probably more trouble than it s worth  and is error prone  but it s one more possibility    Original response here to the original question   Fiddler  http   www fiddlertool com   is a free  browser-independent tool which works very well to fetch the exact HTML received by a browser   It shows you exact bytes on the wire as well as decoded unzipped etc content which you can feed into any HTML analysis tool  It also shows headers  timings  HTTP status  and lots of other good stuff    You can also use fiddler to copy and rebuild requests if you want to test how a server responds to slightly different headers   Fiddler works as a proxy server  sitting in between your browser and the website  and logs traffic going both ways

User · Answer

The below javascript code snippet will get you the complete ajax rendered HTML generated source  Browser independent one  Enjoy     function outerHTML node          if IE  Chrome take the internal method otherwise build one as lower versions of firefox           does not support element outerHTML property   return node outerHTML            function n             var div   document createElement  div    h            div appendChild  n cloneNode true               h   div innerHTML            div   null            return h           node          var outerhtml   outerHTML document getElementsByTagName  html   0    var node   document doctype  var doctypestring     if node            IE8 and below does not have document doctype and you will get null if you access it    doctypestring     lt  DOCTYPE              node name             node publicId     PUBLIC      node publicId                          node publicId  amp  amp  node systemId     SYSTEM                     node systemId          node systemId                          gt                        else                              for IE8 and below you can access doctype like this           doctypestring   document all 0  text             doctypestring  outerhtml

User · Answer

In the Web Developer Toolbar  have you tried the Tools - gt  Validate HTML or Tools - gt  Validate Local HTML options     The Validate HTML option sends the url to the validator  which works well with publicly facing sites   The Validate Local HTML option sends the current page s HTML to the validator  which works well with pages behind a login  or those that aren t publicly accessible   You may also want to try View Source Chart  also as FireFox add-on    An interesting note there       Q  Why does View Source Chart change my XHTML tags to HTML tags       A  It doesn t  The browser is making these changes  VSC merely displays what the browser has done with your code  Most common  self closing tags lose their closing slash      See this article on Rendered Source for more information  archive org

User · Answer

alert document documentElement outerHTML

User · Answer

In the elements tab  right click the html node   copy   copy element - then paste into an editor   As has been mentioned above  once the source has been converted into a DOM tree  the original source no longer exists in the browser  Any changes you make will be to the DOM  not the source   However  you can parse the modified DOM back into HTML  letting you see the  generated source     In Chrome  open the developer tools and click the elements tab  Right click the HTML element  Choose copy   copy element  Paste into an editor    You can now see the current DOM as an HTML page   This is not the full DOM  Note that the DOM cannot be fully represented by an HTML document  This is because the DOM has many more properties than the HTML has attributes  However this will do a reasonable job

User · Answer

In Firefox  just ctrl-a  select everything on the screen  then right click  View Selection Source    This captures any changes made by JavaScript to the DOM

User · Answer

I know this is an old post  but I just found this piece of gold  This is old  2006   but still works with IE9  I personnally added a bookmark with this   Just copy paste this in your browser s address bar   javascript void window open  javascript document open   text plain    document write opener document body parentNode outerHTML       As for firefox  web developper tool bar does the job  I usually use this  but sometimes  some dirty 3rd party asp net controls generates differents markups based on the user agent     EDIT  As Bryan pointed in the comment  some browser remove the javascript  part when copy pasting in url bar  I just tested and that s the case with IE10

User · Answer

This is an old question  and here s an old answer that has once worked flawlessly for me for many years  but doesn t any more  at least not as of January 2016   The  Generated Source  bookmarklet from SquareFree does exactly what you want -- and  unlike the otherwise fine  old gold  from  Johnny5  displays as source code  rather than being rendered normally by the browser  at least in the case of Google Chrome on Mac    https   www squarefree com bookmarklets webdevel html generated source  Unfortunately  it behaves just like the  old gold  from  Johnny5  it does not show up as source code any more  Sorry

User · Answer

I think IE dev tools  F12  has  View   Source   DOM  Page   You would need to copy and paste the DOM and save it to send to the validator

User · Answer

I had the same problem  and I ve found here a solution   http   ubuntuincident wordpress com 2011 04 15 scraping-ajax-web-pages   So  to use Crowbar  the tool from here   http   simile mit edu wiki Crowbar  now  2015-12  404s  wayback machine link  http   web archive org web 20140421160451 http   simile mit edu wiki Crowbar  It gave me the faulty  invalid HTML

[html] Best Way to View Generated Source of Webpage?

Examples related to html

Examples related to xhtml

Examples related to firebug

Examples related to w3c

[html] Best Way to View Generated Source of Webpage?

Examples related to html

Examples related to xhtml

Examples related to firebug

Examples related to w3c

Examples related to web-developer-toolbar