生成されたWebページのソースを表示する最良の方法は？

Question 1

W3のバリデーターへの入力に対するAJAXリクエストによって行われたDOMの変更を含む、適切に生成されたソースを提供するツールを探しています。私は次の方法を試しました：

Web開発者ツールバー-doc-typeに従って無効なソースを生成します（たとえば、タグの自己終了部分を削除します）。ページのdoctype部分を失います。
Firebug-ソースの潜在的な欠陥（閉じられていないタグなど）を修正します。また、タグのdoctype部分が失われ、それ自体が無効なHTMLであるコンソールが挿入されます。
IE開発者ツールバー-doc-typeに従って無効なソースを生成します（たとえば、XHTML仕様に対して、すべてのタグを大文字にします）。
ハイライト+選択ソースの表示-ページ全体を取得するのが難しいことが多く、doc-typeも除外されます。

何らかの方法で修正または変更せずに、ソースの正確な現在のバージョンを提供するプログラムまたはアドオンはありますか？これまでのところ、Firebugは最高のようですが、私の間違いのいくつかが修正されるのではないかと心配しています。

解決

ジャスティンが説明したように、私が望んでいたことに対する正確な解決策はないことがわかりました。最善の解決策は、Firebugによって引き起こされたエラーが含まれている場合でも、Firebugのコンソール内でソースを検証することであるようです。また、「生成されたソースの表示」が実際のソースと一致しない理由を説明してくれたForgottenSemicolonにも感謝します。2つのベストアンサーをマークできれば、そうします。

Question 2

[編集された質問の詳細に応じて更新]

あなたが遭遇している問題は、ページがajaxリクエストによって変更されると、現在のHTMLはブラウザのDOM内にのみ存在することです-あなたが引き出すことができるもの以外に検証できる独立したソースHTMLはもうありませんDOM。

ご覧のとおり、IEのDOMはタグを大文字で格納し、閉じられていないタグを修正し、元々取得したHTMLに他の多くの変更を加えます。これは、ブラウザは一般に、問題のあるHTML（たとえば、閉じられていないタグ）を取得し、それらの問題を修正してユーザーに役立つものを表示するのに非常に優れているためです。HTMLがIEによって正規化されると、私が知る限り、元のソースHTMLはDOMの観点から本質的に失われます。

Firefoxのほとんどのリクレイはこれらの変更をほとんど行わないので、Firebugがおそらくあなたのより良い賭けです。

最後の（そしてより労働集約的な）オプションは、単純なajaxの変更があるページで機能する場合があります。たとえば、サーバーからHTMLをフェッチし、これを特定の要素内のページにインポートします。その場合、フィドラーまたは同様のツールを使用して、元のHTMLとAjaxHTMLを手動でつなぎ合わせることができます。これはおそらく価値があるよりも厄介であり、エラーが発生しやすいですが、もう1つの可能性があります。

[元の質問に対する元の回答はこちら]

Fiddler（http://www.fiddlertool.com/）は、ブラウザに依存しない無料のツールであり、ブラウザが受信した正確なHTMLを取得するのに非常に適しています。ワイヤー上の正確なバイトと、任意のHTML分析ツールにフィードできるデコード/解凍などのコンテンツが表示されます。また、ヘッダー、タイミング、HTTPステータス、およびその他の多くの優れた機能も表示されます。

サーバーがわずかに異なるヘッダーにどのように応答するかをテストする場合は、フィドラーを使用してリクエストをコピーおよび再構築することもできます。

Fiddlerは、ブラウザとWebサイトの間に位置するプロキシサーバーとして機能し、双方向のトラフィックをログに記録します。

Question 3

ジャスティンは死んでいる。ここで重要なのは、HTMLはドキュメントを記述するための単なる言語であるということです。ブラウザがそれを読み取ると、それはなくなります。オープンタグ、クローズタグ、およびフォーマットはすべてパーサーによって処理されますその後消えます。HTMLを表示するツールはすべて、ドキュメントのコンテンツに基づいてHTMLを生成しているため、常に有効です。

