Home-theater-designers
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 lagunas en 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 el Ctrl + Mayús + I teclas en su teclado.
Alternativamente, puede acceder a las herramientas para desarrolladores de Chrome haciendo clic en los tres puntos en la esquina superior derecha de la pantalla. Dirigirse a Más herramientas y seleccione Herramientas de desarrollo . Otra opción es hacer clic derecho en la página web y hacer clic en el Inspeccionar opción.
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 Inspeccionar modo. A continuación, haga clic en el Sensible desplegable 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ó.
cómo obtener un fondo de pantalla de video
Acceder a los archivos fuente 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 el 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 el Buscar opción justo encima de la consola.
Sin embargo, si no puede encontrar el Buscar opción, una mejor alternativa es utilizar atajos de teclado. En Mac OS, presione el Cmd + Opt + F claves para buscar un archivo fuente. Si está utilizando el sistema operativo Windows, presione el Ctrl + Mayús + 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 propósitos principales de utilizar DevTools es realizar una edición falsa instantánea de los elementos en 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 el Elementos opción. Luego, haga clic derecho en cualquier punto al que desee aplicar cambios dentro del editor de código y seleccione Editar como HTML .
Para editar propiedades 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 DevTools Console
Una de las mejores formas de depurar JavaScript es utilizando las herramientas de desarrollo de Chrome. Le brinda 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 console.log () El comando 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 el Consola en la parte superior de la ventana de Chrome DevTools.
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 404 error después de ejecutar una consulta de base de datos de esos elementos.
Relacionado: Errores comunes del sitio web y su significado
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 de la Lado del muelle opción.
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 Chrome Extensiones destacadas de DevTools galería.
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 el Seguridad en la parte superior de DevTools.
los Seguridad La pestaña 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 el Faro en la parte superior de la ventana DevTools. A continuación, seleccione los parámetros que desea verificar, luego marque el Móvil o Escritorio opciones para ver el rendimiento de 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 el Rendimiento opción. Para ejecutar una prueba, haga clic en el icono junto al Haga clic en el botón de grabación opció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 Parada 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.
como mostrar una cancion on spotify
También puede descubrir algunas otras opciones que no discutimos en este artículo. Por lo tanto, siéntase libre de jugar con las funciones disponibles. Además, modificar estas funciones no daña un sitio web en lo más mínimo.
Cuota Cuota Pío Correo electrónico Cómo usar Chrome OS en una Raspberry Pi¿No puedes pagar una Chromebook? ¿Está buscando una alternativa a Raspbian? A continuación, le mostramos cómo instalar una versión de Chrome OS en su Raspberry Pi.
Leer siguiente Temas relacionados- Internet
- Programación
- HTML
- Desarrollo web
- JavaScript
- Google Chrome
Idowu es un apasionado de la tecnología inteligente y la productividad. En su tiempo libre, juega con la codificación y cambia al tablero de ajedrez cuando está aburrido, pero también le encanta romper con la rutina de vez en cuando. Su pasión por mostrarle a la gente el camino en torno a la tecnología moderna lo motiva a escribir más.
Más de Idowu OmisolaSuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse