Cómo ver el código HTML en Chrome

Enlaces de dispositivos

• Androide
• iPhone
• Chromebook
• Mac
• ventanas
• ¿Falta el dispositivo?

¿Tienes curiosidad por saber qué constituye una página web? ¿Quiere saber cómo cambiar el tamaño o el color de la fuente en su sitio web? Al ver el código HTML de una página web, puedes 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 que se utilizan 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 utilizar 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, existen 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 utilizan. Para los diseñadores, puede resultar beneficioso ver cómo otros diseñadores han utilizado HTML para crear diseños eficaces.

En algunos casos, es posible que los usuarios también quieran 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 sea el motivo, 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 de código abierto Chromium, del que Microsoft es un importante contribuyente. 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.

Usando Ver código fuente de página

Este método es sencillo:

1. Abra Chrome y navegue hasta la página donde desea ver el código fuente HTML.
   
2. 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 podrá 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 utilizando las herramientas para desarrolladores en Google Chrome, siga los pasos a continuación.

1. Abra Google Chrome y navegue hasta la página web que desea inspeccionar.
   
2. 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ás viendo.
   
3. 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.
   
4. Ahora puede revisar el código fuente de la página. Para contraer un elemento, haga clic en el triángulo al lado de 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 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 de hacer en Chrome en una Mac. Simplemente siga estos pasos:

1. Abra Chrome y navegue hasta la página web donde desea ver el código HTML.
   
2. Haga clic derecho en la página y seleccione “Inspeccionar”.
   
3. Se abrirá un nuevo panel en la parte inferior de la pantalla que muestra el código HTML.
   
4. También puede hacer clic en elementos específicos del 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.
   
5. Para cerrar el panel, haga clic en la “X” en la esquina superior derecha.
   

Alternativamente, puede utilizar Chrome Developer Tools para ver el código fuente.

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

Con solo unos pocos clics, puedes ver fácilmente el código HTML de cualquier página web en Chrome en una Mac. Esto puede resultar útil cuando intenta solucionar problemas de desarrollo web o 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 estás usando un iPhone, puedes ver el código HTML de cualquier página en Chrome de dos maneras:

Modificando la URL

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

1. Abra Chrome y navegue hasta la página web cuyo código HTML desea ver.
   
2. Toque una vez en la barra de direcciones para iniciar el modo de edición.
   
3. Mueva el cursor al frente de la URL.
   
4. 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 de pasos diferente para iniciarlas en comparación con las PC.

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

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

Cuando utilice 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 resultar útil si está intentando 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:

1. Abre Chrome en tu Android.
   
2. Escriba “ver-fuente:” seguido de la URL de la página donde desea ver el código fuente. Por ejemplo, si quisieras ver el código fuente de www.google.com, escribirías “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 siga estos pasos:

1. 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.
   
2. Pulsa 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 este motivo, es importante tener un buen conocimiento 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 resultar útil en algunos casos, los cambios realizados en el código no se reflejarán en la página web en vivo. Sólo los cambios publicados por el administrador del sitio serán visibles para los visitantes.

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