Cómo ver el código HTML en Chrome

¿Tienes curiosidad acerca de lo que compone una página web? ¿Quiere saber cómo cambiar el tamaño de fuente o el color en su sitio web? Al ver el código HTML de una página web, puede hacer todas estas cosas y más.

En este tutorial, le mostraremos cómo ver el código HTML de una página web en Chrome.

Ver código HTML en Chrome

Al escribir en HTML, el código fuente es la serie de etiquetas y atributos utilizados para definir la estructura y el contenido de una página web.

Los navegadores web leen el código fuente y lo traducen a la página web gráfica que ve en pantalla. Además de definir la apariencia de una página web, el código fuente también se puede usar para agregar interactividad, como ventanas emergentes, formularios y menús desplegables.

Si bien es posible que el usuario promedio de Internet nunca necesite ver el código fuente HTML de una página web, hay varias razones por las que algunos podrían querer hacerlo.

Para los desarrolladores, ver el código fuente puede ser una forma útil de comprender cómo está estructurada una página y determinar qué elementos de estilo y secuencias de comandos se están utilizando. Para los diseñadores, puede ser beneficioso ver cómo otros diseñadores han usado HTML para crear diseños efectivos.

En algunos casos, es posible que los usuarios también deseen ver el código fuente para solucionar errores u obtener más información sobre cómo funciona un sitio web o una aplicación web en particular. Cualquiera que sea la razón, ver el código fuente HTML es un proceso relativamente simple en Chrome.

Cómo ver el código HTML de una página web en Chrome en una PC con Windows

El sistema operativo Windows es uno de los sistemas más compatibles de Chrome. Chrome se basa en el proyecto Chromium de código abierto, en el que Microsoft es uno de los principales contribuyentes. Esta compatibilidad se extiende al ámbito HTML, donde el popular navegador permite a los usuarios ver el código HTML de cualquier sitio web.

Puede ver el código HTML de dos maneras.

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

Este método es sencillo:

Abra Chrome y navegue a la página donde desea ver el código fuente HTML.
Haga clic derecho en la página y seleccione Ver código fuente de la página, o presione Ctrl + U en su teclado para abrir el código fuente en una nueva pestaña.

El código fuente aparecerá en la nueva pestaña, y puede desplazarse por él para ver el marcado HTML de esa página.

Uso de herramientas de desarrollo

Para inspeccionar el código fuente de una página web usando las herramientas para desarrolladores en Google Chrome, siga los pasos a continuación.

Abra Google Chrome y navegue a la página web que desea inspeccionar.
Presione Ctrl + Shift + I en su teclado. El panel Herramientas para desarrolladores se abrirá en un panel junto a la página web que está viendo.
Haga clic en la pestaña “Elementos” en la parte superior del panel. Esto mostrará el código fuente HTML de la página web.
Ahora puede revisar el código fuente de la página. Para contraer un elemento, haga clic en el triángulo junto a su nombre de etiqueta. Para ver más información sobre un componente, haga clic derecho sobre él y seleccione “Inspeccionar”.

Tenga en cuenta que este método es mejor para páginas HTML; es posible ver el código fuente de otros tipos de páginas web, pero el formato puede ser más difícil de leer.

Cómo ver el código HTML de una página web en Chrome en una Mac

Si es un desarrollador web, es importante poder ver el código HTML de una página web. Esto le permite ver cómo está estructurada la página y solucionar cualquier problema que pueda surgir. Afortunadamente, es fácil hacerlo en Chrome en una Mac. Simplemente sigue estos pasos:

Abra Chrome y navegue a la página web donde desea ver el código HTML.
Haga clic derecho en la página y seleccione “Inspeccionar”.
Se abrirá un nuevo panel en la parte inferior de la pantalla que muestra el código HTML.
También puede hacer clic en elementos específicos en el código HTML para ver cómo se diseñan en la página. Por ejemplo, puede ver qué estilos CSS se están aplicando a un elemento seleccionándolo y luego haciendo clic en la pestaña “Estilos” en el panel que se abre.
Para cerrar el panel, haga clic en la “X” en la esquina superior derecha.

Alternativamente, puede usar las herramientas para desarrolladores de Chrome para ver el código fuente.

