Chrome DevTools es un conjunto de herramientas para desarrolladores web integradas directamente en el navegador GoogleChrome. DevTools puede ayudarte a editar páginas sobre la marcha y a diagnosticar problemas rápidamente, lo que, en última instancia, te ayuda a crear mejores sitios web, más rápido.
Mira el vídeo para ver demostraciones en directo de los principales flujos de trabajo de DevTools, como la depuración de CSS, la creación de prototipos de CSS, la depuración de JavaScript y el análisis del rendimiento de carga.
Abrir DevTools
Hay muchas maneras de abrir DevTools, porque diferentes usuarios quieren acceder rápidamente a diferentes partes de la interfaz de usuario de DevTools.
- Cuando quiera trabajar con el DOM o el CSS, haga clic con el botón derecho en un elemento de la página y seleccione Inspeccionar para saltar al panel Elementos. O pulse Comando+Opción+C (Mac) oControl+Mayúsculas+C (Windows, Linux, Chrome OS).
- Cuando quiera ver los mensajes registrados o ejecutar JavaScript, pulse Comando+Opción+J(Mac) o Control+Mayúsculas+J (Windows, Linux, Chrome OS) para saltar directamente al panel de la Consola.
- Ver y cambiar el DOM
- Ver y cambiar los estilos de una página (CSS)
- Depurar JavaScript
- Ver mensajes y ejecutar JavaScript en la Consola
- Optimizar la velocidad del sitio web
- Inspeccionar la actividad de la red
- Modo Dispositivo
- Prueba los Viewports Responsive y específicos de cada dispositivo
- Emula Sensores: Geolocalización & Acelerómetro
- Comienza a ver y cambiar el DOM
- Comienza a ver y cambiar el CSS
- Inspecciona y ajusta tus páginas
- Edita los estilos
- Edita el DOM
- Inspeccionar animaciones
- Encontrar CSS no utilizado
- Iniciar con la consola
- Usar la consola
- Interactuar desde la línea de comandos
- Propia API de la consola. Referencia
- Inicie con la depuración de JavaScript
- Pause su código con puntos de interrupción
- Guarde los cambios en el disco con espacios de trabajo
- Ejecute fragmentos de código desde cualquier página
- Referencia de depuración de JavaScript
- Persiste los cambios a través de las recargas de la página con anulaciones locales
- Encuentra el JavaScript no utilizado
- Inicio
- Guía de problemas de red
- Referencia del panel de red
- Optimice la velocidad del sitio web
- Comience a analizar el rendimiento en tiempo de ejecución
- Referencia de análisis de rendimiento
- Analice el rendimiento en tiempo de ejecución
- Diagnostique las disposiciones sincrónicas forzadas
- Corregir problemas de memoria
- Perfil de CPU de JavaScript
- Depurar aplicaciones web progresivas
- Inspeccionar y gestionar el almacenamiento, las bases de datos, y cachés
- Inspeccione y elimine cookies
- Inspeccione recursos
- Entérate de los problemas de seguridad
Vea Open Chrome DevTools para más detalles y flujos de trabajo.
Comienza
Si eres un desarrollador web más experimentado, estos son los puntos de partida recomendados para aprender cómoDevTools puede mejorar tu productividad:
Descubrir DevTools
La interfaz de usuario de DevTools puede ser un poco abrumadora… ¡hay tantas pestañas! Pero, si te tomas un tiempo para familiarizarte con cada pestaña para entender lo que es posible, puedes descubrir que DevTools puede aumentar seriamente tu productividad.
Modo Dispositivo
Simula dispositivos móviles.
Panel de elementos
Ver y cambiar el DOM y el CSS.
.
Panel de la consola
Ver mensajes y ejecutar JavaScript desde la consola.
Panel de fuentes
Depurar JavaScript, persistir los cambios realizados en DevTools a través de las recargas de la página,guardar y ejecutar fragmentos de JavaScript, y guardar los cambios que realice en DevTools en el disco.
Panel de red
Ver y depurar la actividad de la red.
Panel de rendimiento
Encuentra formas de mejorar la carga y el rendimiento en tiempo de ejecución.
.
Panel de memoria
Perfilice el uso de la memoria y rastree las fugas.
Panel de aplicación
Inspecciona todos los recursos que se cargan, incluyendo las bases de datos IndexedDB o Web SQL, el almacenamiento local y de sesión, las cookies, la caché de aplicaciones, las imágenes, las fuentes y las hojas de estilo.
Panel de seguridad
Depure problemas de contenido mixto, problemas de certificados y mucho más.
Comunidad
Coloca informes de errores y peticiones de características en Crbug, que es el rastreador de errores del equipo de ingeniería.
Crbug
Si quieres alertarnos de un fallo o petición de característica pero no tienes mucho tiempo, te invitamos a enviar un tweet a @ChromeDevTools. Respondemos y enviamos avisos desde la cuenta regularmente.
Para obtener ayuda sobre el uso de DevTools, Stack Overflow es el mejor canal.
Stack Overflow
Para presentar errores o peticiones de características en los docs de DevTools, abre una incidencia en GitHub en el repositorio de Fundamentos Web.
Cuestiones de Docs
DevTools también tiene un canal de Slack, pero el equipo no lo monitoriza de forma constante.
Slack