Najlepszy sposób na wyświetlenie wygenerowanego źródła strony internetowej?

Szukam narzędzia, które da mi odpowiednie wygenerowane źródło, w tym zmiany DOM wprowadzone przez żądania AJAX do wprowadzenia danych do walidatora W3. Wypróbowałem następujące metody:

1. Web Developer Toolbar - generuje nieprawidłowe źródło według typu dokumentu (np. Usuwa samozamykającą się część tagów). Traci część strony z typem dokumentu.
2. Firebug - naprawia potencjalne błędy w źródle (np. Niezamknięte tagi). Traci również część tagów doctype i wstawia konsolę, która sama w sobie jest nieprawidłowym kodem HTML.
3. IE Developer Toolbar - generuje nieprawidłowe źródło zgodnie z typem dokumentu (np. Wszystkie tagi są pisane wielkimi literami, w przeciwieństwie do specyfikacji XHTML).
4. Wyróżnij + wyświetl źródło wyboru - często trudno jest uzyskać całą stronę, wyklucza również typ dokumentu.

Czy jest jakiś program lub dodatek, który poda mi dokładną aktualną wersję źródła, bez naprawiania lub zmieniania go w jakiś sposób? Jak dotąd Firebug wydaje się najlepszy, ale obawiam się, że może naprawić niektóre z moich błędów.

Rozwiązanie

Okazuje się, że nie ma dokładnego rozwiązania tego, czego chciałem, jak wyjaśnił Justin. Wydaje się, że najlepszym rozwiązaniem jest sprawdzenie źródła w konsoli Firebuga, mimo że będzie zawierało pewne błędy spowodowane przez Firebuga. Chciałbym również podziękować Forgotten Semicolon za wyjaśnienie, dlaczego „Wyświetl wygenerowane źródło” nie pasuje do rzeczywistego źródła. Gdybym mógł zaznaczyć 2 najlepsze odpowiedzi, zrobiłbym to.

[aktualizacja w odpowiedzi na więcej szczegółów w redagowanym pytaniu]

Problem polega na tym, że po zmodyfikowaniu strony przez żądania Ajax, bieżący kod HTML istnieje tylko w DOM przeglądarki - nie ma już żadnego niezależnego źródłowego kodu HTML, który można zweryfikować poza tym, który można wyciągnąć z DOM.

Jak zauważyłeś, DOM IE przechowuje znaczniki dużymi literami, naprawia niezamknięte znaczniki i wprowadza wiele innych zmian w oryginalnym HTML. Dzieje się tak, ponieważ przeglądarki są ogólnie bardzo dobre w przyjmowaniu HTML z problemami (np. Niezamknięte znaczniki) i naprawianiu tych problemów, aby wyświetlić coś użytecznego dla użytkownika. Po kanonizacji HTML przez IE, oryginalny źródłowy HTML jest zasadniczo stracony z perspektywy DOM, o ile wiem.

Firefox najprawdopodobniej wprowadza mniej tych zmian, więc Firebug jest prawdopodobnie lepszym rozwiązaniem.

Ostatnia (i bardziej pracochłonna) opcja może działać w przypadku stron z prostymi zmianami w Ajax, np. Pobieranie części HTML z serwera i importowanie tego do strony wewnątrz określonego elementu. W takim przypadku możesz użyć programu Fiddler lub podobnego narzędzia, aby ręcznie połączyć oryginalny kod HTML z Ajax HTML. Jest to prawdopodobnie więcej kłopotów niż jest warte i jest podatne na błędy, ale to jeszcze jedna możliwość.

[Oryginalna odpowiedź tutaj na pierwotne pytanie]

