Cómo ver el código HTML en Chrome
Enlaces de dispositivos
¿Tienes curiosidad acerca de lo que constituye 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.
Visualización de 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.
Mientras que el Internet promedio Es posible que el usuario 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, los usuarios también pueden querer ver el código fuente para solucionar errores u obtener más información sobre cómo un funciona el sitio web o la aplicación web. 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 navegador popular 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 página Fuente
Este método es sencillo:
Abra Chrome y vaya 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 podrá desplazarse por él para ver el marcado HTML de esa página.
Uso de las herramientas para desarrolladores
Para inspeccionar el código fuente de una página web usando Developer Tools en Google Chrome, siga t los pasos a continuación.
Abre Google Chrome y navega a la página web que deseas 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 , haz clic derecho sobre él y selecciona”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 hacerlo en Chrome en una Mac. Simplemente siga 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 del código HTML para ver el estilo que tienen en la página. Por ejemplo, puede ver qué estilos CSS se aplican a un elemento seleccionándolo y luego haciendo clic en o 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.
Como alternativa, puede utilizar las herramientas para desarrolladores de Chrome para ver el código fuente.
Abra Google Chrome y vaya 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 de el menú desplegable.
El panel Herramientas de desarrollo se abrirá en la parte inferior de la pantalla. Seleccione los”Elementos”en la parte superior del panel.
Ahora consulte el código HTML de la página actual que se muestra en el panel Elementos. Puede utilizar las distintas opciones del 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 está tratando de solucionar problemas de desarrollo web o quiere ver 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á usando un iPhone, puede ver el código HTML de cualquier página en Chro de dos maneras:
Modificando 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 vaya 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.
Mover 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 las herramientas para desarrolladores
Las herramientas para desarrolladores de Chrome también están disponibles en iOS, pero se requiere un conjunto diferente de pasos para ejecutarlas en comparación con las PC.
Toca los tres puntos en la esquina superior derecha esquina 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 de 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:
Abra Chrome en su Android.
Escriba”view-source:”seguido de la URL de la página donde desea ver el código fuente. Por ejemplo, si desea ver el código fuente de www.google.com, debe escribir”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 de herramientas para desarrolladores integrada 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:
Abra Chrome y escriba”view-source:”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 debe escribir”view-source:www.alphr.com”en la barra de direcciones de Chrome.
Presione el botón”Ir”.
Esto debería cargar la página código fuente 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 el Pensilvania estructura básica y contenido de ge. 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 mientras visualiza el código HTML puede ser útil en algunos casos, los cambios hecho al código no se reflejará en la página web en vivo. 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? ¿Cómo te fue?
Háznoslo saber en la sección de comentarios.
Descargo de responsabilidad: algunas páginas de este sitio pueden incluir un enlace de afiliado. Esto no afecta nuestro editorial de ninguna manera.