Cómo ver la fuente HTML en Google Chrome

Si usted es un diseñador web que está depurando el código fuente de su sitio o simplemente tiene curiosidad acerca de cómo se ve el código de un sitio, puede ver la fuente HTML directamente en Google Chrome.

Si usted es un diseñador web que está depurando el código fuente de su sitio o simplemente tiene curiosidad acerca de cómo se ve el código de un sitio, puede 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 las Herramientas para desarrolladores.

Ver fuente usando Ver fuente de página

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

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

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 fuente usando herramientas de desarrollador

Este método utiliza el panel Herramientas de desarrollador en Chrome y es un enfoque mucho más limpio para ver el código fuente. El 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.

Haga clic en la pequeña flecha gris al lado de un elemento para expandirlo aún más.

Si no desea ver el código completo de la página de forma predeterminada, sino que inspecciona un elemento específico en el HTML, haga clic con el botón derecho en ese espacio de la página y 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.

Si desea cambiar la posición del muelle, puede moverlo hacia abajo, a la izquierda, a la derecha o incluso desacoplarlo en una ventana separada. Haga clic en el icono del 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.

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

Rate article
labsfabs.com
Add a comment