Fiddler ( http://www.fiddlertool.com/ ) to darmowe, niezależne od przeglądarki narzędzie, które bardzo dobrze sprawdza się w pobieraniu dokładnego kodu HTML otrzymywanego przez przeglądarkę. Pokazuje dokładne bajty w sieci, a także zawartość zdekodowaną / rozpakowaną / itp., Którą możesz wprowadzić do dowolnego narzędzia do analizy HTML. Pokazuje również nagłówki, czasy, stan HTTP i wiele innych dobrych rzeczy.

Możesz również użyć programu Fiddler do kopiowania i odbudowywania żądań, jeśli chcesz sprawdzić, jak serwer reaguje na nieco inne nagłówki.

Fiddler działa jako serwer proxy, znajdujący się między przeglądarką a witryną i rejestruje ruch w obie strony.

Justin nie żyje. Kluczową kwestią jest tutaj to, że HTML jest tylko językiem do opisu dokumentu. Gdy przeglądarka go przeczyta, zniknie . Otwieranie i zamykanie tagów oraz formatowanie są obsługiwane przez parser, a następnie znikają . Każde narzędzie, które wyświetla HTML, generuje go na podstawie zawartości dokumentu, więc zawsze będzie poprawne.

Musiałem kiedyś to wyjaśnić innemu twórcy stron internetowych i zajęło mu trochę czasu, zanim to zaakceptował.

Możesz spróbować samemu w dowolnej konsoli JavaScript:

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

Niezamknięte znaczniki i nazwy znaczników pisane wielkimi literami zniknęły, ponieważ ten kod HTML został przeanalizowany i odrzucony po drugiej linii.

Właściwy sposób zmodyfikować dokument z JavaScript jest z documentmetodami ( createElement, appendChild, setAttribute, itd.) I będzie można zauważyć, że nie ma żadnego odniesienia tagów HTML lub składnia w żadnej z tych funkcji. Jeśli używasz document.write, innerHTMLlub inne połączenia HTML-speaking zmodyfikować swoje strony, jedynym sposobem, aby potwierdzić to, aby nadrobić to, czego oddanie do nich i potwierdzić, że HTML oddzielnie.

To powiedziawszy, najprostszym sposobem uzyskania reprezentacji HTML dokumentu jest:

document.documentElement.innerHTML

Wiem, że to stary post, ale właśnie znalazłem tę sztabkę złota . To jest stare (2006), ale nadal działa z IE9. Osobiście dodałem zakładkę z tym.

Po prostu skopiuj i wklej to w pasku adresu przeglądarki:

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

Jeśli chodzi o firefox, pasek narzędzi programisty WWW spełnia swoje zadanie. Zwykle tego używam, ale czasami niektóre brudne kontrolki asp.net innej firmy generują różne znaczniki na podstawie agenta użytkownika ...

EDYTOWAĆ

Jak Bryan wskazał w komentarzu, niektóre przeglądarki usuwają javascript:część podczas kopiowania / wklejania w pasku adresu URL. Właśnie przetestowałem i tak jest w przypadku IE10.

Jeśli załadujesz dokument w Chrome, Developer|Elementswidok pokaże ci kod HTML zmodyfikowany przez twój kod JS. Nie jest to bezpośrednio tekst HTML i musisz otworzyć (rozwinąć) dowolne elementy, które Cię interesują, ale skutecznie przejrzeć wygenerowany kod HTML.

Czy wypróbowałeś opcje Tools -> Validate HTMLlub na pasku narzędzi Web Developer Tools -> Validate Local HTML?

Validate HTMLOpcja wysyła URL do weryfikatora, który dobrze współpracuje z miejsc stojących publicznie. Validate Local HTMLOpcja wysyła HTML bieżącej strony do walidatora, który działa dobrze z stron wymagających logowania, lub te, które nie są publicznie dostępne.

Możesz także spróbować Wyświetl wykres źródłowy (również jako dodatek do FireFox ). Interesująca uwaga:

P. Dlaczego funkcja View Source Chart zmienia moje tagi XHTML na tagi HTML?

A. Tak nie jest. Przeglądarka wprowadza te zmiany, VSC jedynie wyświetla to, co przeglądarka zrobiła z Twoim kodem. Najczęściej: tagi samozamykające tracą zamykający ukośnik (/). Więcej informacji można znaleźć w tym artykule na temat renderowanego źródła (archive.org) .

Korzystanie z paska narzędzi Firefox Web Developer ( https://addons.mozilla.org/en-US/firefox/addon/60 )

Po prostu przejdź do Wyświetl źródło -> Wyświetl wygenerowane źródło

Używam go cały czas do dokładnie tego samego celu.

Miałem ten sam problem i znalazłem tutaj rozwiązanie:

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

Tak więc, aby użyć Crowbar, narzędzia stąd:

http://simile.mit.edu/wiki/Crowbar (obecnie (obecnie (2015-12) 404s)
łącze do maszyny zwrotnej:
http://web.archive.org/web/20140421160451/http://simile.mit.edu/ wiki / Crowbar

Dało mi to wadliwy, nieprawidłowy kod HTML.

To jest stare pytanie, a oto stara odpowiedź, która kiedyś działała dla mnie bezbłędnie przez wiele lat , ale już nie działa, przynajmniej nie od stycznia 2016:

Bookmarklet „Wygenerowane źródło” od SquareFree robi dokładnie to, co chcesz - iw przeciwieństwie do dobrego „starego złota” z @ Johnny5, wyświetla się jako kod źródłowy (zamiast być normalnie renderowany przez przeglądarkę, przynajmniej w przypadku Google Chrome na Macu):

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

Niestety zachowuje się jak „stare złoto” z @ Johnny5: nie pojawia się już jako kod źródłowy. Przepraszam.

W przeglądarce Firefox po prostu naciśnij ctrl-a (zaznacz wszystko na ekranie), a następnie kliknij prawym przyciskiem myszy „Wyświetl źródło wyboru”. Przechwytuje wszelkie zmiany wprowadzone przez JavaScript w DOM.

alert (document.documentElement.outerHTML);

Dlaczego nie wpisać, to jest URL?

javascript:alert(document.body.innerHTML)

W zakładce Elementy kliknij prawym przyciskiem myszy węzeł html> kopiuj> kopiuj element - następnie wklej do edytora.

Jak wspomniano powyżej, po przekonwertowaniu źródła na drzewo DOM, oryginalne źródło nie istnieje już w przeglądarce. Wszelkie zmiany, które wprowadzisz, będą dotyczyły DOM, a nie źródła.

Możesz jednak przeanalizować zmodyfikowany model DOM z powrotem do HTML, dzięki czemu zobaczysz „wygenerowane źródło”.

1. W przeglądarce Chrome otwórz narzędzia programistyczne i kliknij kartę elementów.
2. Kliknij prawym przyciskiem myszy element HTML.
3. Wybierz kopiuj> kopiuj element.
4. Wklej do edytora.

Możesz teraz zobaczyć bieżący DOM jako stronę HTML.

To nie jest pełny DOM

Zauważ, że DOM nie może być w pełni reprezentowany przez dokument HTML. Dzieje się tak, ponieważ DOM ma znacznie więcej właściwości niż atrybuty HTML. Jednak będzie to rozsądne zadanie.

Myślę, że narzędzia deweloperskie IE (F12) mają; Widok> Źródło> DOM (Strona)

Będziesz musiał skopiować i wkleić DOM i zapisać go, aby wysłać go do walidatora.

Jedyne, co znalazłem, to rozszerzenie BetterSource dla Safari, które pokaże zmanipulowane źródło dokumentu, jedyną wadą jest nic podobnego do Firefoksa

Poniższy fragment kodu javascript zapewnia pełne źródło wygenerowane w formacie HTML renderowanym przez AJAX. Niezależna od przeglądarki. Cieszyć się :)

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 ;

Wypróbuj rozszerzenie do Chrome „Wyświetl renderowane źródło”:

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

Udało mi się rozwiązać podobny problem, logując wyniki wywołania Ajax do konsoli. To był zwrócony kod HTML i mogłem łatwo zobaczyć wszelkie problemy, które miał.

w mojej funkcji .done () mojego wywołania ajax dodałem console.log (wyniki), więc mogłem zobaczyć html w konsoli debuggera.

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