¿Cómo ver el código fuente de un sitio web en Microsoft Edge? - Mundo2030

En Windows 11, Microsoft finalmente se deshace de su famoso e icónico navegador Internet Explorer. Solo tendrá Edge basado en el código base de Google Chromium. Entonces sentirá que el navegador Edge es similar a Google Chrome en muchos aspectos. Cuando desee analizar el código fuente de una página web, puede hacerlo fácilmente en Edge sin buscar Chrome o Firefox. En este artículo explicaremos cómo ver el código fuente del sitio web, como HTML, CSS y JavaScript en el navegador Microsoft Edge.

Código fuente del sitio web

Las páginas web generalmente están escritas en HTML y usan diferentes tipos de archivos, como CSS, JavaScript, imágenes, videos y más. Los navegadores como Edge procesan este HTML/CSS/JavaScript y muestran solo texto legible y contenido multimedia del lector. Sin embargo, en muchos casos, es posible que deba analizar el código fuente para obtener más detalles.

  • Es un desarrollador o bloguero y desea verificar el código fuente para solucionar problemas.
  • La página web que está navegando es atractiva y desea encontrar los colores y las fuentes utilizadas en la página.
  • Desea editar el código fuente en un navegador en vivo y probar los resultados sin cambiar el código original. Por ejemplo, desea aplicar un color diferente al título o verificar el tamaño de fuente.
  • Pruebe la respuesta móvil en la página o busque elementos cargados en la página.

En algunos casos, también puede encontrar temas y complementos utilizados en el sitio revisando el código fuente. Cualquiera que sea la razón, puede analizar el código fuente de dos maneras.

  • Al revisar el código fuente completo directamente
  • Use la opción Inspeccionar elemento con Microsoft Edge DevTools

Vamos a explicar estos dos métodos en detalle.

Ver código fuente completo

Suponga que desea encontrar archivos CSS y JS utilizados en una página. Puede hacer esto fácilmente mirando el código fuente completo. Abra la página Edge, haga clic con el botón derecho en cualquier espacio en blanco y seleccione Ver código fuente de la página en el menú contextual.

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

Esto abrirá una nueva página que muestra el código fuente completo de la página que está viendo, como se muestra a continuación.

código fuente de la página web
código fuente de la página web

Puede encontrar el código HTML para cada elemento relacionado con los archivos CSSySecciones, metaetiquetas, secuencias de comandos de enlaces antes de cerrar las etiquetas del cuerpo Si bien esto es útil en muchas situaciones, no encontrará detalles sobre qué estilos CSS se aplican a qué elementos HTML en la página. Por ejemplo, no puede encontrar la familia de fuentes de un elemento de título mirando el código fuente completo. Debe hacer clic en el enlace al archivo .css o .min.css y buscar el archivo para encontrar los estilos utilizados para el encabezado. Esta es una tarea difícil porque no sabe a qué etiqueta de título HTML de H1 a H6 pertenece el título. Además, es posible que no pueda aplicar clases de CSS personalizadas a las etiquetas de encabezado mirando solo el CSS.

Hoy en día, muchos sitios web combinan todos los archivos CSS para reducir la cantidad de solicitudes HTTP y mejorar el almacenamiento en caché. Entonces, cuando los archivos CSS de una página se combinan en un solo archivo, mirar el código fuente completo no ayudará. La solución es mirar el HTML y el CSS del elemento juntos para darle una imagen completa de ese elemento en particular.

Compruebe las opciones de elementos en Edge

Puede usar esta opción para analizar cada elemento de la página web para su HTML y CSS. Para usar esta función, inicie el navegador Edge y abra la página web que desea analizar. Debe tener Microsoft Edge DevTools (o Edge Developer Tools) abierto para comenzar a analizar los elementos de la página web. Hay varias formas de abrir Edge DevTools.

  • Simplemente haga clic derecho en cualquier espacio en blanco y seleccione "Comprobar" en el menú contextual.
  • Puede presionar F11 en Windows, que funciona en la mayoría de los modelos de computadoras de escritorio y portátiles. Alternativamente, presione "Control + Shift + I" para abrir la sección Herramientas para desarrolladores de Edge.
  • Presione "Alt + F" para abrir el menú y vaya a "Más herramientas> Herramientas de desarrollo".
Abra las herramientas de desarrollo desde la configuración de Edge
Abra las herramientas de desarrollo desde la configuración de Edge

De forma predeterminada, Edge abrirá la sección de herramientas para desarrolladores en la parte inferior del navegador, como se muestra a continuación.

Herramientas de desarrollo perimetral
Herramientas de desarrollo perimetral

Puede ajustar la altura arrastrando y haciendo clic en el icono de tres puntos horizontales en la barra de menú de la barra de herramientas del desarrollador para cambiar la posición superior/inferior o abrirlo en una nueva ventana.

Empleos en Dock Developer Tools
Empleos en Muelle Herramientas de desarrollo

Aunque DevTools tiene muchos elementos de menú, solo necesita algunos para analizar el código fuente del sitio web de Edge. Cuando abra DevTools por primera vez, habrá una pestaña de "Bienvenida" que simplemente puede cerrar.

Ver código fuente HTML y CSS