私はこれを別のWeb開発者に一度説明しなければならず、彼がそれを受け入れるのに少し時間がかかりました。

任意のJavaScriptコンソールで自分で試すことができます。

el = document.createElement('div');
el.innerHTML = "<p>Some text<P>More text";
el.innerHTML; // <p>Some text</p><p>More text</p>

そのHTMLは解析され、2行目以降に破棄されたため、閉じられていないタグと大文字のタグ名はなくなりました。

JavaScriptからのドキュメントを修正するための正しい方法はであるdocumentメソッド（createElement、appendChild、setAttribute、など）、あなたはそれらの機能のいずれかのタグまたはHTML構文への参照がないことを確認します。を使用している場合document.write、 innerHTMLまたはあなたのページを修正するために、他のHTML圏の呼び出し、それを検証する唯一の方法は、HTML別途ことをあなたがそれらに入れているものをキャッチし、検証することです。

とはいえ、ドキュメントのHTML表現を取得する最も簡単な方法は次のとおりです。

document.documentElement.innerHTML

Question 4

これが古い投稿であることは知っていますが、この金の部分を見つけました。これは古い（2006）ですが、IE9でも機能します。これで個人的にブックマークを追加しました。

これをブラウザのアドレスバーにコピーして貼り付けるだけです。

javascript:void(window.open("javascript:document.open(\"text/plain\");document.write(opener.document.body.parentNode.outerHTML)"))

Firefoxに関しては、Web開発者ツールバーがその役割を果たします。私は通常これを使用しますが、時々、いくつかのダーティなサードパーティのasp.netコントロールは、ユーザーエージェントに基づいて異なるマークアップを生成します...

編集

ブライアンがコメントで指摘したように、一部のブラウザjavascript:は、URLバーにコピー/貼り付けするときにその部分を削除します。私はちょうどテストしました、そしてそれはIE10の場合です。

Question 5

ドキュメントをChromeに読み込むと、Developer|ElementsビューにはJSコードがいじられたHTMLが表示されます。これは直接HTMLテキストではなく、関心のある要素を開く（展開する）必要がありますが、生成されたHTMLを効果的に検査することができます。

Question 6

Web開発者ツールバーで、Tools -> Validate HTMLまたはを試しましたかTools -> Validate Local HTMLオプション？

このValidate HTMLオプションは、URLをバリデーターに送信します。バリデーターは公開されているサイトでうまく機能します。ザ・Validate Local HTMLオプションは、現在のページのHTMLをバリデーターに送信します。バリデーターは、ログインの背後にあるページや、一般公開されていないページでうまく機能します。

ソースチャートの表示（FireFoxアドオンとしても）を試すこともできます。そこに興味深いメモ：

Q. View Source ChartがXHTMLタグをHTMLタグに変更するのはなぜですか？

A.そうではありません。ブラウザはこれらの変更を行っています。VSCはブラウザがコードに対して行ったことを表示するだけです。最も一般的な方法：自己終了タグは終了スラッシュ（/）を失います。詳細については、レンダリングされたソースに関するこの記事（archive.org）を参照してください。

Question 7

Firefox Web Developerツールバーの使用（https://addons.mozilla.org/en-US/firefox/addon/60）

[ソースの表示]-> [生成されたソースの表示]に移動するだけです

私はいつもまったく同じことのためにそれを使用しています。

Question 8

私は同じ問題を抱えていました、そして私はここで解決策を見つけました：

http://ubuntuincident.wordpress.com/2011/04/15/scraping-ajax-web-pages/

したがって、ここからのツールであるCrowbarを使用するには：

http://simile.mit.edu/wiki/Crowbar（現在（2015-12）404s）
ウェイバックマシンリンク：http：//web.archive.org/web/20140421160451/http：//simile.mit.edu/
wiki / Crowbar

それは私に欠陥のある無効なHTMLを与えました。

Question 9

これは古い質問です。これは、かつて私~~にとって何年~~も問題なく機能していた古い回答ですが、少なくとも2016年1月の時点では機能していません。

