Novedades de Herramientas para desarrolladores (Chrome 63)

Kayce Basques
Kayce Basques

¡Les damos la bienvenida nuevamente! Entre las nuevas funciones que llegarán a Herramientas para desarrolladores en Chrome 63, se incluyen las siguientes:

Sigue leyendo o mira el video a continuación para obtener más información.

Compatibilidad con depuración remota de varios clientes

Si alguna vez intentaste depurar una app desde un IDE como VS Code o WebStorm, probablemente descubriste que abrir Herramientas para desarrolladores desordenaba tu sesión de depuración. Este problema también hizo que fuera imposible usar Herramientas para desarrolladores para depurar pruebas de WebDriver.

A partir de Chrome 63, las Herramientas para desarrolladores admiten de forma predeterminada varios clientes de depuración remota, configuración necesaria.

La depuración remota de varios clientes fue el problema número 1 más popular de Herramientas para desarrolladores en crbug.com. número 3 en todo el proyecto de Chromium. La compatibilidad con varios clientes también ofrece oportunidades interesantes para integrar otras herramientas con Herramientas para desarrolladores o para usarlas en nuevos maneras. Por ejemplo:

  • Clientes de protocolo como ChromeDriver o las extensiones de depuración de Chrome para VS Code y WebStorm, y los clientes de WebSocket, como Puppeteer, ahora pueden ejecutarse al mismo tiempo que Herramientas para desarrolladores.
  • Dos clientes de protocolo de WebSocket separados, como Puppeteer o chrome-remote-interface, pueden conectarse a la misma pestaña simultáneamente.
  • Las extensiones de Chrome que usan la API de chrome.debugger ahora pueden ejecutarse al mismo tiempo que las Herramientas para desarrolladores.
  • Varias extensiones de Chrome diferentes ahora pueden usar la API de chrome.debugger en la misma pestaña al mismo tiempo.

Workspaces 2.0

Los espacios de trabajo existen desde hace un tiempo en Herramientas para desarrolladores. Esta función te permite usar las Herramientas para desarrolladores como tu IDE. Realizarás algunos cambios en tu código fuente dentro de Herramientas para desarrolladores y los cambios se conservarán en una versión local del proyecto en tu sistema de archivos.

Workspaces 2.0 se basa en la versión 1.0, lo que agrega una UX más útil y una mejor asignación automática de objetos código. Originalmente, esta función estaba programada para lanzarse poco después de la Cumbre de desarrolladores de Chrome. (CDS) de 2016, pero el equipo lo pospuso para resolver algunos problemas.

Consulta la sección "Autor" parte (alrededor de 14:28) de la charla de Herramientas para desarrolladores de CDS 2016 para ver los espacios de trabajo 2.0 en acción.

Cuatro auditorías nuevas

En Chrome 63, el panel Auditorías tiene 4 auditorías nuevas:

  • Entrega imágenes como WebP.
  • Usa imágenes con relaciones de aspecto adecuadas.
  • Evita las bibliotecas de JavaScript de frontend con vulnerabilidades de seguridad conocidas.
  • Errores del navegador registrados en la consola.

Consulta Ejecutar Lighthouse en las Herramientas para desarrolladores de Chrome para aprender a usar el panel Auditorías para mejorar las la calidad de tus páginas.

Consulta Lighthouse para obtener más información sobre el proyecto que impulsa el panel Audits.

Simula notificaciones push con datos personalizados

La simulación de notificaciones push existe desde hace un tiempo en Herramientas para desarrolladores, con una limitación: no no se pudieron enviar los datos personalizados. Sin embargo, con el nuevo cuadro de texto Push, que llega al panel Service Worker en Chrome 63, ahora es posible. Probar ahora:

  1. Ve a Demostración de envío simple.
  2. Haz clic en Habilitar notificaciones push.
  3. Haz clic en Permitir cuando Chrome te indique que permita las notificaciones.
  4. Abre Herramientas para desarrolladores.
  5. Ve al panel Service Workers.
  6. Escribe algo en el cuadro de texto Push.

    Simular una notificación push con datos personalizados

    Figura 1. Simula una notificación push con datos personalizados a través del cuadro de texto Push en el Panel Service Worker

  7. Haz clic en Push para enviar la notificación.

    La notificación push simulada

    Figura 2. La notificación push simulada

Activa eventos de sincronización en segundo plano con etiquetas personalizadas

La activación de eventos de sincronización en segundo plano también ha estado en el panel Service Workers durante un tiempo, pero Ahora puedes enviar etiquetas personalizadas:

  1. Abre Herramientas para desarrolladores.
  2. Ve al panel Service Workers.
  3. Ingresa texto en el cuadro de texto Sincronizar.
  4. Haz clic en Sincronizar.

Activa un evento de sincronización en segundo plano personalizado

Figura 3. Después de hacer clic en Sincronizar, las Herramientas para desarrolladores envían un evento de sincronización en segundo plano con la etiqueta personalizada. update-content al service worker

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataformas web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

  • Para enviarnos sugerencias o comentarios, accede a crbug.com.
  • Informa un problema en Herramientas para desarrolladores con Más opciones   Más > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
  • Twittea a @ChromeDevTools.
  • Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.