¿Cuál es la diferencia entre "Fuente" y "Fuente generada" en Firefox?¿Cuál es la diferencia entre "Fuente" y "Fuente generada"?
Explique con un ejemplo.
Editar:3 de julio de
¿Qué fuente de "motor de búsqueda" utiliza, generada o antes generada?
Fuente mostrará la fuente que la página se cargó con (servido por el servidor).
La fuente generada dibujará el 'código fuente' de los elementos DOM actuales, y por lo tanto incluye elementos creados dinámicamente por JavaScript.
Por ejemplo, la fuente mostraría:
<script>
window.onload = function(){
document.getElementById('test').innerHTML = 'Generated Content';
}
</script>
<html>
<div id='test'>Source</div>
</html>
y fuente generado sería 'draw' la fuente en el momento de hacer clic en 'Ver código fuente generado', después de lo cual el contenido del div han cambiado, y lo haría ver:
<script>
window.onload = function(){
document.getElementById('test').innerHTML = 'Generated Content';
}
</script>
<html>
<div id='test'>Generated Content</div> <!-- Note the difference here -->
</html>
Ver fuente mostrará la fuente que fue servida por el servidor.
Ver genera fuente mostrará el código fuente de lo que en realidad está siendo mostrado - que incluye lo que ha cambiado JavaScript, etc.
bien, entonces significa solo está relacionado con el idioma del lado del servidor y del cliente. CSS y HTML serán los mismos en "Fuente" y "Fuente generada" –
No, un ejemplo de fuente generada sería una llamada AJAX a un servicio web que actualiza texto en un div. La fuente generada mostraría lo que está actualmente en la pantalla donde la fuente mostraría lo que inicialmente se cargó cuando se solicitó la página. –
@Durilai - ¿Podrías tomar algún ejemplo en vivo y explicar con un ejemplo? Gracias –
Es realmente bastante simple.
Fuente:
<body>
<script>document.write("hello, world");</script>
</body>
fuente generado:
<body>
<script>document.write("hello, world");</script>
hello, world
</body>
Más informa extensamente: "fuente" es lo que llega al navegador en respuesta a la solicitud de página. "Fuente generada" es lo que el navegador tiene después de todos los incendios de JavaScript.
por lo que solo está relacionado con javascript. html y css serán los mismos tanto en "Fuente" como en "Fuente generada" –
No, cualquier CSS o HTML escrito por Javascript está en la fuente generada. – Jacob
El término "Fuente generada" es un nombre inapropiado, ya que lo que está viendo no es "fuente" en absoluto. "Fuente" es el HTML enviado al navegador. "Fuente generada" es la serialización del estado actual del modelo de objeto resultante del análisis sintáctico de la fuente más los cambios posteriores a ese modelo de objeto debido a la aplicación de la secuencia de comandos. Las otras respuestas han discutido javascript, pero el efecto del analizador no debe descontarse.
Considere esta fuente:
<title>My Test Example</title>
<table>
<tr>
<td>Hello</td>
<div>There</div>
</table>
La fuente generado (después de añadir un poco de espacio en blanco para mayor claridad) es:
<html>
<head>
<title>My Test Example</title>
</head>
<body>
<div>There</div>
<table>
<tbody>
<tr>
<td>Hello</td>
</tr>
</tbody>
</table>
</body>
</html>
Vea cómo las etiquetas html, cabeza, cuerpo y apertura tbody y cierre han sido agregado por el analizador, asimismo, se ha agregado la etiqueta de cierre tr. Además, el div se ha movido a antes de la tabla.
'ver fuente' muestra el código real en su archivo, como si hubiera abierto el archivo en un editor de texto.
'ver fuente generada' muestra cómo el navegador lo renderiza en la pantalla, después de que se haya ejecutado todo el script del lado del servidor (Javascript, PHP, etc.).
por lo que si tuviera un index.html vacío div y un image.jpg fue 'AJAXed' en este div usando Javascript, entonces 'ver fuente' le mostrará
<div></div>
pero 'visión genera fuente' le mostrará
<div><img src="image.jpg"/></div>
solo una nota: egin firefox, no tiene este elemento del menú. sin embargo, puede ver la fuente generada seleccionando todo en la página (ctrl-a), luego haga clic derecho -> "ver fuente de selección" – mykhal
@mykhal - sí, esto es una captura de pantalla de "Barra de herramientas Web Developer" –