28

Si usamos Firebug, podemos hacer clic en la pestaña HTML y hacer clic para expandir cada elemento y ver el código HTML generado. ¿Hay alguna manera de expandirlo todo u obtener un archivo de texto sin formato?¿Cómo ver "código HTML generado" en Firefox?

Acabo de descubrir accidentalmente que no es necesario que sea Firebug. Podemos simplemente presionar CTRL-A (para seleccionar todo) en la página web, y luego hacer clic derecho y seleccionar "Ver origen de selección", luego obtendremos un archivo de texto plano del "código HTML actual", incluso veremos un <div> que es el panel de Firebug que está antes de la etiqueta <body> si Firebug está abierto. Pero parece una forma extraña de invocar esto. ¿Hay alguna otra manera?

(actualización:. HTML generado por lo general se refiere al HTML después de los cambios de JavaScript DOM Es el árbol DOM actual en lugar del código fuente original)

+1

+1 para seleccionar el área y hacer clic con el botón derecho y elegir "Ver origen de selección", que no requiere ningún complemento adicional. – Morpork

Respuesta

26

En la pestaña HTML de Firebug, haga clic con el botón derecho en el nodo raíz y seleccione "copiar HTML". Luego, pegue en un editor de texto.

Sin complementos de Firefox, se puede utilizar un bookmarklet así:

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

Gran solución.Esto también funciona en Chrome. – twasbrillig

+0

Tiene errores del bloqueador de elementos emergentes. Inhabilitado el bloqueador de pop-ups, todavía tiene errores. Puede tener algo que ver con pdf.js. Solución: 'document.body.onclick = function() {/ * el código * /};' y luego haga clic en cualquier parte del documento. ¡Allí lo arreglé! – Luc

+0

buen truco, pero hay que tener en cuenta que los espacios en blanco se pierden. – nerdess

18

Con la Web Developer toolbar complemento, seleccione Ver código fuente - Ver origen generado. Y si desea ver la fuente original, seleccione Ver código - Ver código (o simplemente pulse CTRL - SHIFT - T)

+0

Excelente herramienta. Es tan extenso comparado con el devtool de FF – ThePhi

-1

No sé si he entendido su pregunta Bueno, pero aquí hay algo realmente simple y no necesitarás otro complemento.

Cada navegador tiene una función nativa para ver el código fuente de la página real, simplemente haga clic derecho y busque algo que se asemeje a "fuente" o "código".

En Firefox, por ejemplo, es solo "Código de Souce", en Chrome es "Ver origen de página", y así sucesivamente.

Dicho esto, la barra de herramientas de Web Developer es de hecho un gran complemento, especialmente si también hace CSS.

+3

el "código HTML generado" generalmente se refiere al HTML generado por Javascript que modifica el DOM. el HTML resultante. –

0

Si usted está buscando una solución de programación, sólo puede alimentar el documento en un XMLSerializer.

3

Usando los DevTools Firefox (integrados en FF desde la versión 35) se puede ver el código HTML generado abrir el inspector web (CTRL - cambio - C) y seleccionando la pestaña HTML .

Puede copiar el código HTML generado haciendo clic derecho en <html> y seleccionando Copia de HTML interno.

+0

Esto no parece mostrar la fuente generada (es decir, no refleja los cambios realizados por JavaScript). Tal vez cambiado en Firefox 57? –

Cuestiones relacionadas