Chrome DevTools

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.
  • 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:

    • 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

    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.

    • Modo Dispositivo
    • Prueba los Viewports Responsive y específicos de cada dispositivo
    • Emula Sensores: Geolocalización & Acelerómetro

    Panel de elementos

    Ver y cambiar el DOM y el CSS.

    • 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

    Panel de la consola

    Ver mensajes y ejecutar JavaScript desde la consola.

    • Iniciar con la consola
    • Usar la consola
    • Interactuar desde la línea de comandos
    • Propia API de la consola. Referencia

    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.

    • 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
      • Panel de red

        Ver y depurar la actividad de la red.

        • Inicio
        • Guía de problemas de red
        • Referencia del panel de red

        Panel de rendimiento

        Encuentra formas de mejorar la carga y el rendimiento en tiempo de ejecución.

        • 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

        Panel de memoria

        Perfilice el uso de la memoria y rastree las fugas.

        • Corregir problemas de memoria
        • Perfil de CPU de JavaScript

        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.

        • Depurar aplicaciones web progresivas
        • Inspeccionar y gestionar el almacenamiento, las bases de datos, y cachés
        • Inspeccione y elimine cookies
        • Inspeccione recursos

        Panel de seguridad

        Depure problemas de contenido mixto, problemas de certificados y mucho más.

        • Entérate de los problemas de seguridad

        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.

        Twitter

        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

        Respuesta

        ¿Ha sido útil esta página?
        ¿Qué fue lo mejor de esta página?
        Me ayudó a completar mi(s) objetivo(s)
        Gracias por el feedback. Si tienes ideas específicas sobre cómo mejorar esta página, por favor crea una incidencia.

        Tenía la información que necesitaba
        Gracias por los comentarios. Si tienes ideas específicas sobre cómo mejorar esta página, por favor crea una incidencia.

        Tenía la información que necesitaba
        Gracias por los comentarios. Si tienes ideas específicas sobre cómo mejorar esta página, por favor crea una incidencia.

        Fue fácil de leer
        Gracias por los comentarios. Si tienes ideas específicas sobre cómo mejorar esta página, por favor crea una incidencia.

        Algo más
        Gracias por los comentarios. Si tienes ideas específicas sobre cómo mejorar esta página, por favor crea una incidencia.

    No
    ¿Qué fue lo peor de esta página?
    No me ayudó a completar mi(s) objetivo(s)
    Gracias por el comentario. Si tienes ideas específicas sobre cómo mejorar esta página, por favor crea una incidencia.

    Me faltaba información que necesitaba
    Gracias por el comentario. Si tienes ideas específicas sobre cómo mejorar esta página, por favor crea una incidencia.
    Tenía información inexacta
    Gracias por el comentario. Si tienes ideas específicas sobre cómo mejorar esta página, por favor crea una incidencia.
    Era difícil de leer
    Gracias por el comentario. Si tienes ideas específicas sobre cómo mejorar esta página, por favor crea una incidencia.
    Algo más
    Gracias por los comentarios. Si tienes ideas específicas sobre cómo mejorar esta página, por favor crea una incidencia.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *