Header Ads Widget

Ticker

6/recent/ticker-posts

Cómo ver la fuente HTML en Google Chrome

 Ver la imagen principal de la fuente

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 el código fuente HTML: Ver código fuente e Inspeccionar usando herramientas de desarrollo.

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

Inicie Chrome y vaya a la página web en la que 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, luego haga clic en Ver código fuente de la página

Se abre una nueva pestaña junto con todo el HTML de la página web, completamente expandida y sin formato.

La fuente se abre en una nueva pestaña

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

Inspeccionar la fuente con las 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 elementos que no le interesa 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 aún más.

Contraer elementos al hacer clic en la flecha gris

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

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

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

La herramienta va directamente a ese elemento.

Si desea cambiar la posición de la base, puede moverla hacia la parte inferior, izquierda, derecha o incluso desacoplarla en una ventana separada. Haga clic en el icono de menú (tres puntos), luego elija desacoplar en una ventana separada, acoplar a la izquierda, acoplar a la parte inferior o acoplar a la derecha, respectivamente.

Cambie la orientación de la base al hacer clic en el ícono de menú, luego haga clic en una de las cuatro opciones


Eso es todo al respecto. Cuando termine 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.

Publicar un comentario

0 Comentarios