online extension español edition developer complementos chrome firefox code-generation firebug firefox-addon web-developer-toolbar

extension - ¿Cómo ver "código HTML generado" en Firefox?



web developer extension chrome download (5)

Si utilizas 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?

Solo descubrí accidentalmente que ni siquiera es necesario que sea Firebug. Podemos simplemente presionar CTRL-A (para seleccionar todo) en la página web, y luego hacer clic derecho y elegir "Ver origen de selección", luego obtendremos un archivo de texto plano del "código HTML actual", incluso veremos un <div> ese es el panel 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 generalmente se refiere al HTML después de que JavaScript cambia el DOM. Es el árbol DOM actual en lugar del código fuente original)


Con el complemento de barra de herramientas de desarrollador web , seleccione Ver código fuente - Ver origen generado . Y si desea ver la fuente original, seleccione Ver fuente - Ver fuente (o simplemente presione CTRL - MAYÚSCULA - U )


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, podría usar un bookmarklet como este:

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;


No sé si entendí bien tu pregunta, 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 el origen de la página" y así sucesivamente.

Una vez dicho esto, la barra de herramientas de Web Developer es un gran complemento, especialmente si también tienes CSS.


Si está buscando una solución programática, puede simplemente alimentar el documento en un XMLSerializer.


Usando Firefox DevTools (integrado en FF desde la versión 35) puede ver el HTML generado abriendo el inspector web ( CTRL - shift - C ) y seleccionando la pestaña HTML .

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