Cómo abrir las herramientas de desarrollador de Google Chrome?
Google Chrome Developer Tools es una gran característica de Google Chrome para desarrolladores web. Es un conjunto de herramientas directamente incorporadas para Google Chrome para ayudar a los desarrolladores a hacer cambios en la página web y diagnosticar problemas con sus sitios web sobre la mosca. Ayuda a los desarrolladores web a construir y optimizar los sitios web más rápido.
En este artículo, le mostraré cómo abrir las herramientas de desarrollador de Google Chrome en Google Chrome y algunas de las características que ofrece.
Tabla de contenido:
- Abrir herramientas de desarrollador de Google Chrome
- Metina en las herramientas de desarrollador de Google Chrome en diferentes ubicaciones
- Algunas de las características de las herramientas de desarrollador de Google Chrome
- Cierre de herramientas de desarrollador en Google Chrome
- Conclusión
- Referencias
Abrir herramientas de desarrollador de Google Chrome
Una forma de abrir las herramientas de desarrollador de Google Chrome es de Google Chrome.
Primero, abra Google Chrome y haga clic en > Más herramientas> Herramientas para desarrolladores Desde la esquina superior derecha de Google Chrome.
Las herramientas de desarrollador de Google Chrome deben mostrarse.
También puede visitar un sitio web de Google Chrome e inspeccionar un elemento del sitio web para abrir las herramientas de desarrollador.
Para inspeccionar un elemento desde una página web, haga clic con el botón derecho (RMB) y haga clic en Inspeccionar.
También puedes presionar + + C Para inspeccionar un elemento desde una página web y abrir las herramientas de desarrollador de Google Chrome.
Las herramientas de desarrollador de Google Chrome deben abrirse.
De la misma manera, puede abrir la consola de las herramientas de desarrollador de Google Chrome presionando + + J.
Metina en las herramientas de desarrollador de Google Chrome en diferentes ubicaciones
Si no tiene un monitor lo suficientemente grande, es posible que no desee que las herramientas de desarrollador de Google Chrome se acoplen en el lado derecho de Google Chrome.
Haga clic en y seleccione una posición de acoplamiento de la Lado del muelle Sección para cambiar la posición de acoplamiento de Google Chrome.
Desactivar las herramientas de desarrollador de Google Chrome en una ventana separada.
Dock Dock Google Chrome Developer Herramientas a la izquierda.
Dock Dock Google Chrome Developer Herramientas al fondo.
Dock Dock Google Chrome Developer Herramientas a la derecha.
Algunas de las características de las herramientas de desarrollador de Google Chrome
Google Chrome Developer Tools tiene algunas pestañas y puede hacer cosas específicas de cada una de las pestañas.
Desde el Elementos Tab, puede inspeccionar diferentes elementos de la página web; Verifique los estilos CSS y el tamaño calculado de los elementos; Haga cambios instantáneos en el HTML DOM y CSS de la página web y vea los resultados; y muchos más.
Desde el Consola Tab, puede ver mensajes de registro y ejecutar códigos JavaScript.
Desde el Fuentes Tab, puede depurar códigos JavaScript, guardar y ejecutar fragmentos de código JavaScript, persistir los cambios realizados en las herramientas de desarrollador de Google Chrome en las recargas de página y guardar los cambios que ha realizado utilizando las herramientas de desarrollador de Google Chrome en el disco.
Desde el Red pestaña, puede monitorear la actividad de la red, los archivos solicitados por la página web y el tiempo que lleva cargarse, y depurar la actividad de red de la página web.
Desde el Actuación pestaña, puede registrar el tiempo de carga de la página y el rendimiento del sitio web. También puedes encontrar formas de mejorarlos.
Desde el Memoria pestaña, puede monitorear el uso de la memoria de su sitio web y solucionar problemas de memoria inusuales.
Desde el Solicitud Tab, puede inspeccionar todos los recursos cargados de su sitio web, como:
- Indexeddb
- Bases de datos SQL web
- Almacenamiento local
- Almacenamiento de sesión
- Galletas
- Caché de la aplicación
- Imágenes
- Fuentes
- Hojas de estilo
Desde el Seguridad Tab, puede depurar problemas de certificación, problemas de contenido mixto y muchos otros problemas de seguridad del sitio web.
Desde el Faro pestaña, puede generar un informe de faro.
Desde el Grabadora pestaña, puede medir el rendimiento en todo el flujo de usuario del sitio web.
Desde el Insight de rendimiento Tab, puede obtener información de rendimiento procesable en su sitio web.
Puede ver cómo se ve su sitio web a través de dispositivos de diferentes tamaños de pantalla utilizando el Modo de dispositivo de las herramientas de desarrollador de Google Chrome.
Cambiar a Modo de dispositivo, Haga clic en el botón Toggle.
Su sitio web debe mostrarse en diferentes tamaños de pantalla en modo de dispositivo. Puede cambiar el tamaño de la pantalla y ver cómo se verá el sitio web en los dispositivos con ese tamaño de pantalla.
Cierre de herramientas de desarrollador en Google Chrome
Para cerrar las herramientas de desarrollador de Google Chrome, haga clic en X.
Las herramientas de desarrollador de Google Chrome deben estar cerradas.
Conclusión
Le he mostrado cómo abrir las herramientas de desarrollador de Google Chrome y discutí algunas de las características de las herramientas de desarrollador de Google Chrome. Para obtener más información sobre las herramientas de desarrollador de Google Chrome y cada una de sus características, consulte los enlaces en la sección de referencias a continuación.
Referencias:
- Descripción general - Desarrolladores de Chrome
- Registrar, reproducir y medir flujos de usuarios: desarrolladores de Chrome
- Insights de rendimiento: Obtenga información procesable en el rendimiento de su sitio web: desarrolladores de Chrome