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

84

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.

Jeremy Kauffman
źródło
Hmmm, myślałem, że prosił o odwrotność - dokładny kod HTML emitowany przez serwer. Jeremy?
Justin Grant
nieważne, właśnie zobaczyłem nowy komentarz. Teraz bardziej sensowne jest to, co próbujesz zrobić - dzięki za wyjaśnienie. Zaktualizuję odpowiednio moją odpowiedź.
Justin Grant
Godne uwagi jest to, że wielu widzów tego posta przegapiło główny punkt, którym jest to, że statyczne źródła nie mogą być używane do analizy stron, które zostały zmodyfikowane przez JavaScript. Firebug jest do tego świetny, ale byłoby miło, gdyby istniało i narzędzie IE, które robi to samo, ponieważ zgodność przeglądarki jest dużym problemem z IE.
Paul Keister
1
Firebug nie naprawia żadnych błędów w HTML. Po prostu renderuje tagi z Firefox DOM. Firebug 1.6 unika dodawania elementów; dla wszystkich wersji Firebuga możesz uniknąć zmiany DOM poprzez wyłączenie panelu Console.
johnjbarton
1
Właśnie tak wiele się nauczyłem z tego pytania!
Sergey Orshanskiy

Odpowiedzi:

32

[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 Grant
źródło
Znając Fiddlera, nie jest to łatwy sposób na robienie tego, co chcę (przeglądanie wygenerowanego źródła strony po zmianie przez użytkownika).
Jeremy Kauffman
1
Chce źródło strony po zmodyfikowaniu domeny przez javascript.
Byron Whitlock
Nie jestem zwolennikiem krytyki, ale twoja odpowiedź nie ma nic wspólnego z samym pytaniem. Pytanie mogło zostać zmienione, odkąd skomentowałeś.
bradlis7
tak, wiem, że teraz ... pierwotne pytanie nie dotyczyło jednak tego ważnego szczegółu. :-) Kiedy otrzymałem nowe informacje z PO, właśnie zaktualizowałem moją odpowiedź. Ale myślę, że moja pierwotna odpowiedź była rozsądną odpowiedzią na pierwotne pytanie. Chociaż nie jest to najlepsza odpowiedź (podoba mi się, że Zapomniany średnik jest znacznie lepszy!), Zastanawiam się, co sprawiło, że moja odpowiedź zasługiwała na negatywną opinię. Nic wielkiego, tylko się zastanawiam.
Justin Grant
Dziękuję za wyjaśnienie dotyczące obecnego kodu HTML istniejącego tylko w DOM przeglądarki. To jest sedno mojego problemu i nie zrozumiałem tego, kiedy zapytałem. To sprawia, że ​​wierzę, że to, o co proszę, jest w zasadzie niemożliwe.
Jeremy Kauffman
34

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
s4y
źródło
1
Tak więc, aby przeformułować tę odpowiedź, jest to jak kompilowanie programu, optymalizacja lub inna modyfikacja kodu za pomocą jakiegoś narzędzia lub nawet zainfekowanie programu wirusem, a następnie zapytanie o kod źródłowy wyniku. Transformacja HTML-> DOM jest funkcją jednokierunkową.
Sergey Orshanskiy
+1, do diabła, działa, żeby zobaczyć kod przed i po każdej modyfikacji. bardzo mądre myślenie! Dziękuję
jimjim
Może to prawda, ale nie do końca odpowiada na pytanie. Jest całkowicie możliwe przekonwertowanie aktualnie zmanipulowanego DOM z powrotem do HTML, co pozwala na „przeglądanie wygenerowanego źródła”. Jest to czasami przydatne, na przykład, jeśli chcesz porównać pojedynczy fragment JavaScript z realistyczną wiązką testową.
superluminarium
21

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.

