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:
- 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.
- 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.
- 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).
- 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.
Odpowiedzi:
[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.
źródło
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
document
metodami (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żywaszdocument.write
,innerHTML
lub 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:
źródło
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:
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.źródło
javascript:
części, muszę wpisać ręcznie. Może tak się dzieje. Sprawdź dokładnie, co zostało wklejone.javascript:
jest ucinana podczas kopiowania / wklejania w niektórych przeglądarkach. Właśnie miałem ten problem w Chrome.Jeśli załadujesz dokument w Chrome,
Developer|Elements
widok 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.źródło
Czy wypróbowałeś opcje
Tools -> Validate HTML
lub na pasku narzędzi Web DeveloperTools -> Validate Local HTML
?Validate HTML
Opcja wysyła URL do weryfikatora, który dobrze współpracuje z miejsc stojących publicznie.Validate Local HTML
Opcja 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:
źródło
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.
źródło
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.
źródło
To jest stare pytanie, a oto stara odpowiedź,
którakiedyś działała dla mnie bezbłędnieprzez 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.
źródło
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.
źródło
alert (document.documentElement.outerHTML);
źródło
Dlaczego nie wpisać, to jest URL?
źródło
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”.
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.
źródło
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.
źródło
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
źródło
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 ;
źródło
Wypróbuj rozszerzenie do Chrome „Wyświetl renderowane źródło”:
https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob/
źródło
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"); }); }
źródło