86

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

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

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

解決

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

4

17 に答える 17

34

ジャスティンは死んでいます。ここで重要な点は、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、 、またはその他の HTML を話す呼び出しを使用innerHTMLしてページを変更している場合、それを検証する唯一の方法は、それらに入力しているものをキャッチし、その HTML を個別に検証することです。

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

document.documentElement.innerHTML
于 2009-11-17T20:38:19.393 に答える
32

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

発生している問題は、ページが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サイトの間にあるプロキシサーバーとして機能し、双方向のトラフィックをログに記録します。

于 2009-11-17T18:36:38.350 に答える
21

これが古い投稿であることは知っていますが、この金貨を見つけたばかりです。これは古いもの (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の場合です。

于 2011-08-12T15:03:26.240 に答える
12

ドキュメントを Chrome にロードするDeveloper|Elementsと、JS コードによって変更された HTML がビューに表示されます。これは直接の HTML テキストではなく、関心のある要素を開く (展開する) 必要がありますが、生成された HTML を効果的に調べることができます。

于 2009-11-17T19:16:46.240 に答える
11

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

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

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

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

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

于 2009-11-17T18:38:13.370 に答える
6

Firefox Web 開発者ツールバーの使用 ( https://addons.mozilla.org/en-US/firefox/addon/60 )

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

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

于 2009-11-17T18:58:10.920 に答える
5

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

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を与えました。

于 2011-08-22T15:18:36.180 に答える
4

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

于 2012-03-26T15:09:33.207 に答える
4

alert(document.documentElement.outerHTML);

于 2013-07-10T12:01:58.873 に答える
3

これをURLバーと入力してみませんか？

javascript:alert(document.body.innerHTML)
于 2010-09-27T16:19:45.530 に答える
3

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

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

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

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

現在の DOM を HTML ページとして表示できるようになりました。

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

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

于 2016-01-11T13:48:45.353 に答える
2

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

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

于 2012-03-26T15:20:48.723 に答える
1

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

于 2010-11-10T03:20:22.907 に答える
1

以下の 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 ;
于 2012-05-24T14:41:54.957 に答える