Cómo ver la fuente HTML en Google Chrome

Mostrar imagen de héroe de origen

Si eres un diseñador web que está depurando el código fuente de tu sitio o simplemente tienes curiosidad por saber cómo se ve el código de un sitio, puedes ver la fuente HTML directamente en Google Chrome. Hay dos formas de ver la fuente HTML: ver la fuente e inspeccionar usando herramientas de desarrollo.

Ver código fuente usando Ver código fuente de la página

Inicie Chrome y navegue hasta la página web donde desea ver el código fuente HTML. Haga clic con el botón derecho en la página y haga clic en «Ver código fuente de la página» o presione Ctrl + U para ver la fuente de la página en una nueva pestaña.

Haga clic con el botón derecho en una página y luego haga clic en Ver código fuente de la página

Se abre una nueva pestaña con todo el código HTML de la página web, completamente expandido y sin formato.

La fuente se abre en una pestaña nueva

Si está buscando un elemento o parte específica en la fuente HTML, usar Ver fuente es tedioso y tedioso, especialmente si la página usa mucho JavaScript y CSS.

Inspeccione la fuente utilizando herramientas de desarrollo

Este método utiliza el panel Herramientas de desarrollo en Chrome y es un enfoque mucho más limpio para ver el código fuente. HTML es más fácil de leer aquí gracias al formato adicional y la capacidad de contraer cosas que no desea ver.

Abra Chrome y diríjase a la página que desea inspeccionar; luego presione Ctrl + Shift + i. Se abrirá un panel acoplado junto a la página web que está viendo.

Las herramientas para desarrolladores se abren como un panel acoplado en Chrome

Haga clic en la pequeña flecha gris junto a un elemento para expandirlo más.

Contraer elementos al hacer clic en la flecha gris

Si no desea ver el código de toda la página de forma predeterminada, sino inspeccionar un elemento específico en el código HTML, haga clic con el botón derecho en ese espacio en la página y haga clic en «Inspeccionar».

Navegue a un elemento específico cuando haga clic derecho sobre él, luego haga clic en Inspeccionar

Cuando el panel se abre esta vez, salta directamente a la parte del código que contiene el elemento en el que hizo clic.

La herramienta va directamente a este elemento.

Si desea cambiar la posición del muelle, puede moverlo hacia abajo, hacia la izquierda, hacia la derecha o incluso separarlo en una ventana separada. Haga clic en el icono de menú (tres puntos), luego elija Separar en ventana separada, Acoplar a la izquierda, Acoplar a la parte inferior o Acoplar a la derecha, respectivamente.

Eso es todo lo que podemos decir al respecto. Cuando haya terminado de ver el código, cierre la pestaña Ver código fuente o haga clic en la «X» en el panel Herramientas para desarrolladores para volver a su página web.

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *