web-dev-qa-db-ja.com

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

AJAX W3のバリデーターへの入力要求によって行われたDOM変更を含む、適切な生成されたソースを提供するツールを探しています。

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

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

ソリューション

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

htmlxhtmlfirebugw3cweb-developer-toolbar
82
Jeremy Kauffman

[編集した質問の詳細に応じて更新する]

実行中の問題は、ページがajaxリクエストによって変更されると、現在のHTMLがブラウザーのDOM内にのみ存在することです。 DOM。

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

Firefoxのほとんどのlikleyはこれらの変更をほとんど行わないので、おそらくFirebugの方が良いでしょう。

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

[元の質問に対する元の回答]

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

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

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

32
Justin Grant

ジャスティンは死んでいる。ここで重要なのは、HTMLはドキュメントを記述するための単なる言語であるということです。ブラウザがそれを読み取ると、なくなった。開始タグ、終了タグ、および書式設定はすべて、パーサーによって処理されますそして終了します。 HTMLを表示するツールは、ドキュメントのコンテンツに基づいて生成中であるため、常に有効です。

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

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
34
s4y

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

ブラウザのアドレスバーにコピーして貼り付けます。

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

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

[〜＃〜] edit [〜＃〜]

ブライアンがコメントで指摘したように、一部のブラウザーはjavascript: URLバーにコピー/貼り付けするときの部分。私がテストしたところ、IE10がそうです。

21
Johnny5

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

12
Carl Smotricz

Web Developerツールバーで、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） 。

11
Forgotten Semicolon

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

[ソースの表示]-> [生成されたソースの表示]に移動します

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

6
lewsid

これは古い質問であり、ここに古い答えがあります 持っている かつて私のために完璧に働いた 長年、しかし少なくとも2016年1月の時点ではそうではありません：

SquareFreeの "Generated Source"ブックマークレットは、あなたが望むことを正確に行います。@ Johnny5のその他の点では素晴らしい "old gold"とは異なり、ソースコードとして表示されます（少なくともGoogleの場合、ブラウザによって通常表示されるのではなくChrome）：

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

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

5
Dave Land

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

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を私に与えてくれました。

5
adamvagyok

alert（document.documentElement.outerHTML）;

4
JohnnyFaldo

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

4
Mike_K

Urlbarと入力してみませんか？

javascript:alert(document.body.innerHTML)
3
Mike

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

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

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

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

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

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

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

3
superluminary

IE dev tools（F12）has ;; View> Source> DOM（Page）

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

2
Will Hancock

以下の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 ;
1
Sathish

私が見つけたものは、Safariの BetterSource 拡張機能だけです

1
ellisgeek

コンソールに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");
    });
}
0
ebarke