Wklej, sformatuj i porównaj dwa dokumenty HTML obok siebie. Wbudowane podświetlanie składni świadome tagów i kontrole well-formedness na żywo.
Darmowe narzędzie w przeglądarce do porównywania dwóch dokumentów HTML. Wklej starą wersję landing page po lewej, nową po prawej, a zmiany rozjaśniają się tag po tagu i atrybut po atrybucie. Nic nie jest wysyłane na serwer.
Sam diff działa na poziomie znaków. Przycisk Format na każdym panelu reformatuje Twój HTML ze spójnymi wcięciami, tak jak zrobiłyby to Prettier lub HTML Tidy. Podświetlanie składni podąża za WHATWG HTML Living Standard, więc elementy void, atrybuty boolowskie i odwołania do entity są poprawnie renderowane podczas czytania diffa.
Jeśli kiedyś wdrożyłeś poprawkę copy do strony marketingowej i straciłeś godzinę na ustaleniu, dlaczego nazwa klasy w sekcji hero też się zmieniła, to jest narzędzie, które wyciąga to na wierzch w sekundach. Dla zwykłej prozy nasz diff tekstowy jest właściwym wyborem. Surowy kuzyn HTML, XML, ma dedykowany diff XML. A ponieważ Markdown często kompiluje się do HTML w buildach static-site, diff Markdown jest użytecznym sąsiadem.
To diff na poziomie tekstu z podświetlaniem składni świadomym HTML, nie diff DOM. Porównanie biegnie na poziomie znaków, a następnie przebieg semantycznej obróbki przesuwa podświetlenia, by trafiały na nazwy tagów, wartości atrybutów i widoczny tekst zamiast losowej interpunkcji. Wstawienia pojawiają się na zielono w prawym panelu, usunięcia na czerwono po lewej.
HTML ma więcej dziwactw parsowania niż ludzie pamiętają, a większość z nich liczy się dopiero, gdy porównujesz dwa pliki jako tekst. Według algorytmu parsowania kolejność atrybutów nie jest istotna, cudzysłowy atrybutów mogą być pojedyncze, podwójne lub w niektórych wartościach nieobecne, a nazwy tagów i atrybutów nie rozróżniają wielkości liter. Diff tekstowy i tak oznaczy każde przestawienie i zmianę wielkości liter. Praktyczna obejście to formatowanie obu stron tym samym narzędziem (Prettier z parser: "html" działa dobrze), aby panele były znormalizowane przed czytaniem diffa.
To narzędzie nie parsuje dokumentu do drzewa DOM ani nie porównuje węzłów. To znaczy, że dwa pliki, które renderują się identycznie w przeglądarce, na przykład jeden z <img src="a.png"> i jeden z <img src='a.png' />, tutaj będą wyświetlane jako różne. Jeśli potrzebujesz prawdziwego porównania strukturalnego, sparsuj obie strony przez DOMParser i sam przejdź drzewa, albo wcześniej przepuść obie przez Tidy. Dla 95% przypadków code review (poprawka copy, zamiana atrybutu, dodanie aria-label) diff tekstowy jest szybszy i czytelniejszy.
Dwa panele tekstowe, jeden diff. Bez rejestracji, bez uploadu, bez round-tripa do serwera.
Wklej stary HTML po lewej, nowy HTML po prawej. Albo kliknij Wgraj po dowolnej stronie, by bezpośrednio załadować plik .html, .htm lub .eml. Przycisk Przykład wypełnia oba panele małym wycinkiem landing page, jeśli najpierw chcesz zobaczyć narzędzie w akcji.
Kliknij Format na każdym panelu, by pretty-print ze spójnymi wcięciami. To normalizuje białe znaki i znaki nowej linii, więc diff skupia się na prawdziwych zmianach treści, a nie na szumie formatowania pliku Windows CRLF kontra Unix LF. Plakietka walidacji robi się zielona, gdy dokument parsuje się czysto.
Usunięcia pojawiają się z czerwonym podświetleniem po lewej, wstawienia z zielonym podświetleniem po prawej. Liczniki zmian w każdym nagłówku mówią ci, ile odrębnych edycji diff znalazł w nazwach tagów, wartościach atrybutów i widocznym tekście. Przewiń jeden panel, a drugi nadąża zsynchronizowany.
Wychodzi zmiana szablonu CMS i konsument w dół strumienia zgłasza zepsuty markup hero. Curlnij wyrenderowany HTML przed i po deployu, wklej oba do diffa, a winny wrapper <div> lub zamiana klasy są oczywiste. Przydatne przy upgrade'ach motywów WordPress, edycjach layoutu w Hugo i Jekyll oraz każdym wyjściu renderowanym serwerowo, gdzie szablon źródłowy nie jest bezpośrednio czytelny.
HTML w mailach nie wybacza. Outlook nadal używa silnika renderującego Word, więc zamienione zagnieżdżenie <table> lub przemianowany inline atrybut style mogą rozwalić layout. Zdiffuj wariant A z wariantem B, zanim wypchniesz kampanię, potem przeleć oba przez Litmus albo Email on Acid. Złapanie brakującego cellpadding="0" w diffie jest tańsze niż łapanie go w tysiącu skrzynek.
PR dodaje atrybuty aria-label, role i aria-describedby w połowie komponentów. Diff tekstowy sprawia, że trywialne jest potwierdzenie, że każdy interaktywny element zyskał właściwy atrybut, że żadne role="presentation" nie zostało nałożone na prawdziwy przycisk i że żaden element fokusowalny nie stracił swojej dostępnej nazwy. Sparuj to z axe DevTools lub Lighthouse do właściwego audytu.
Copywriter odsyła stronę główną z poprawionymi nagłówkami i nowym CTA. Wklej HTML produkcyjny przeciwko proponowanemu HTML, a diff powie ci dokładnie, które <h1>, <p> i teksty przycisków się zmieniły, plus jakiekolwiek edycje class lub href, które się przemyciły. Szybsze niż Word ze śledzeniem zmian i przeżywa nietknięte podróż z powrotem do codebase.
Po bumpie wersji DOMPurify lub sanitize-html zrób testy regresji sanitizera ze znanymi złośliwymi payloadami i zdiffuj wyjście z poprzednim dobrym baseline'em. Sanitizer, który nagle zachowuje <svg onload="..."> lub URL-e javascript: w atrybutach href, to dokładnie ten rodzaj regresji, który chcesz złapać w CI, zanim trafi na produkcję. Diff sprawia, że zmiany jednego znaku (brakujący escape) wyskakują w oczy.
Krótka ściągawka do detali parsowania, które to narzędzie najczęściej wyciąga na wierzch. Wszystko ugruntowane w WHATWG HTML Living Standard.
| Topic | What this tool does |
|---|---|
| Elementy void | <img>, <br>, <input>, <meta>, <link>, <hr> i spółka nie mają taga zamykającego. Końcowy slash w stylu XHTML <br /> jest dopuszczony w HTML5, ale renderuje się jako no-op; parser go ignoruje. |
| Kolejność atrybutów | Nieistotna według spec HTML. <a href="/x" class="btn"> i <a class="btn" href="/x"> są identyczne dla parsera. Diff tekstowy zaznacza zamianę; sformatuj obie strony, by trzymać kolejność stabilną. |
| Cudzysłowy atrybutów | Cudzysłowy podwójne, pojedyncze lub wcale dla wartości bez spacji i znaków specjalnych. id=hero, id='hero' i id="hero" są równoważne. Większość przewodników stylu wymaga podwójnych cudzysłowów dla spójności. |
| Atrybuty boolowskie | Liczy się obecność. <input disabled>, <input disabled=""> i <input disabled="disabled"> wszystkie wyłączają input. Spec zaleca formę gołą; XHTML wymagało formy rozwlekłej. |
| Wrażliwość na wielkość liter | Nazwy tagów i atrybutów w HTML nie rozróżniają wielkości liter (<DIV> równa się <div>). Wartości atrybutów rozróżniają wielkość liter (id="Hero" różni się od id="hero"). Konwencją od HTML5 są małe litery w tagach i atrybutach. |
| Entity znakowe | Pięć wbudowanych: & < > " '. Plus nazwane entity jak i odwołania liczbowe jak é dla liter z akcentami. Sekcje CDATA są poprawne tylko w foreign content (SVG, MathML), nie w zwykłym HTML. |
| DOCTYPE | HTML5 używa krótkiej formy <!DOCTYPE html>. Starsze doctype XHTML 1.0 są nadal parsowane, ale wyzwalają tryb no-quirks tak samo. Brakujący lub źle utworzony DOCTYPE wpycha stronę w tryb quirks, co zmienia zachowanie box modelu. |
| Białe znaki | Ciągi spacji, tabulatorów i znaków nowej linii zwijają się do jednej spacji przy renderowaniu, z wyjątkiem wnętrza <pre>, <textarea> i elementów z CSS white-space: pre. Tekst źródłowy jest zachowany, więc diff tekstowy widzi każdy bajt. |
Pod maską to ten sam algorytm na poziomie znaków, ale edytor używa podświetlania w trybie HTML, więc tagi, atrybuty i entity renderują się ze znanym kolorowaniem składni podczas czytania diffa. Przycisk Format używa pretty-printera świadomego HTML, nie ogólnego reformatowania tekstu, co zachowuje zagnieżdżenie elementów nietknięte. Dla prozy bez markupu wystarczy nasz diff tekstowy; dla każdego pliku, gdzie liczą się granice tagów, ten widok jest łatwiejszy do skanowania.
Nie dla przeglądarki. HTML Living Standard mówi, że kolejność atrybutów na tagu otwierającym nie jest istotna, więc <a href="/x" class="btn"> i <a class="btn" href="/x"> renderują się identycznie. Diff tekstowy i tak zaznaczy zamianę, bo widzi surowe znaki. Rozwiązaniem jest sformatowanie obu stron tym samym narzędziem (Prettier i html-validate sortują rozsądnie), aby kolejność atrybutów była stabilna przed porównaniem.
HTML kolapsuje większość ciągów białych znaków do jednej spacji przy renderowaniu, więc dwa pliki wyglądające identycznie w przeglądarce mogą mieć diametralnie różny tekst źródłowy. Wewnątrz <pre> i <textarea> białe znaki są zachowane. Diff działa na poziomie tekstu, więc każda spacja, tabulator i znak nowej linii się liczy. Sformatuj najpierw obie strony, by znormalizować wcięcia; tylko znaczące zmiany zostaną podświetlone.
To narzędzie robi diff tekstowy, nie diff DOM, więc najpewniejszym sposobem zignorowania szumu formatowania jest sformatowanie obu stron tym samym pretty-printerem (Prettier, HTML Tidy lub htmlhint --format) przed wklejeniem. To normalizuje wcięcia, cudzysłowy atrybutów i końcowe białe znaki. Dla prawdziwego porównania na poziomie drzewa sparsuj każdą stronę przez DOMParser i przejdź węzły; dla code review i pracy copy-edit przepływ formatuj-potem-diff jest szybszy i łapie te same bugi.
Zawartość <script> i <style> jest diffowana jako zwykły tekst, znak po znaku. To znaczy, że jednowierszowa zmiana CSS wewnątrz bloku <style> lub przemianowana funkcja w inline <script> pojawi się dokładnie tam, gdzie się jej spodziewasz. Dla większych bloków skryptu rozważ wyciągnięcie ich do plików .js i diffowanie osobno. Tryb HTML w edytorze nadal podświetla granice script i style, więc otaczający markup pozostaje czytelny.
Pliki są czytane jako UTF-8, co jest domyślne dla HTML5 i co deklaruje tag <meta charset="UTF-8">. Nazwane entity jak &, <, > i są diffowane jako ich literalny tekst źródłowy, nie zdekodowana forma, więc zamiana na prawdziwy znak spacji pojawi się jako zmiana. Jeśli dwa pliki renderują się identycznie w przeglądarce, ale diff świeci się na początku, podejrzewaj UTF-8 byte order mark w jednym z nich.
Twój HTML nigdy nie opuszcza twojej przeglądarki. Formatter, walidator i diff działają lokalnie na twojej maszynie. Bez analityki na twoim wejściu, bez logów, bez "pomocnego" round-tripa do chmury. Podświetlanie składni podąża za WHATWG HTML Living Standard, a starsza rekomendacja W3C HTML 5.2 jest użytecznym odniesieniem krzyżowym. Dokumentacja referencyjna na poziomie elementów jest na MDN, a wzorce dostępności pochodzą z ARIA Authoring Practices Guide. Lektura tła o samym formacie na Wikipedii.