Novedades de Herramientas para desarrolladores (Chrome 63)

Kayce Basques
Kayce Basques
X GitHub

¡Les damos la bienvenida nuevamente! Las nuevas funciones que se incluirán en las Herramientas para desarrolladores de Chrome 63 son las siguientes:

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

Compatibilidad con la 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 interrumpe tu sesión de depuración. Este problema también imposibilitaba el uso de Herramientas para desarrolladores para depurar pruebas de WebDriver.

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

La depuración remota de varios clientes fue el problema más popular de las Herramientas para desarrolladores en crbug.com y el número 3 en todo el proyecto de Chromium. La compatibilidad con varios clientes también abre muchas oportunidades interesantes para integrar otras herramientas con las Herramientas para desarrolladores o usar esas herramientas de formas nuevas. Por ejemplo:

  • Los 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 las Herramientas para desarrolladores.
  • Ahora, dos clientes de protocolo WebSocket independientes, como Puppeteer o chrome-remote-interface, pueden conectarse a la misma pestaña de forma simultánea.
  • Las extensiones de Chrome que usan la API de chrome.debugger ahora pueden ejecutarse al mismo tiempo que las Herramientas para desarrolladores.
  • Ahora, varias extensiones de Chrome diferentes pueden usar la API de chrome.debugger en la misma pestaña de forma simultánea.

Espacios de trabajo 2.0

Los espacios de trabajo existen desde hace un tiempo en DevTools. Esta función te permite usar Herramientas para desarrolladores como tu IDE. Realizas algunos cambios en el código fuente dentro de Herramientas para desarrolladores, y los cambios persisten en la versión local de tu proyecto en el sistema de archivos.

Workspaces 2.0 se basa en la versión 1.0 y agrega una UX más útil y una mejor asignación automática del código transpilado. Originalmente, esta función se lanzaría poco después de la Cumbre de desarrolladores de Chrome (CDS) de 2016, pero el equipo la pospuso para solucionar algunos problemas.

Consulta la parte de "Creación" (alrededor de los 14:28) de la charla de DevTools en CDS 2016 para ver Workspaces 2.0 en acción.

Cuatro auditorías nuevas

En Chrome 63, el panel Audits incluye 4 auditorías nuevas:

  • Publica imágenes como WebP.
  • Usa imágenes con relaciones de aspecto adecuadas.
  • Evita las bibliotecas JavaScript de frontend con vulnerabilidades de seguridad conocidas.
  • Se registraron errores del navegador en la consola.

Consulta Cómo ejecutar Lighthouse en las Herramientas para desarrolladores de Chrome para obtener información sobre cómo usar el panel Audits y mejorar la calidad de tus páginas.

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

Simula notificaciones push con datos personalizados

La simulación de notificaciones push existe desde hace un tiempo en DevTools, con una limitación: no podías enviar datos personalizados. Pero con el nuevo cuadro de texto Push que se incluirá en el panel Service Worker de Chrome 63, ahora puedes hacerlo. Probar ahora:

  1. Ve a Simple Push Demo.
  2. Haz clic en Habilitar notificaciones push.
  3. Haz clic en Permitir cuando Chrome te solicite que permitas las notificaciones.
  4. Abre las 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. Simular una notificación push con datos personalizados a través del cuadro de texto Push en el panel Service Worker

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

    La notificación push simulada

    Figura 2. La notificación push simulada

Cómo activar eventos de sincronización en segundo plano con etiquetas personalizadas

Los eventos de sincronización en segundo plano también se encuentran en el panel Service Workers desde hace un tiempo, pero ahora puedes enviar etiquetas personalizadas:

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

Cómo activar un evento de sincronización en segundo plano personalizado

Figura 3. Después de hacer clic en Sync, DevTools envía 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 tu navegador de desarrollo predeterminado. Estos canales de versión preliminar te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores