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

Justin jest martwy. Kluczowym punktem jest tutaj to, że HTML jest tylko językiem opisującym dokument. Gdy przeglądarka go przeczyta, zniknie . Open tags, close tags i formatowanie są obsługiwane przez parser , a następnie go away. Każde narzędzie, które wyświetla HTML jest generuje go na podstawie zawartości dokumentu, więc zawsze będzie poprawny.

Musiałem kiedyś wyjaśnić to innemu programiście i trochę zajęło mu zaakceptowanie tego to.

Możesz spróbować samodzielnie 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>

Znaczniki zamknięte i nazwy znaczników pisane wielkimi literami zniknęły, ponieważ HTML został przetworzony i odrzucony po drugiej linii.

Właściwym sposobem modyfikacji dokumentu z JavaScript są metody document(createElement, appendChild, setAttribute, itd.) i zauważysz, że w żadnej z tych funkcji nie ma odniesienia do znaczników ani składni HTML. Jeśli używasz document.write, innerHTML, lub inne wywołania mówiące w języku HTML, aby zmodyfikować swoje strony, jedynym sposobem, aby to zweryfikować, jest złapanie tego, co wkładasz do nich i zweryfikowanie tego HTML oddzielnie.

To powiedziawszy, najprostszym sposobem na uzyskanie reprezentacji HTML dokumentu jest:

document.documentElement.innerHTML

Wiem, że to stary post, ale właśnie znalazłem ten kawałek złota . To jest stare (2006), ale nadal działa z IE9. Dodałem do tego zakładkę.

Po prostu skopiuj 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 Firefoksa, pasek narzędzi Web developper robi to zadanie. Zazwyczaj używam tego, ale czasami, jakaś brudna 3rd party asp.net kontrolki generują różne znaczniki na podstawie agenta użytkownika...

EDIT

Jak wskazał Bryan w komentarz, jakaś przeglądarka usuwa javascript: część podczas kopiowania/wklejania w pasku adresu url. Właśnie testowałem i tak jest w przypadku IE10.

Jeśli załadujesz dokument w Chrome, widok Developer|Elements pokaże Ci kod HTML w postaci kodu JS. Nie jest to bezpośrednio tekst HTML i musisz otworzyć (rozwinąć) wszelkie interesujące Cię elementy, ale skutecznie możesz sprawdzić wygenerowany HTML.

Na pasku narzędzi Web Developer próbowałeś już opcji Tools -> Validate HTML LUB Tools -> Validate Local HTML?

Opcja Validate HTML wysyła adres url do walidatora, który działa dobrze z publicznie dostępnymi witrynami. Opcja Validate Local HTML wysyła kod HTML bieżącej strony do walidatora, który działa dobrze ze stronami za loginem lub tymi, które nie są publicznie dostępne.

Możesz również spróbować wyświetlić wykres źródłowy (również jako dodatek do Firefoksa). Ciekawa notka:

Q. Dlaczego czy Widok wykresu Źródła zmienia moje znaczniki XHTML na znaczniki HTML?

A. Nie. przeglądarka wprowadza te zmiany, VSC wyświetla jedynie to, co przeglądarka zrobiła z Twoim kodem. Najczęściej: tagi samozamykające tracą ukośnik zamykający (/). zobacz ten artykuł na Rendered Source aby uzyskać więcej informacji (archive.org).

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

Po prostu przejdź do View Source - > View Generated Source

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

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

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

Więc, aby użyć Łom, narzędzie stąd:

Http://simile.mit.edu/wiki/Crowbar (Teraz (2015-12) 404s)
wayback machine link:
http://web.archive.org/web/20140421160451/http://simile.mit.edu/wiki/Crowbar

Dał mi wadliwy, nieprawidłowy HTML.

To stare pytanie, a oto stara odpowiedź, która kiedyś działała dla mnie bez zarzutu przez wiele lat, ale już nie, przynajmniej nie od stycznia 2016 roku: {]}

Bookmarklet "Generated Source" Z SquareFree robi dokładnie to, co chcesz-i, w przeciwieństwie do "starego złota" z @ Johnny5, wyświetla się jako kod źródłowy (zamiast być renderowane normalnie przez przeglądarkę, przynajmniej w przypadku Google Chrome na Mac):

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 Firefoksie po prostu ctrl-a (Zaznacz wszystko na ekranie), a następnie kliknij prawym przyciskiem myszy "Wyświetl źródło wyboru". To rejestruje wszelkie zmiany wprowadzone przez JavaScript do DOM.

Alert(document.documentElement.outerHTML);

Dlaczego nie wpisać this is the urlbar?

javascript:alert(document.body.innerHTML)

Na karcie Elementy kliknij prawym przyciskiem myszy węzeł html > Kopiuj > Kopiuj element , a następnie wklej do edytora.

Jak wspomniano powyżej, po przekonwertowaniu źródła do drzewa DOM, oryginalne źródło nie istnieje już w przeglądarce. Wszelkie zmiany, których dokonasz, będą dotyczyć DOM, a nie Źródła.

Możesz jednak przetworzyć zmodyfikowany DOM z powrotem do HTML, pozwalając zobaczyć "wygenerowane źródło".

1. w Chrome otwórz Narzędzia programistyczne i kliknij elementy tab.
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 dlatego, że DOM ma o wiele więcej właściwości niż HTML ma atrybuty. Jednak to będzie rozsądne zadanie.

Myślę, że IE dev tools (F12) ma; View > Source > DOM (Page)

Musisz skopiować i wkleić DOM i zapisać go, aby wysłać do walidatora.

Jedyne co znalazłem to BetterSource rozszerzenie dla Safari to pokaże Ci zmanipulowane źródło dokumentu tylko minusem jest nic zdalnie takiego jak dla Firefoksa

Poniższy urywek kodu javascript zapewni Ci pełne źródło generowane przez ajax renderowane HTML. Niezależny od przeglądarki. Enjoy :)

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 ;

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

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