Oluşturulan Web Sayfası Kaynağını Görüntülemenin En İyi Yolu?

W3'ün doğrulayıcısına girdi için AJAX istekleri tarafından yapılan DOM değişiklikleri dahil olmak üzere bana uygun şekilde oluşturulmuş kaynağı verecek bir araç arıyorum. Aşağıdaki yöntemleri denedim:

1. Web Geliştirici Araç Çubuğu - Doküman türüne göre geçersiz kaynak oluşturur (örneğin, etiketlerin kendi kendine kapanan kısmını kaldırır). Sayfanın doctype bölümünü kaybeder.
2. Firebug - Kaynaktaki olası kusurları düzeltir (ör. Kapatılmamış etiketler). Ayrıca etiketlerin doctype kısmını kaybeder ve kendisi geçersiz HTML olan konsolu enjekte eder.
3. IE Geliştirici Araç Çubuğu - Doküman türüne göre geçersiz kaynak oluşturur (örneğin, XHTML özelliklerine karşı tüm etiketleri büyük harf yapar).
4. Vurgula + Seçim Kaynağını Görüntüle - Tüm sayfayı elde etmek genellikle zordur, ayrıca doc türü hariçtir.

Herhangi bir şekilde düzeltmeden veya değiştirmeden bana kaynağın tam güncel sürümünü verecek herhangi bir program veya eklenti var mı? Şimdiye kadar Firebug en iyisi gibi görünüyor, ancak bazı hatalarımı düzeltebileceğinden endişeleniyorum.

Çözüm

Justin'in açıkladığı gibi istediğim şeyin kesin bir çözümü olmadığı ortaya çıktı. En iyi çözüm, Firebug'ın neden olduğu bazı hataları içerecek olsa da, Firebug konsolunun içindeki kaynağı doğrulamak gibi görünüyor. "Oluşturulan Kaynağı Görüntüle" nin neden gerçek kaynakla eşleşmediğini açıkladığı için Unutulmuş Noktalı Virgül'e de teşekkür etmek isterim. En iyi 2 cevabı işaretleyebilseydim, yapardım.

[düzenlenen sorudaki daha fazla ayrıntıya yanıt olarak güncelleniyor]

Karşılaştığınız sorun şu ki, bir sayfa ajax istekleri tarafından değiştirildiğinde, geçerli HTML yalnızca tarayıcının DOM içinde var olur - artık çıkarabileceğinizden başka doğrulayabileceğiniz bağımsız bir kaynak HTML yoktur. DOM.

Gözlemlediğiniz gibi, IE'nin DOM'u etiketleri büyük harflerle saklar, kapatılmamış etiketleri düzeltir ve orijinal olarak aldığı HTML'de birçok başka değişiklik yapar. Bunun nedeni, tarayıcıların genellikle problemli HTML alma (ör. Kapatılmamış etiketler) ve kullanıcı için yararlı bir şey göstermek için bu sorunları çözme konusunda çok başarılı olmasıdır. HTML, IE tarafından standartlaştırıldıktan sonra, orijinal kaynak HTML, bildiğim kadarıyla, DOM'un bakış açısından esasen kayboluyor.

Firefox, çoğu kez bu değişikliklerden daha azını yapar, bu nedenle Firebug muhtemelen daha iyi bir seçimdir.

Son (ve daha yoğun emek gerektiren) bir seçenek, basit ajax değişiklikleri olan sayfalarda çalışabilir, örneğin sunucudan bir miktar HTML almak ve bunu belirli bir öğenin içindeki sayfaya aktarmak. Bu durumda, orijinal HTML'yi Ajax HTML ile manuel olarak birleştirmek için fiddler veya benzer bir araç kullanabilirsiniz. Bu muhtemelen değerinden daha fazla sorundur ve hataya açıktır, ancak bu bir olasılık daha.

[Orijinal soruya orijinal yanıt]

