Las Herramientas para desarrolladores de Chrome son un conjunto de herramientas para desarrolladores web que están integradas directamente en el navegador Google Chrome. Las Herramientas para desarrolladores pueden ayudarte a editar páginas sobre la marcha y a diagnosticar problemas con rapidez, lo que, en última instancia, te ayuda a crear mejores sitios web en menos tiempo.
Mira el video para ver demostraciones en vivo de los flujos de trabajo principales de Herramientas para desarrolladores, como la depuración de CSS, el prototipado de CSS, la depuración de JavaScript y el análisis del rendimiento de carga.
Abrir Herramientas para desarrolladores
Hay muchas maneras de abrir las Herramientas para desarrolladores, ya que los diferentes usuarios quieren un acceso rápido a diferentes partes de la IU de Herramientas para desarrolladores.
- Para trabajar con el DOM o CSS, haz clic con el botón derecho en un elemento de la página y selecciona Inspect para ir al panel Elements. También puedes presionar Comando + Opción + C (Mac) o Control + Mayúsculas + C (Windows, Linux y ChromeOS).
- Para ver los mensajes registrados o ejecutar JavaScript, presiona Comando + Opción + J (Mac) o Control + Mayúsculas + J (Windows, Linux y ChromeOS) para ir directamente al panel de la Consola.
Consulte Abrir las Herramientas para desarrolladores de Chrome para obtener más detalles y flujos de trabajo.
Comenzar
Si eres un desarrollador web con más experiencia, estos son los puntos de partida recomendados para aprender cómo las Herramientas para desarrolladores pueden mejorar tu productividad:
- Cómo ver y cambiar el DOM
- Cómo ver y cambiar CSS
- Depura JavaScript
- Visualiza mensajes y ejecuta JavaScript en la consola
- Optimiza la velocidad del sitio web
- Cómo inspeccionar la actividad de red
Descubre Herramientas para desarrolladores
La IU de Herramientas para desarrolladores puede ser un poco abrumadora... ¡Hay muchas pestañas! Sin embargo, si te tomas un tiempo para familiarizarte con cada pestaña y entender lo que es posible, es posible que descubras que Herramientas para desarrolladores puede aumentar considerablemente tu productividad.
Modo de dispositivo
Simula dispositivos móviles.
Panel de elementos
Visualiza y cambia el DOM y la CSS.
- Comienza a ver y cambiar el DOM
- Cómo comenzar a ver y cambiar el CSS
- Editar CSS
- Edita el DOM
- Encuentra CSS no válidos, anulados, inactivos y otros tipos de CSS
- Identifica posibles mejoras del CSS
- Emula temas claros y oscuros, el contraste y otras funciones de medios de CSS
- Busca CSS sin usar
- Cómo inspeccionar animaciones
Panel de la consola
Ver mensajes y ejecutar JavaScript desde la consola.
- Comienza a usar la consola
- Referencia de la API de Console Utilities
- Referencia de la API de Console
Panel de fuentes
Depura JavaScript, conserva los cambios realizados en Herramientas para desarrolladores entre las recargas de páginas, guarda y ejecuta fragmentos de JavaScript, y guarda los cambios que realices en Herramientas para desarrolladores en fuentes locales.
- Cómo comenzar a depurar JavaScript
- Cómo pausar el código con puntos de interrupción
- Edita y guarda archivos en un lugar de trabajo
- Ejecuta fragmentos de JavaScript
- Referencia de depuración de JavaScript
- Cómo anular de forma local el contenido web y los encabezados de respuesta HTTP
Panel de red
Consulta y depura la actividad de red.
Panel de grabadora
Graba, vuelve a reproducir y mide los flujos de usuarios.
- Graba, vuelve a reproducir y mide los flujos de usuarios
- Cómo personalizar la grabadora con extensiones
- Referencia de las funciones de la grabadora
Panel de rendimiento
Encuentra formas de mejorar el rendimiento de la carga y del tiempo de ejecución.
- Optimiza la velocidad del sitio web
- Analiza el rendimiento del entorno de ejecución
- Referencia de las funciones de rendimiento
Panel de memoria
Encuentra y corrige problemas de memoria que afecten el rendimiento de la página, por ejemplo, fugas de memoria.
Panel de la aplicación
Inspecciona todos los recursos que están cargados, incluidas 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.
- Cómo depurar apps web progresivas
- Cómo ver y editar el almacenamiento local
- Cómo ver, agregar, editar y borrar cookies
- Consulta la información de la prueba de origen
Panel de seguridad
Depura problemas de contenido mixto, problemas de certificados y mucho más.
Comunidad
Presenta informes de errores y solicitudes de funciones en Crbug, el servicio de seguimiento de errores del equipo de ingeniería.
Si quieres informarnos sobre un error o solicitar una función, pero no tienes mucho tiempo, puedes enviar un tweet a @ChromeDevTools. Respondemos y enviamos anuncios desde la cuenta con regularidad.
Para obtener ayuda con las herramientas para desarrolladores, Stack Overflow es el mejor canal.
Para informar errores o solicitar funciones en los documentos de Herramientas para desarrolladores, abre un problema de GitHub.
Herramientas para desarrolladores también tiene un canal de Slack, pero el equipo no lo supervisa de forma coherente.