28

Se si utilizza Firebug, è possibile fare clic sulla scheda HTML e fare clic per espandere ciascun elemento per visualizzare il codice HTML generato. C'è un modo per espandere tutto o ottenere un file di testo normale?Come visualizzare "codice HTML generato" in Firefox?

Ho scoperto per caso che non c'è nemmeno bisogno di essere Firebug. Possiamo semplicemente premere CTRL-A (per selezionare tutto) sulla pagina Web, quindi fare clic con il tasto destro e scegliere "Visualizza sorgente di selezione", quindi otterremo un file di testo normale del "codice HTML attuale", vedremo anche un <div> che è il pannello Firebug che precede il tag <body> se Firebug è aperto. Ma sembra un modo strano per invocare questo. C'è un altro modo?

(Aggiornamento:. HTML generato di solito si riferisce al codice HTML dopo cambia JavaScript DOM E 'l'albero del DOM corrente al posto del codice sorgente originale)

+1

+1 per selezionare l'area e fare clic con il tasto destro del mouse e scegliere "Visualizza sorgente di selezione", che non richiede plug-in aggiuntivi. – Morpork

risposta

26

Nella scheda HTML di Firebug, fare clic con il tasto destro del mouse sul nodo radice e selezionare "copia HTML". Quindi incollare su un editor di testo.

Senza Firefox Componenti aggiuntivi, è possibile utilizzare un bookmarklet come questo:

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

Ottima soluzione.Funziona anche su Chrome. – twasbrillig

+0

Si sono verificati errori di blocco dei popup. Disabilitato il blocco pop-up, ha ancora degli errori. Potrebbe avere qualcosa a che fare con pdf.js. Soluzione: 'document.body.onclick = function() {/ * the code * /};' e quindi fai clic in qualsiasi punto del documento. Lì l'ho risolto! – Luc

+0

bel trucco, ma bisogna tenere a mente che gli spazi bianchi si perdono. – nerdess

18

Con il Web Developer toolbar add-on, selezionare View Source - Visualizza origine generata. E se si desidera visualizzare la fonte originale, selezionare Visualizza origine - Visualizza origine (o semplicemente premere CTRL - SHIFT - U)

+0

Strumento superbo. È così esteso rispetto a Fto devtool – ThePhi

-1

Non so se ho capito la tua domanda bene, ma qui è qualcosa di veramente semplice e non avrai bisogno di un altro addon.

Ogni browser ha una funzione nativa per visualizzare il codice sorgente della pagina effettiva, basta fare clic con il pulsante destro del mouse e cercare qualcosa che assomigli a "sorgente" o "codice".

In Firefox, ad esempio, è solo "Souce-code", in Chrome è "Visualizza origine pagina" e così via.

Detto questo, la barra degli strumenti Web Developer è davvero un ottimo componente aggiuntivo, specialmente se si fa anche CSS.

+3

il "codice HTML generato" di solito si riferisce al codice HTML generato da Javascript che modifica il DOM. l'HTML risultante. –

0

Se siete alla ricerca di una soluzione programmatica, si può solo alimentare il documento in un XMLSerializer.

3

Utilizzando le DevTools Firefox (integrati in FF a partire dalla versione 35) è possibile visualizzare la generato aprendo l'ispettore web HTML (CTRL - spostamento - C) e selezionando la scheda HTML.

È possibile copiare l'HTML generato facendo clic con il pulsante destro su <html> e selezionando Copia HTML interno.

+0

Questo non sembra mostrare la sorgente generata (cioè non riflette le modifiche apportate da JavaScript). Forse cambiato in Firefox 57? –

Problemi correlati