Fiddler ( http://www.fiddlertool.com/ ), bir tarayıcı tarafından alınan tam HTML'yi almak için çok iyi çalışan ücretsiz, tarayıcıdan bağımsız bir araçtır. Size kablo üzerindeki tam baytları ve herhangi bir HTML analiz aracına besleyebileceğiniz kodu çözülmüş / sıkıştırılmış / vb. İçeriği gösterir. Ayrıca başlıkları, zamanlamaları, HTTP durumunu ve diğer pek çok iyi şeyi gösterir.

Bir sunucunun biraz farklı başlıklara nasıl yanıt verdiğini test etmek istiyorsanız, istekleri kopyalamak ve yeniden oluşturmak için fiddler'ı da kullanabilirsiniz.

Fiddler, tarayıcınız ile web sitesi arasında oturan bir proxy sunucusu olarak çalışır ve her iki yönde giden trafiği günlüğe kaydeder.

Justin öldü. Buradaki kilit nokta, HTML'nin yalnızca bir belgeyi açıklamak için kullanılan bir dil olmasıdır. Tarayıcı okuduktan sonra kaybolur . Açık etiketler, yakın etiketler ve biçimlendirmenin tümü ayrıştırıcı tarafından halledilir ve sonra kaybolur . HTML'yi size gösteren herhangi bir araç, onu belgenin içeriğine göre oluşturuyor, bu nedenle her zaman geçerli olacaktır.

Bunu bir keresinde başka bir web geliştiricisine açıklamam gerekiyordu ve kabul etmesi biraz zaman aldı.

Herhangi bir JavaScript konsolunda kendiniz deneyebilirsiniz:

el = document.createElement('div');
el.innerHTML = "<p>Some text<P>More text";
el.innerHTML; // <p>Some text</p><p>More text</p>

Kapatılmamış etiketler ve büyük harfli etiket isimleri kayboldu, çünkü bu HTML ikinci satırdan sonra ayrıştırılıp atıldı.

JavaScript dokümanı değiştirmek için doğru yol ile documentyöntemlerin ( createElement, appendChild, setAttribute, vb) ve o fonksiyonların herhangi birinde etiketleri veya HTML sözdizimi için hiçbir başvuru var olduğunu gözlemlemek gerekir. Sayfalarınızı değiştirmek için veya diğer HTML konuşan çağrıları kullanıyorsanız document.write, innerHTMLbunu doğrulamanın tek yolu, içine koyduğunuz şeyi yakalamak ve bu HTML'yi ayrı olarak doğrulamaktır.

Bununla birlikte, belgenin HTML gösterimine ulaşmanın en basit yolu şudur:

document.documentElement.innerHTML

Bunun eski bir gönderi olduğunu biliyorum ama bu altın parçasını yeni buldum . Bu eski (2006), ancak hala IE9 ile çalışıyor. Ben şahsen bununla bir yer imi ekledim.

Bunu kopyalayıp tarayıcınızın adres çubuğuna yapıştırmanız yeterlidir:

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

Firefox'a gelince, web geliştirici araç çubuğu işi yapar. Genellikle bunu kullanırım, ancak bazen bazı kirli 3. taraf asp.net kontrolleri, kullanıcı aracısına bağlı olarak farklı işaretlemeler üretir ...

DÜZENLE

Bryan'ın yorumda işaret ettiği gibi, bazı tarayıcılar javascript:url çubuğuna kopyalarken / yapıştırırken parçayı kaldırıyor . Az önce test ettim ve IE10'da durum bu.

Belgeyi Chrome'a ​​yüklerseniz, Developer|Elementsgörünüm size HTML'yi JS kodunuzla karıştırılmış olarak gösterecektir. Doğrudan HTML metni değildir ve ilgilendiğiniz herhangi bir öğeyi açmanız (açmanız) gerekir, ancak oluşturulan HTML'yi etkin bir şekilde inceleyebilirsiniz.

Web Geliştirici Araç Çubuğunda, Tools -> Validate HTMLveyaTools -> Validate Local HTML seçeneklerini mi?

Validate HTMLSeçenek alenen bakan siteleri ile iyi çalışır doğrulayıcı, url gönderir. Validate Local HTMLSeçenek bir giriş sayfasının arkasına ya da kamuya açık olmayanlar da iyi çalışır doğrulayıcı, mevcut sayfanın HTML gönderir.

Ayrıca, Kaynak Grafiğini Görüntüle'yi de deneyebilirsiniz (ayrıca FireFox eklentisi olarak ). Orada ilginç bir not:

S. Kaynak Grafiğini Görüntüle neden XHTML etiketlerimi HTML etiketlerine dönüştürüyor?

A. Öyle değil. Tarayıcı bu değişiklikleri yapıyor, VSC yalnızca tarayıcının kodunuzla ne yaptığını gösterir. En yaygın: kendi kendine kapanan etiketler kapanış eğik çizgisini (/) kaybeder. Daha fazla bilgi için Rendered Source hakkındaki bu makaleye bakın (archive.org) .

Firefox Web Geliştirici Araç Çubuğunu Kullanma ( https://addons.mozilla.org/en-US/firefox/addon/60 )

Kaynağı Görüntüle -> Oluşturulan Kaynağı Görüntüle seçeneğine gidin

Her zaman aynı şey için kullanıyorum.

Aynı sorunu yaşadım ve burada bir çözüm buldum:

http://ubuntuincident.wordpress.com/2011/04/15/scraping-ajax-web-pages/

Yani, Crowbar'ı kullanmak için, buradaki araç:

http://simile.mit.edu/wiki/Crowbar (şimdi (2015-12) 404s) geri dönüş
makinesi bağlantısı:
http://web.archive.org/web/20140421160451/http://simile.mit.edu/ wiki / Kazayağı

Bana hatalı, geçersiz HTML verdi.

Bu eski bir sorudur ve burada eski bir cevap var olan keresinde benim için sorunsuz çalıştı yıllarca , ama en azından değil Ocak 2016 tarihinden itibaren, artık değil:

SquareFree'den "Oluşturulan Kaynak" yer işareti tam olarak istediğiniz şeyi yapar - ve @ Johnny5'teki diğer iyi "eski altın" ın aksine, kaynak kodu olarak görüntülenir (tarayıcı tarafından normal olarak işlenmek yerine, en azından Google durumunda) Mac'te Chrome):

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

Ne yazık ki, @ Johnny5'teki "eski altın" gibi davranıyor: artık kaynak kodu olarak görünmüyor. Afedersiniz.

Firefox'ta, ctrl-a (ekrandaki her şeyi seçin) ve ardından "Seçim Kaynağını Görüntüle" yi sağ tıklayın. Bu, JavaScript tarafından DOM'a yapılan tüm değişiklikleri yakalar.

alert (document.documentElement.outerHTML);

Neden bu urlbar'ı yazmıyorsunuz?

javascript:alert(document.body.innerHTML)

Öğeler sekmesinde, html düğümünü sağ tıklayın> kopyala> öğeyi kopyala - ardından bir düzenleyiciye yapıştırın.

Yukarıda belirtildiği gibi, kaynak bir DOM ağacına dönüştürüldüğünde, orijinal kaynak artık tarayıcıda mevcut değildir. Yapacağınız tüm değişiklikler, kaynakta değil, DOM'da olacaktır.

Ancak, değiştirilen DOM'u tekrar HTML'ye ayrıştırabilir ve "oluşturulan kaynağı" görmenize izin verebilirsiniz.

1. Chrome'da, geliştirici araçlarını açın ve öğeler sekmesini tıklayın.
2. HTML öğesini sağ tıklayın.
3. Kopyala> öğeyi kopyala'yı seçin.
4. Bir düzenleyiciye yapıştırın.

Artık mevcut DOM'u bir HTML sayfası olarak görebilirsiniz.

Bu tam DOM değil

DOM'un bir HTML belgesi ile tam olarak temsil edilemeyeceğini unutmayın. Bunun nedeni, DOM'nin HTML'nin özniteliklere sahip olduğundan daha fazla özelliğe sahip olmasıdır. Ancak bu makul bir iş çıkaracaktır.

Sanırım IE dev tools (F12); Görünüm> Kaynak> DOM (Sayfa)

Doğrulayıcıya göndermek için DOM'yi kopyalayıp yapıştırmanız ve kaydetmeniz gerekir.

"Oluşturulan Kaynağı Görüntüle" krom uzantısına bakın:

https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob/

Bulduğum tek şey , Safari için BetterSource uzantısı, bu size belgenin değiştirilmiş kaynağını gösterecek, yalnızca dezavantajı, Firefox için uzaktan benzeyen bir şey değil

Aşağıdaki javascript kod parçacığı size ajax tarafından oluşturulmuş HTML ile oluşturulmuş tam kaynağı sağlayacaktır. Tarayıcıdan bağımsız. Zevk almak :)

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 ;

Ajax çağrısının sonuçlarını konsola kaydederek benzer bir sorunu çözebildim. Bu dönen html idi ve sahip olduğu sorunları kolayca görebiliyordum.

ajax çağrımın .done () işlevine console.log (sonuçlar) ekledim, böylece html'yi hata ayıklayıcı konsolunda görebildim.

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");
    });
}