Cómo utilizar Chrome DevTools para solucionar problemas de sitios web
Chrome DevTools es un activo esencial para los desarrolladores. Mientras que otros navegadores ofrecen herramientas de resolución de problemas bastante útiles, Chrome DevTools merece su atención debido a su interfaz multifuncional y su popularidad.
Chrome es el navegador más popular para los desarrolladores debido a su potente conjunto de herramientas de depuración. Usar Chrome DevTools es fácil, pero debe comprender cómo funciona para aprovecharlo al máximo.
Cómo funcionan las herramientas para desarrolladores de Chrome
Chrome DevTools le permite resolver problemas en un sitio web a través de su consola de errores y otras herramientas de depuración y monitoreo. El uso de DevTools expone las lagunas de la interfaz y le permite controlar cómo aparece su sitio web en dispositivos móviles y tabletas.
Con DevTools, puede realizar ediciones en tiempo real en el código de un sitio web, como JavaScript, HTML y CSS, y obtener resultados instantáneos de sus cambios.
Los cambios que realiza a través de DevTools no afectan el sitio web de forma permanente. Solo muestran temporalmente el resultado esperado como si los hubiera aplicado al código fuente real. Esto le permite encontrar formas de hacer que su sitio web se cargue mucho más rápido y facilita la eliminación de errores.
Cómo acceder a Chrome DevTools
Puede acceder a Chrome DevTools de varias formas. Para abrir las herramientas de desarrollador con el método de acceso directo en Mac OS, presione Cmd + Opt + I. Si está utilizando el sistema operativo Windows, presione las teclas Ctrl + Shift + I en su teclado.
Alternativamente, puede acceder a las herramientas de desarrollo de Chrome haciendo clic en los tres puntos en la esquina superior derecha de la pantalla. Dirígete a Más herramientas y selecciona Herramientas para desarrolladores . Otra opción es hacer clic derecho en la página web y hacer clic en la opción Inspeccionar .
Uso de las herramientas de desarrollo de Chrome para el diagnóstico de sitios web
Chrome DevTools ofrece varias formas de modificar y solucionar problemas de una página web. Echemos un vistazo a algunas de las formas en que DevTools puede ayudarlo.
Vea cómo se ve su sitio web en un teléfono inteligente
Una vez que cambia su navegador Chrome al modo de desarrollador, muestra una versión de tamaño medio de su página web. Sin embargo, esto no le dará una visión real de cómo se vería en un teléfono inteligente o tableta.
Afortunadamente, además de configurar el tamaño de pantalla de una página web, Chrome DevTools también te permite cambiar entre diferentes tipos y versiones de pantallas móviles.
Para acceder a esa opción, active el modo Inspeccionar . A continuación, haga clic en el menú desplegable Responsive en la esquina superior izquierda de DevTools y seleccione su dispositivo móvil preferido. Luego, la página web se procesa y se ajusta para adaptarse al tamaño del dispositivo móvil que seleccionó.
Acceder a los archivos de origen de una página web
Puede acceder a los archivos que componen una página web a través de Chrome DevTools. Para acceder a estos archivos, haga clic en la opción Fuentes en la parte superior del menú DevTools. Esto expone el sistema de archivos del sitio web y también le brinda edición.
También puede buscar archivos de origen, lo que puede resultar útil cuando se trata de una página web que tiene muchos recursos. Para buscar un archivo fuente a través de DevTools, haga clic en la opción Buscar justo encima de la consola.
Sin embargo, si no puede encontrar la opción de búsqueda , una mejor alternativa es usar atajos de teclado. En Mac OS, presione las teclas Cmd + Opt + F para buscar un archivo de origen. Si está utilizando el sistema operativo Windows, presione Ctrl + Shift + F para acceder a la barra de búsqueda del archivo de origen.
Realizar ediciones en vivo en una página web
Uno de los principales propósitos de utilizar DevTools es realizar una edición falsa instantánea de los elementos de una página web . Una vez que cambie a las herramientas de desarrollo, puede editar el contenido HTML de un sitio web haciendo clic en la opción Elementos . Luego, haga clic con el botón derecho en cualquier punto al que desee aplicar los cambios dentro del editor de código y seleccione Editar como HTML .
Para editar las propiedades de CSS que no están en línea, seleccione Fuentes . A continuación, seleccione el archivo CSS que desea editar. Coloque el cursor en la línea de su elección dentro de la consola de código para realizar una edición en vivo. Hacer esto le brinda retroalimentación instantánea sobre cualquier cambio de estilo que aplique a la página web.
Tenga en cuenta que cuando edita una página a través de DevTools, volver a cargar la página en su navegador la revierte a su forma original, y la edición solo es visible para usted. La edición a través de DevTools no afecta el buen funcionamiento ni el uso de ese sitio web para otros usuarios.
Depurar código JavaScript con la consola DevTools
Una de las mejores formas de depurar JavaScript es utilizando las herramientas de desarrollo de Chrome. Le proporciona un informe directo de los scripts no válidos, así como la ubicación exacta del error.
Es una buena práctica mantener siempre abierto DevTools al diseñar un sitio web con JavaScript. Por ejemplo, ejecutar el comando console.log () de JavaScript en un conjunto de instrucciones muestra el resultado de ese registro en la consola de DevTools si el programa se ejecuta correctamente.
De forma predeterminada, la consola informa cualquier problema de JavaScript en su sitio web. Puede encontrar la consola en la parte inferior de DevTools o acceder a ella haciendo clic en la opción Consola en la parte superior de la ventana de DevTools de Chrome.
Supervisar la carga de recursos desde una base de datos
Además de depurar JavaScript, la consola también puede brindarle un detalle de los recursos que no se cargan correctamente desde la base de datos del sitio web.
Si bien esta no siempre es la mejor manera de depurar problemas de backend, aún le indica qué recursos están devolviendo un error 404 después de ejecutar una consulta de base de datos de esos elementos.
Cambiar la orientación de las herramientas para desarrolladores de Chrome
Para cambiar la posición de las herramientas de desarrollo de Chrome, haga clic en los tres puntos del menú dentro de DevTools (no en el principal del navegador). Luego, seleccione su posición preferida en la opción del lado del muelle .
Instalar extensiones de Chrome DevTools
También puede instalar extensiones específicas del lenguaje o del marco que funcionan con Chrome DevTools. La instalación de estas extensiones le permite depurar su página web de manera más eficiente.
Puede acceder a una lista de extensiones disponibles para Chrome DevTools en la galería de extensiones destacadas de DevTools de Chrome.
Verificar problemas de seguridad en un sitio web
Chrome DevTools le permite evaluar qué tan seguro es su sitio web, en función de parámetros como la disponibilidad de certificados de seguridad web y qué tan segura es la conexión, entre otros. Para comprobar si su sitio web es seguro, haga clic en la opción Seguridad en la parte superior de DevTools.
La pestaña Seguridad le brinda una descripción general de los detalles de seguridad de su sitio web y le informa sobre las amenazas potenciales.
Audite su sitio web
Chrome DevTools tiene una función que le permite verificar el rendimiento general de su sitio web en función de parámetros específicos.
Para acceder a esa función, seleccione la opción Lighthouse en la parte superior de la ventana DevTools. A continuación, seleccione los parámetros que desea verificar, luego marque las opciones Móvil o Escritorio para ver cómo funciona su página web en diferentes plataformas.
A continuación, haga clic en Generar informe para ejecutar un análisis de su página web en función de los parámetros que seleccionó anteriormente.
También puede evaluar el tiempo de ejecución o el rendimiento de carga de un sitio web haciendo clic en la opción Rendimiento . Para ejecutar una prueba, haga clic en el icono junto a la opción Haga clic en el botón de grabación para realizar un análisis en tiempo de ejecución. Alternativamente, haga clic en el botón de recarga debajo de él para evaluar el rendimiento del tiempo de carga. Haga clic en Detener para detener el analizador y mostrar los resultados.
Aproveche las DevTools de Chrome
Dependiendo de para qué lo necesite, Chrome DevTools le permite hacer más que una simple depuración de sitios web. Afortunadamente, DevTools es fácil de usar para programadores de todos los niveles. Incluso puede aprender algunos conceptos básicos del desarrollo de frontend de sitios web buscando el código fuente de los sitios web que visita.
También puede descubrir otras opciones que no discutimos en este artículo. Entonces, siéntete libre de jugar con las funciones disponibles. Además, modificar estas funciones no daña un sitio web en lo más mínimo.