Johnny5
źródło
Wow, to jest rzeczywiście PURE GOLD! Działa świetnie po jednym kliknięciu zakładki. Przynajmniej tak się stało w Firefoksie właśnie teraz. W Chrome wyskakujące okienko zostało wyrenderowane - może ignoruje „tekst / zwykły”?
Jon Coombs,
Kopiuję, wklejam to w pasku adresu mojej przeglądarki i ENTER, nic się nie dzieje
eMi
1
@eMi Mam tu IE10 i nie pozwala mi wkleić javascript:części, muszę wpisać ręcznie. Może tak się dzieje. Sprawdź dokładnie, co zostało wklejone.
Johnny5,
1
W przeglądarce Google Chrome (przynajmniej od wersji 44.0.2403.155) w systemie Mac OSX bookmarklet autorstwa @ Johnny5 nie powoduje powstania strony tekstowej zawierającej źródło otwieracza, ale Chrome próbuje renderować kod HTML, ale bez CSS, z wyglądu.
Dave Land
@ Johnny5 warto wspomnieć o notatce w odpowiedzi, która javascript:jest ucinana podczas kopiowania / wklejania w niektórych przeglądarkach. Właśnie miałem ten problem w Chrome.
Bryan
12

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.

Carl Smotricz
źródło
11
W Google Chrome, w Inspect Element, możesz kliknąć prawym przyciskiem dowolny element i „Kopiuj jako HTML”
JasonPlutext
3
@Jason Dziękuję bardzo za to. Kliknięcie prawym przyciskiem myszy elementu <html> i wybranie „Kopiuj jako HTML” dało mi dokładnie to, czego potrzebowałem dzisiaj w Chrome.
DaveGauer
11

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) .

Zapomniany średnik
źródło
Nie głosowałem przeciw, ale „walidacja HTML” nie wyśle ​​wygenerowanego kodu HTML, ale oryginalne źródło. (Zobacz zredagowane pytanie)
Pekka
Właśnie to wypróbowałem, nie wydaje się, aby przesyłać wygenerowane źródło (tj. Źródło ze zmianami DOM), ale źródło, które byłoby widoczne z opcją „wyświetl źródło” programu Firefox.
Jeremy Kauffman
Zmieniam słupki bramki na mnie!
Zapomniany średnik
1
Myślałem, że „źródło generowane przez widok” wyjaśni tę część pytania, ale sądząc po 4 dotychczasowych odpowiedziach, wyraźnie się pomyliłem :)
Jeremy Kauffman
Link do Wyświetl wykresu źródłowego jest uszkodzony
Casebash
6

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.

lewsid
źródło
Teraz widzę twoją edycję, w której cytujesz problem Doctype z paskiem narzędzi. To uczciwa krytyka i nie mam nic innego do zaproponowania.
lewsid
3
Działa świetnie i jest teraz wbudowany w waniliową przeglądarkę Firefox. Ctrl + A, kliknij prawym przyciskiem myszy, E. Zobacz także doskonały bookmarklet znaleziony przez Johnny5.
Jon Coombs,
W przeglądarce Firefox: kliknij prawym przyciskiem myszy stronę z wygenerowaną treścią, którą chcesz wyświetlić, a następnie Web Developer> Wyświetl źródło> Wyświetl wygenerowane źródło
Mark Gavagan
5

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.

adamvagyok
źródło
Sprawdź także inne części tej serii: Część 2 , Część 3 .
Jabba,
łomu już tam nie ma
Mousey
Niezbyt przyjazny dla użytkownika, ale nadal można go pobrać za pośrednictwem SVN: devres.zoomquiet.io/data/20110810165553/index.html
adamvagyok
5

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.

Dave Land
źródło
4

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.

Mike_K
źródło
Nie działa, jeśli strona przechwyciła prawe kliknięcie.
Kevin Whitefoot
4

alert (document.documentElement.outerHTML);

JohnnyFaldo
źródło
3

Dlaczego nie wpisać, to jest URL?

javascript:alert(document.body.innerHTML)
Mikrofon
źródło
1
+1: Nie działało dla mnie na pasku adresu w IE 10, ale działało pięknie w konsoli narzędzi deweloperskich IE.
SausageFingers
3

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.

superluminium
źródło
2

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.

Will Hancock
źródło
Możesz także chcieć; Plik> Dostosuj źródło widoku programu Internet Explorer> Notatnik w celu łatwego zapisywania, gdy wykonasz powyższe.
Will Hancock
1

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

ellisgeek
źródło
1

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 ;
Sathish
źródło
Myślę, że wymagałoby to szczegółowych instrukcji, jak go używać. Zakładam, że wkleisz kod na istniejącej stronie, ale gdzie pójdą dane wyjściowe?
Jon Coombs,
0

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

ebarke
źródło
@erbarke, czy mógłbyś bardziej szczegółowo opisać swoją odpowiedź i wyjaśnić ją bardziej szczegółowo (kod, szczegółowy przepływ akcji)?
Artem