28

Jeśli używasz Firebug, możemy kliknąć kartę HTML i kliknąć, aby rozwinąć każdy element, aby zobaczyć wygenerowany kod HTML. Czy istnieje sposób, aby rozwinąć to wszystko lub uzyskać zwykły plik tekstowy?Jak wyświetlić "wygenerowany kod HTML" w przeglądarce Firefox?

Po prostu okazało się, że nie musi być nawet Firebug. Możemy po prostu nacisnąć CTRL-A (aby wybrać wszystkie) na stronie, a następnie kliknąć prawym przyciskiem myszy i wybrać "View Selection Source", wtedy otrzymamy zwykły plik tekstowy z "aktualnego kodu HTML", nawet zobaczymy <div>, że to panel Firebug, który znajduje się przed tagiem <body>, jeśli Firebug jest otwarty. Ale wydaje się to dziwnym sposobem na przywołanie tego. Czy jest jakiś inny sposób?

(Aktualizacja. Wygenerowany HTML zazwyczaj odnosi się do HTML po zmianach JavaScript DOM Jest obecny drzewo DOM zamiast oryginalnego kodu źródłowego)

+1

+1 za wybór obszaru i kliknij prawym przyciskiem myszy i wybierz "Wyświetl źródło wyboru", które nie wymaga żadnych dodatkowych wtyczek. – Morpork

Odpowiedz

26

W zakładce Firebug HTML kliknij prawym przyciskiem myszy węzeł główny i wybierz "Kopiuj HTML". Następnie wklej do edytora tekstu.

Bez dodatków dla Firefoksa, można użyć bookmarklet takiego:

javascript: var win = window.open(); win.document.write('<html><head><title>Generated HTML of ' + location.href + '</title></head><pre>' + document.documentElement.innerHTML.replace(/&/g, '&amp;').replace(/</g, '&lt;') + '</pre></html>'); win.document.close(); void 0; 
+0

Świetne rozwiązanie.Działa to również w Chrome. – twasbrillig

+0

Wystąpiły błędy blokowania wyskakujących okienek. Wyłączono blokowanie wyskakujących okienek, nadal występują błędy. Może mieć coś wspólnego z pdf.js. Obejście: 'document.body.onclick = function() {/ * the code * /};', a następnie kliknij w dowolnym miejscu w dokumencie. Naprawiłem to! – Luc

+0

fajny hack, ale należy pamiętać, że białe znaki zgubią się. – nerdess

18

Z Web Developer toolbar add-on, wybierz Pokaż źródło - Wyświetl wygenerowane źródło. A jeśli chcesz, aby zobaczyć oryginalne źródło, wybierz View Source - View Source (lub po prostu naciśnij CTRL - SHIFT - U)

+0

Doskonałe narzędzie. Jest tak obszerny w porównaniu do devoftu FF – ThePhi

-1

Nie wiem czy zrozumiałem pytanie dobrze, ale tutaj jest coś naprawdę prostego i nie będziesz potrzebować kolejnego dodatku.

Każda przeglądarka ma natywną funkcję wyświetlania kodu źródłowego rzeczywistej strony, wystarczy kliknąć prawym przyciskiem myszy i szukać czegoś, co przypomina "źródło" lub "kod".

Na przykład w Firefoksie jest to po prostu "kod Souce", w Chrome jest to "Wyświetl źródło strony" i tak dalej.

Mimo to pasek narzędzi dla programistów witryn internetowych jest naprawdę świetnym dodatkiem, szczególnie jeśli używasz CSS.

+3

"wygenerowany kod HTML" zwykle odnosi się do HTML generowanego przez JavaScript modyfikujący DOM. wynikowy HTML. –

0

Jeśli szukasz rozwiązania programowego, można po prostu nakarmić dokument do o XMLSerializer.

3

Używanie DevTools Firefoksa (zintegrowany w FF od wersji 35) można zobaczyć wygenerowany kod HTML otwarcie inspektora internetowej (CTRL - przesunięcie - C) i wybierając kartę HTML.

Możesz skopiować wygenerowany kod HTML, klikając prawym przyciskiem myszy na <html> i wybierając Skopiuj wewnętrzny kod HTML.

+0

To ustawienie nie wyświetla wygenerowanego źródła (tzn. Nie odzwierciedla zmian wprowadzonych przez JavaScript). Być może zmieniono w Firefoksie 57? –