9

Web サイトのデザインを比較するツールが必要です。HTML コードだけを比較するのではなく、出力されたデザインを比較したいと考えています。

これは可能ですか？また、この種のオープンソース プログラムはありますか?

Google で検索しましたが、これまでのところ HTML 一致の候補が 1 つしか見つかりませんでした。

4

8 に答える 8

6

最新の Web ページでは、外観はさまざまな「もの」によって制御されます: 少なくとも html コード、css スタイル、および画像 (一部のページでは JavaScript も)。単純なテキスト ベースの diff プログラムでは、出力が Web ページの外観とは無関係になる可能性があるため、十分ではありません (つまり、css をクリーンアップすると多くの違いが表示される可能性がありますが、レンダリングされた Web ページは同じままです)。

より単純なページの場合は、上記の HTML Match が役に立ちます。2 つの「複雑な」ページ (レイアウト、スペース、画像、テキストの変更を含む) のデザインを比較する必要がある場合は、2 段階のアプローチをとります。

  1. HTML ソースで diff ツールを実行して、テキスト コンテンツの違いを強調表示します。次に、ページの1つを変更して、他のページと同じコンテンツを表示します（次のステップをより正確にし、「焦点を合わせて」「実際の」レイアウト変更を表示するため）。もちろん、非常によく似た html でのみ機能します。
  2. ページを同じ Web ブラウザにロードし、固定位置でレンダリングされた出力からいくつかのスクリーンショットを取得し、画像を比較します (つまり、ImageMagickを使用)。レンダリングされた出力のすべての視覚的な違いを示す必要があります。

完璧ではありませんが、動作するはずです。

[更新] HTML マッチは死んでいるようです。別の解決策については、この回答を参照してください。

于 2009-06-30T04:45:41.937 に答える
1

KDE を使用している場合は、KompareまたはKDiff3を使用できます。

ただし、Web ページがさまざまなオペレーティング システムのさまざまなブラウザーでどのように表示されるかを確認したい場合は、BrowserShotsを使用できます。

于 2009-06-30T03:56:34.887 に答える
1

窓の下：

http://www.htmlmatch.com/

于 2009-06-30T02:40:10.857 に答える
1

これらのオンライン ツールがありますが、それらは素晴らしいものではありません。

http://www.w3.org/2007/10/htmldiff

http://www.aaronsw.com/2002/diff/

私は daisydiff の外観が好きですが、怒って使用したことはありません: http://code.google.com/p/daisydiff/

于 2010-08-31T10:58:15.947 に答える
0

BrowserStack、Cross Browser、PhantomJSなどのシステムで画面出力を取得することにより、Araxis Merge Proと視覚的に比較できます。

于 2018-06-19T11:40:25.813 に答える
0

探しているキーワードは「diff」です。

2 つのファイル (html マークアップまたはその他) の違いを表示できる優れたプログラムは、Windows 用のExamDiffです。

于 2009-06-30T04:19:02.367 に答える