Abra Google Chrome y navegue a la página web que desea inspeccionar.
Haga clic en el ícono de menú (tres puntos) en la esquina superior derecha del navegador y seleccione Más herramientas y Herramientas para desarrolladores en el menú desplegable.
El panel Herramientas para desarrolladores se abrirá en la parte inferior de la pantalla. Seleccione los “Elementos” en la parte superior del panel.
Ahora verá el código HTML de la página actual que se muestra en el panel Elementos. Puede usar las diferentes opciones en el panel para inspeccionar y depurar el código según sea necesario.

Con solo unos pocos clics, puede ver fácilmente el código HTML de cualquier página web en Chrome en una Mac. Esto puede ser útil cuando intenta solucionar problemas de desarrollo web o si desea observar más de cerca cómo se construye un sitio web en particular.

Cómo ver el código HTML de una página web en Chrome en la aplicación para iPhone

Si usa un iPhone, puede ver el código HTML de cualquier página en Chrome de dos maneras:

Ajustando la URL

Puede ver fácilmente el código HTML de cualquier página haciendo un pequeño ajuste en la URL:

Abra Chrome y navegue a la página web cuyo código HTML desea ver.
Toque una vez en la barra de direcciones para iniciar el modo de edición.
Mueva el cursor al frente de la URL.
Escriba “Ver fuente” y luego presione el botón “Ir”. El código HTML de la página web se mostrará en Chrome.

Uso de herramientas de desarrollo

Las herramientas para desarrolladores de Chrome también están disponibles en iOS, pero se requiere un conjunto diferente de pasos para iniciarlo en comparación con las PC.

Toque los tres puntos en la esquina superior derecha de la pantalla y seleccione “Configuración”.
Desplácese hacia abajo y toque “Avanzado”, luego habilite el interruptor junto a “Herramientas de desarrollador”.
Toque y mantenga presionada un área vacía de la página, luego seleccione “Inspeccionar elemento”. Esto abrirá un panel lateral con el código HTML para esa página.

Cómo ver el código HTML de una página web en Chrome en la aplicación de Android

Al usar la aplicación Chrome en su teléfono Android, es posible que desee ver el código HTML de una página web. Esto puede ser útil si está tratando de solucionar un problema con la página o desea ver cómo está estructurada la página. Para ver el código HTML de una página web en Chrome en su teléfono Android, siga estos pasos:

Abre Chrome en tu Android.
Escriba “ver-fuente:” seguido de la URL de la página que desea ver donde desea ver el código fuente. Por ejemplo, si quisiera ver el código fuente de www.google.com, escribiría “view-source:www.google.com” en la barra de direcciones de Chrome.

Esto abrirá el código HTML para esa página en la interfaz integrada de herramientas para desarrolladores de Chrome. Desde allí, puede ver y editar el código como desee. Tenga en cuenta que este método solo funcionará si el sitio web que intenta ver permite el acceso a su código fuente. Si no es así, no podrá ver nada más que un mensaje de error.

Cómo ver el código HTML de una página web en Chrome en un iPad

Chrome en la aplicación para iPad facilita la visualización del código HTML de cualquier página web. Simplemente sigue estos pasos:

Abra Chrome y escriba “ver fuente:” seguido de la URL de la página que desea ver. Por ejemplo, si desea ver el código fuente de www.alphr.com, debe escribir “view-source:www.alphr.com” en la barra de direcciones de Chrome.
Presiona el botón “Ir”.

Esto debería cargar el código fuente de la página en una nueva pestaña dentro de Chrome. Desde allí, puede guardar o compartir el código según sea necesario.

El código fuente es el pegamento que mantiene unidas las páginas

HTML es la base de cualquier sitio web. Proporciona la estructura y el contenido que los visitantes ven cuando cargan una página en su navegador.

Si bien la apariencia final de una página puede estar determinada por CSS u otros lenguajes de estilo, el código HTML determina la estructura y el contenido básicos de la página. Algunos cambios pueden potencialmente romper la página. Por esta razón, es importante tener una buena comprensión de HTML al visualizar o realizar cambios en el código fuente.

Además, tenga en cuenta que si bien ver el código HTML puede ser útil en algunos casos, los cambios realizados en el código no se reflejarán en la página web activa. Solo los cambios publicados por el administrador del sitio serán visibles para los visitantes.

¿Ha intentado ver el código HTML de cualquier página web usando alguno de los métodos discutidos en este tutorial? ¿Como le fue?

Infórmenos en la sección para comentarios.