Como se mencionó anteriormente, cada elemento de una página web contiene código fuente HTML con estilos CSS. Para ver la fuente HTML y CSS, debe seleccionar el elemento.

  • El primer ícono en el menú DevTools es la herramienta de selección de elementos.
  • Haga clic en el icono y mantenga el cursor del mouse sobre el elemento para el que desea encontrar el código fuente HTML. Por ejemplo, busquemos los detalles titulados "Nuestros servicios de primera clase".
selecciona un artículo
selecciona un artículo

Cuando pasa el mouse sobre este encabezado, Edge le mostrará una ventana emergente flotante con la mayoría de los detalles necesarios. Puede encontrar que el título es h3, el tamaño de fuente es 26px, la familia de fuentes es Museo500Regular y el color es # 0875c9. También puede hacer clic en los elementos que se muestran en la pestaña Elementos y ver detalles de CSS similares en la sección Estilos del panel derecho. Con la herramienta Seleccionar elemento, puede obtener detalles completos del HTML y CSS de cada elemento.

En la sección Estilos, puede ver enlaces a archivos CSS para cada estilo. Puede hacer clic en el enlace al archivo para abrirlo en la sección Fuentes, que explicaremos en la siguiente sección.

Edición de contenido web en tiempo real

Ahora desea aplicar algunos cambios al encabezado y ver cómo se ve el sitio en vivo. Para hacer esto, debe ir al panel de administración del sitio web y actualizar el contenido de origen. Sin embargo, encontrará problemas como mostrar elementos de diferentes colores o tamaños de fuente. La forma más sencilla es editar el código fuente HTML en la sección Elementos o editar los estilos CSS en la sección Estilos.

Para editar HTML, primero seleccione un elemento en la pestaña Elementos y haga clic derecho sobre él. O puede hacer clic en el icono de tres puntos que aparece en el extremo izquierdo del elemento seleccionado. Simplemente puede eliminar u ocultar elementos seleccionando esta opción en el menú contextual. Si desea editar, seleccione la opción "Editar como HTML".

Editar como HTML
Editar como HTML

Esto abrirá un editor de texto donde puede cambiar las etiquetas HTML o agregar clases CSS adicionales al elemento. Cuando finalice la edición, haga clic en cada área en blanco en DevTools para salir de la edición. El editor confirmará y corregirá automáticamente las etiquetas. Por ejemplo, si cambia la etiqueta de inicio de

olvide cambiar el marcador de cierre y dejar

, volverá automáticamente al original

Etiqueta.

Cambiar etiquetas HTML
Cambiar etiquetas HTML

También puede cambiar los estilos CSS en la pestaña Estilos. Por ejemplo, aumente la fuente del título h3 a 40 px y cambie el color a # c94608.

Cambiar CSS en vivo
Cambiar CSS en vivo

Puede ver una vista previa instantánea de la página que le da una idea de cómo se verá su CSS y HTML modificados. Sin embargo, estos cambios son temporales y al actualizar o recargar la página se restaurará el contenido original. Puede realizar cambios en el backend para aplicarlos permanentemente a la página web.

Solucionar errores de la página web

Uno de los objetivos principales de DevTools es detectar problemas del navegador que impiden que las páginas se muestren correctamente. Como puede ver en la captura de pantalla anterior, Edge muestra dos números (34 y 33) en la barra de menú de DevTools.

  • El icono del primer número muestra los errores y advertencias en la consola del navegador, que puede ver en la sección Consola.
  • El segundo número mostrará los problemas abiertos (si los hay) en una ventana separada en DevTools, que puede cerrar de forma independiente.
Ver advertencias y errores
Ver advertencias y errores

Los errores, las advertencias y las sugerencias se resaltan para ayudarlo a comprender el problema. Haga clic en cada elemento para obtener más detalles sobre el problema y los recursos afectados en la página. Debe cambiar el código y volver a probar para ver si se ha corregido el error.

Ver detalles del error
Ver detalles del error

Ver archivos de origen de forma independiente

La sección Fuentes en Edge DevTools es similar a la descripción general completa del código fuente. Sin embargo, muestra los recursos cargados de cada parte del dominio y de dominios externos por separado en una estructura. Puede seleccionar cualquier archivo y ver el contenido en DevTools.

ver la fuente
ver la fuente

Cuando selecciona un archivo minimizado, Edge le pregunta "¿Imprimir bien esta miniatura?". Minimizar eliminará todos los espacios y los nuevos líneas en el archivo y lo hará ilegible para el usuario. Puede usar una hermosa impresión para convertir el archivo minimizado al modo de lectura con nuevas líneas y espacios. Puede hacer clic en el botón Impresión suficiente o {} que se muestra en la barra de estado.

Muchas vistas de impresión en Edge
Muchas vistas de impresión en Edge

La web, el rendimiento y todos los demás elementos son útiles para el análisis avanzado del tiempo de carga de la página, la comprobación de encabezados HTTP, los problemas de seguridad y las pruebas de rendimiento de SEO. Una vez que se completa el análisis, puede cerrar DevTools.

ultimas palabras

La última versión de Edge Chromium es más potente que cualquier otro navegador. Puede usar Microsoft Edge DevTools para ver el código fuente de una página web de solución de problemas y diseño. También puede obtener el código fuente completo para ver los archivos utilizados en la página.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir
error: Content is protected !!