İki HTML belgesini yapıştırın, biçimlendirin ve yan yana karşılaştırın. Etiket farkında sözdizimi vurgulama ve canlı well-formedness kontrolleri yerleşik.
İki HTML belgesini karşılaştırmak için tarayıcı içinde çalışan ücretsiz bir araç. Bir landing page'in eski sürümünü sola, yenisini sağa yapıştırın; değişiklikler etiket etiket ve öznitelik öznitelik aydınlanır. Hiçbir şey yüklenmez.
Diff'in kendisi karakter düzeyindedir. Her panodaki Format düğmesi, Prettier veya HTML Tidy'nin yapacağı gibi HTML'inizi tutarlı girintilemeyle yeniden akıtır. Sözdizimi vurgulama WHATWG HTML Living Standard'ı izler, böylece void öğeler, boolean öznitelikler ve entity referansları diff'i okurken doğru görüntülenir.
Eğer bir pazarlama sayfasına bir copy düzeltmesi gönderdiyseniz ve hero bölümündeki bir sınıf adının da neden değiştiğini bulmak için bir saatinizi kaybettiyseniz, bunu saniyeler içinde gün yüzüne çıkaran araç budur. Düz nesir için metin diff'imiz doğru seçimdir. HTML'in katı kuzeni XML'in özel bir XML diff'i vardır. Ve Markdown statik site build'lerinde sıkça HTML'e derlendiği için Markdown diff da yararlı bir komşudur.
Bu, HTML farkındalı sözdizimi vurgulamasıyla metin düzeyinde bir diff'tir, DOM diff'i değil. Karşılaştırma karakter düzeyinde çalışır, ardından anlamsal bir son işleme adımı vurguları kaydırır, böylece rastgele noktalama yerine etiket adlarına, öznitelik değerlerine ve görünür metne otururlar. Eklemeler sağ panoda yeşil, silmeler solda kırmızı görünür.
HTML'de insanların hatırladığından daha fazla parsing tuhaflığı vardır ve çoğu yalnızca iki dosyayı metin olarak karşılaştırdığınızda önem kazanır. Parsing algoritmasına göre öznitelik sırası önemli değildir, öznitelik tırnakları bazı değerler için tek, çift veya yok olabilir, etiket ve öznitelik adları büyük-küçük harfe duyarsızdır. Bir metin diff'i yine de her yeniden sıralama ve büyük-küçük harf değişikliğini işaretler. Pratik çözüm her iki tarafı da aynı araçla biçimlendirmektir (parser: "html" ile Prettier iyi çalışır), böylece diff'i okumadan önce panolar normalleşir.
Bu araç belgeyi DOM ağacına ayrıştırıp düğümleri karşılaştırmaz. Yani tarayıcıda aynı şekilde renderlanan iki dosya, örneğin biri <img src="a.png"> diğeri <img src='a.png' /> ile, burada yine farklı görünür. Gerçek bir yapısal karşılaştırma gerekiyorsa, her iki tarafı da DOMParser ile ayrıştırın ve ağaçları kendiniz dolaşın ya da önce her ikisini Tidy'den geçirin. Kod inceleme vakalarının %95'i için (bir copy düzeltmesi, bir öznitelik değişimi, bir aria-label eklemesi) metin diff'i daha hızlı ve daha nettir.
İki metin panosu, bir diff. Kayıt yok, yükleme yok, sunucuya gidiş-dönüş yok.
Eski HTML'i sola, yeni HTML'i sağa yapıştırın. Veya iki taraftan birinde Yükle'ye tıklayarak doğrudan bir .html, .htm veya .eml dosyası yükleyin. Önce aracı çalışırken görmek isterseniz, Örnek düğmesi her iki panoyu küçük bir landing page parçacığıyla doldurur.
Tutarlı girintilemeyle pretty-print için her panoda Format düğmesine basın. Bu, beyaz boşluğu ve satır sonlarını normalleştirir, böylece diff Windows CRLF dosyası vs Unix LF dosyası gibi biçimlendirme gürültüsüne değil gerçek içerik değişikliklerine odaklanır. Belge temiz parse edildiğinde doğrulama rozeti yeşile döner.
Silmeler solda kırmızı vurguyla, eklemeler sağda yeşil vurguyla görünür. Her başlıktaki değişiklik sayıları, diff'in etiket adları, öznitelik değerleri ve görünür metin arasında bulduğu farklı düzenleme sayısını söyler. Bir panoda kaydırın, diğeri eşzamanlı olarak takip eder.
Bir CMS şablon değişikliği yayınlanır ve aşağı akış bir tüketici bozuk hero markup'ı bildirir. Deploy öncesi ve sonrasında renderlanmış HTML'i curl edip ikisini de diff'e yapıştırın; suçlu wrapper <div>'i veya class değişimi belirginleşir. WordPress tema yükseltmeleri, Hugo ve Jekyll layout düzenlemeleri ve kaynak şablonun doğrudan okunamadığı her sunucuda renderlanan çıktı için kullanışlıdır.
Email HTML'i affetmez. Outlook hâlâ Word render motorunu kullanıyor, bu yüzden değiştirilmiş bir <table> iç içe yerleşimi veya yeniden adlandırılmış inline style özniteliği layout'u darmadağın edebilir. Kampanyayı göndermeden önce A varyantını B varyantına karşı diff'leyin, sonra her ikisini Litmus veya Email on Acid'den geçirin. Eksik bir cellpadding="0"'ı diff'te yakalamak, bin gelen kutusunda yakalamaktan daha ucuzdur.
Bir PR bileşenlerin yarısına aria-label, role ve aria-describedby öznitelikleri ekliyor. Metin diff'i, her etkileşimli öğenin doğru özniteliği aldığını, gerçek bir butona role="presentation" uygulanmadığını ve odaklanabilir hiçbir öğenin erişilebilir adını kaybetmediğini doğrulamayı önemsiz kılar. Gerçek denetim için axe DevTools veya Lighthouse ile birleştirin.
Bir copywriter homepage'i revize edilmiş başlıklar ve yeni bir CTA ile geri gönderir. Canlı HTML'i önerilen HTML'e karşı yapıştırın; diff size hangi <h1>, <p> ve buton metninin değiştiğini ve aralarına sızan herhangi bir class veya href düzenlemesini tam olarak söyler. Değişiklik takipli bir Word belgesinden daha hızlıdır ve codebase'e geri dönüşü sağlam atlatır.
Bir DOMPurify veya sanitize-html sürüm artışından sonra, sanitizer'ı bilinen kötü payload'larla regresyon test edin ve çıktıyı önceki iyi bir baseline'a karşı diff'leyin. Aniden <svg onload="..."> veya href özniteliklerinde javascript: URL'leri koruyan bir sanitizer, üretime çıkmadan önce CI'da yakalamak isteyeceğiniz tam türden bir regresyondur. Diff tek karakter değişikliklerini (eksik bir escape) göze çarpacak hale getirir.
Bu aracın en sık ortaya çıkardığı parsing detayları için kısa bir kopya kâğıdı. Hepsi WHATWG HTML Living Standard'da temellenmiştir.
| Topic | What this tool does |
|---|---|
| Void öğeler | <img>, <br>, <input>, <meta>, <link>, <hr> ve dostlarının kapanış etiketi yoktur. XHTML stili sondaki slash <br /> HTML5'te izinlidir ama no-op olarak renderlanır; parser onu yok sayar. |
| Öznitelik sırası | HTML spec'ine göre önemli değildir. <a href="/x" class="btn"> ve <a class="btn" href="/x"> bir parser için aynıdır. Bir metin diff'i değişimi işaretler; sırayı kararlı tutmak için her iki tarafı biçimlendirin. |
| Öznitelik tırnakları | Boşluk veya özel karakter içermeyen değerler için çift tırnak, tek tırnak veya hiç tırnak. id=hero, id='hero' ve id="hero" eşdeğerdir. Çoğu stil rehberi tutarlılık için çift tırnak gerektirir. |
| Boolean öznitelikler | Mesele varlıktır. <input disabled>, <input disabled=""> ve <input disabled="disabled"> hepsi input'u devre dışı bırakır. Spec çıplak biçimi önerir; XHTML ayrıntılı biçimi gerektirirdi. |
| Büyük-küçük harf duyarlılığı | HTML'de etiket adları ve öznitelik adları büyük-küçük harfe duyarsızdır (<DIV> = <div>). Öznitelik değerleri büyük-küçük harfe duyarlıdır (id="Hero", id="hero"'dan farklıdır). HTML5'ten beri konvansiyon küçük harfli etiketler ve özniteliklerdir. |
| Karakter entity'leri | Beş yerleşik: & < > " '. Ayrıca gibi adlandırılmış entity'ler ve aksanlı harfler için é gibi sayısal referanslar. CDATA bölümleri yalnızca foreign content'te (SVG, MathML) geçerlidir, normal HTML'de değil. |
| DOCTYPE | HTML5 kısa biçim <!DOCTYPE html> kullanır. Daha eski XHTML 1.0 doctype'ları hâlâ parse edilir ama aynı şekilde no-quirks modunu tetikler. Eksik veya bozuk bir DOCTYPE sayfayı quirks moduna düşürür, bu da box modeli davranışını değiştirir. |
| Beyaz boşluk | Boşluk, tab ve satır sonu dizileri renderlanırken tek bir boşluğa çöker, ancak <pre>, <textarea> ve CSS white-space: pre olan öğelerin içi hariç. Kaynak metin korunur, bu yüzden bir metin diff'i her byte'ı görür. |
Kapot altında aynı karakter düzeyindeki algoritmadır, ancak editör HTML modu vurgulamasını kullanır, böylece etiketler, öznitelikler ve entity'ler diff'i okurken tanıdık sözdizimi renklendirmesiyle görüntülenir. Format düğmesi genel bir metin yeniden biçimlendirici değil, HTML farkındalı bir pretty-printer kullanır, bu da öğe iç içe yerleşimini olduğu gibi tutar. Markup içermeyen düz nesir için metin diff'imiz yeterlidir; etiket sınırlarının önemli olduğu her dosya için bu görünüm taramaya daha kolaydır.
Tarayıcı için değil. HTML Living Standard, açılış etiketindeki öznitelik sırasının önemli olmadığını söyler, bu yüzden <a href="/x" class="btn"> ve <a class="btn" href="/x"> aynı şekilde renderlanır. Bir metin diff'i ham karakterleri gördüğü için yine de değişimi işaretler. Çözüm, her iki tarafı da aynı araçla biçimlendirmektir (Prettier ve html-validate makul şekilde sıralar), böylece karşılaştırmadan önce öznitelik sırası kararlı olur.
HTML render sırasında çoğu beyaz boşluk dizisini tek bir boşluğa çökertir, bu yüzden tarayıcıda aynı görünen iki dosyanın çok farklı kaynak metni olabilir. <pre> ve <textarea> içinde beyaz boşluk korunur. Diff metin düzeyindedir, bu yüzden her boşluk, tab ve satır sonu sayılır. Girintilemeyi normalleştirmek için önce her iki tarafı biçimlendirin; yalnızca anlamlı değişiklikler vurgulanmış kalır.
Bu araç metin diff'i yapar, DOM diff'i değil, bu yüzden biçimlendirme gürültüsünü göz ardı etmenin en güvenilir yolu, yapıştırmadan önce her iki tarafı da aynı pretty-printer (Prettier, HTML Tidy veya htmlhint --format) ile biçimlendirmektir. Bu girinti, öznitelik tırnakları ve sondaki beyaz boşluğu normalleştirir. Gerçek ağaç düzeyinde bir karşılaştırma için her tarafı DOMParser ile ayrıştırın ve düğümleri dolaşın; kod inceleme ve copy-edit işi için biçimlendir-sonra-diff workflow'u daha hızlıdır ve aynı bug'ları yakalar.
<script> ve <style> içeriği düz metin olarak karakter karakter diff'lenir. Bu, bir <style> bloğunun içindeki tek satırlık bir CSS değişikliğinin veya inline <script> içindeki yeniden adlandırılmış bir fonksiyonun beklediğiniz yerde tam olarak görüneceği anlamına gelir. Daha büyük script blokları için onları .js dosyalarına çıkarmayı ve ayrı diff'lemeyi düşünün. Editördeki HTML modu yine script ve style sınırlarını vurgular, böylece çevreleyen markup okunabilir kalır.
Dosyalar UTF-8 olarak okunur, bu HTML5 için varsayılandır ve <meta charset="UTF-8"> etiketinin bildirdiğidir. &, <, > ve gibi adlandırılmış entity'ler kodu çözülmüş biçimleri olarak değil, gerçek kaynak metinleri olarak diff'lenir, bu yüzden 'den gerçek bir boşluk karakterine geçiş bir değişiklik olarak görünür. İki dosya tarayıcıda aynı şekilde renderlanıyor ama diff başlangıçta yanıyorsa, birinde UTF-8 byte order mark olduğundan şüphelenin.
HTML'iniz tarayıcınızdan asla ayrılmaz. Biçimlendirici, doğrulayıcı ve diff hepsi makinenizde, yerelde çalışır. Girdinize analitik yok, log yok, "yardımcı" bulut gidiş-dönüşü yok. Sözdizimi vurgulama WHATWG HTML Living Standard'ı takip eder ve daha eski W3C HTML 5.2 tavsiyesi yararlı bir çapraz referanstır. Öğe düzeyinde referans dokümantasyonu MDN'dedir ve erişilebilirlik desenleri ARIA Authoring Practices Guide'dan gelir. Formatın kendisi hakkında arka plan okuması Wikipedia'da.