Categorías: Google

Cómo ver la fuente HTML en Google Chrome

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 con 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 el código fuente de la página en una nueva pestaña.

Se abre una nueva pestaña junto con todo el HTML de la página web, completamente expandida 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 con 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.

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

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».

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 la parte inferior, izquierda, derecha o incluso desacoplarlo en una ventana separada. Haga clic en el ícono 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 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.

responroot

Compartir
Publicado por
responroot
Etiquetas: google

Entradas recientes

Steamlytics: La nueva herramienta imprescindible para los gamers de Steam

  El mundo del gaming ha experimentado un crecimiento exponencial en los últimos años. La…

1 año hace

Cuándo reemplazar su antigua unidad flash USB

Stokkete/Shutterstock.com ¿Sigue utilizando una unidad flash USB obsoleta para almacenar sus archivos? ¿Por qué no…

3 años hace

¿Qué es una pantalla Nano IPS?

LG Los fabricantes siempre intentan mejorar el rendimiento de imagen de los monitores. Como resultado,…

3 años hace

10 formas de jugar con un presupuesto bajo (o nulo)

Patty Chan/Shutterstock.com Si cree en lo que ve en las redes sociales, puede pensar en…

3 años hace

¿Demasiadas suscripciones? Aquí está cómo empezar a cortarlos

Seksan.TH/Shutterstock.com Los servicios de suscripción como Netflix, Game Pass y Spotify nos permiten consumir tantas…

3 años hace

Cómo configurar la puerta de enlace predeterminada en Linux

fatmawati achmad zaenuri/Shutterstock El acceso a Internet, oa cualquier otra red, se rige por la…

3 años hace