SquareFreeの「GeneratedSource」ブックマークレットは、あなたが望むことを正確に実行します。@ Johnny5の「古いゴールド」とは異なり、（少なくともGoogleの場合は、ブラウザによって通常どおりにレンダリングされるのではなく）ソースコードとして表示されます。 Mac上のChrome）：

https://www.squarefree.com/bookmarklets/webdevel.html#generated_source

残念ながら、@ Johnny5の「オールドゴールド」と同じように動作します。ソースコードとして表示されなくなりました。ごめんなさい。

Question 10

Firefoxでは、ctrl-a（画面上のすべてを選択）してから、[選択ソースの表示]を右クリックします。これにより、JavaScriptによってDOMに加えられた変更がすべてキャプチャされます。

Question 11

alert（document.documentElement.outerHTML）;

Question 12

これを入力してみませんか？これはURLバーです。

javascript:alert(document.body.innerHTML)

Question 13

[要素]タブで、[html]ノードを右クリック> [コピー]> [要素のコピー]を選択し、エディターに貼り付けます。

上で述べたように、ソースがDOMツリーに変換されると、元のソースはブラウザーに存在しなくなります。行う変更は、ソースではなくDOMに対して行われます。

ただし、変更されたDOMを解析してHTMLに戻すことで、「生成されたソース」を確認できます。

Chromeで、開発ツールを開き、[要素]タブをクリックします。
HTML要素を右クリックします。
コピー>要素のコピーを選択します。
エディターに貼り付けます。

これで、現在のDOMをHTMLページとして表示できます。

これは完全なDOMではありません

DOMをHTMLドキュメントで完全に表すことはできないことに注意してください。これは、DOMにはHTMLの属性よりもはるかに多くのプロパティがあるためです。ただし、これは妥当な仕事をします。

Question 14

IE開発ツール（F12）にはあると思います。表示>ソース> DOM（ページ）

DOMをコピーして貼り付け、保存してバリデーターに送信する必要があります。

Question 15

私が見つけたのはSafariのBetterSource拡張機能だけです。これにより、ドキュメントの操作されたソースが表示されます。欠点は、Firefoxの場合とは異なります。

Question 16

以下のjavascriptコードスニペットは、完全なajaxレンダリングされたHTML生成ソースを取得します。ブラウザに依存しないもの。楽しい：）

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 = "<!DOCTYPE "
         + node.name
         + (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '')
         + (!node.publicId && node.systemId ? ' SYSTEM' : '') 
         + (node.systemId ? ' "' + node.systemId + '"' : '')
         + '>';
         }
         else

         {

             // for IE8 and below you can access doctype like this

         doctypestring = document.all[0].text;
         }
doctypestring +outerhtml ;

Question 17

「レンダリングされたソースの表示」クロム拡張機能を確認してください。

https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob/

Question 18

ajax呼び出しの結果をコンソールに記録することで、同様の問題を解決することができました。これは返されたhtmlであり、問題があれば簡単に確認できました。

ajax呼び出しの.done（）関数で、console.log（results）を追加して、デバッガーコンソールでhtmlを確認できるようにしました。

function GetReversals() {
    $("#getReversalsLoadingButton").removeClass("d-none");
    $("#getReversalsButton").addClass("d-none");

    $.ajax({
        url: '/Home/LookupReversals',
        data: $("#LookupReversals").serialize(),
        type: 'Post',
        cache: false
    }).done(function (result) {
        $('#reversalResults').html(result);
        console.log(result);
    }).fail(function (jqXHR, textStatus, errorThrown) {
        //alert("There was a problem getting results.  Please try again. " + jqXHR.responseText + " | " + jqXHR.statusText);
        $("#reversalResults").html("<div class='text-danger'>" + jqXHR.responseText + "</div>");
    }).always(function () {
        $("#getReversalsLoadingButton").addClass("d-none");
        $("#getReversalsButton").removeClass("d-none");
    });
}

スニペットを展開