Novedades de Herramientas para desarrolladores (Chrome 65)

Kayce Basques

Estas son algunas de las nuevas funciones que se agregarán a DevTools en Chrome 65:

• Anulaciones locales
• Nuevas herramientas de accesibilidad
• Pestaña Cambios
• Nueva SEO y auditorías de rendimiento
• Varias grabaciones en el panel Rendimiento
• Pasos de código confiables con trabajadores y código asíncrono

Sigue leyendo o mira la versión en video de estas notas de la versión, a continuación.

Anulaciones locales

Las anulaciones locales te permiten realizar cambios en DevTools y conservarlos en las cargas de página. Anteriormente, se perdían los cambios que hacías en DevTools cuando volvías a cargar la página. Las anulaciones locales funcionan para la mayoría de los tipos de archivos, con algunas excepciones. Consulta Limitaciones.

Figura 1. Cómo conservar un cambio de CSS en todas las cargas de páginas con Anulaciones locales

Cómo funciona:

• Debes especificar un directorio donde las Herramientas para desarrolladores deberían guardar los cambios.
• Cuando realizas cambios en DevTools, este guarda una copia del archivo modificado en tu directorio.
• Cuando vuelves a cargar la página, DevTools entrega el archivo local modificado, en lugar del recurso de red.

Para configurar las Anulaciones locales, sigue estos pasos:

1. Abre el panel Sources.

2. Abre la pestaña Anulaciones.

   

   Figura 2. La pestaña Anulaciones

3. Haz clic en Anulaciones de configuración.

4. Selecciona el directorio en el que deseas guardar los cambios.

5. En la parte superior del viewport, haz clic en Permitir para otorgar a DevTools acceso de lectura y escritura al directorio.

6. Realiza los cambios.

Limitaciones

• DevTools no guarda los cambios realizados en el Árbol del DOM del panel Elements. En su lugar, edita el código HTML en el panel Sources.
• Si editas CSS en el panel Styles y la fuente de ese CSS es un archivo HTML, DevTools no guardará el cambio. En su lugar, edita el archivo HTML en el panel Sources.

Funciones relacionadas

• Lugares de trabajo. Las Herramientas para desarrolladores asignan automáticamente los recursos de red a un repositorio local. Cada vez que haces un cambio en DevTools, ese cambio también se guarda en tu repositorio local.

La pestaña Cambios

Realiza un seguimiento de los cambios que realices de forma local en DevTools a través de la nueva pestaña Cambios.

Figura 3. La pestaña Cambios

Nuevas herramientas de accesibilidad

Usa el nuevo panel Accesibilidad para inspeccionar las propiedades de accesibilidad de un elemento y la proporción de contraste de los elementos de texto en el Selector de color para asegurarte de que sean accesibles para los usuarios con discapacidad visual o daltonismo.

Panel de accesibilidad

Usa el panel Accessibility en el panel Elements para investigar las propiedades de accesibilidad del elemento seleccionado actualmente.

Figura 4. El panel Accessibility muestra los atributos ARIA y las propiedades calculadas del elemento que está seleccionado actualmente en el árbol DOM del panel Elements, así como su posición en el árbol de accesibilidad.

Consulta la A11ycast de Rob Dodson sobre el etiquetado a continuación para ver el panel Accesibilidad en acción.

Proporción de contraste en el selector de color

El Selector de color ahora te muestra la proporción de contraste de los elementos de texto. Aumentar la proporción de contraste de los elementos de texto hace que tu sitio sea más accesible para los usuarios con discapacidad visual o deficiencias de visión en colores. Consulta Color y contraste para obtener más información sobre cómo la relación de contraste afecta la accesibilidad.

Mejorar el contraste de color de los elementos de texto hace que tu sitio sea más fácil de usar para todos los usuarios. En otras palabras, si el texto es gris con un fondo blanco, será difícil de leer.

Figura 5. Inspeccionando la relación de contraste del elemento h1 destacado

En la Figura 5, las dos marcas de verificación junto a 4.61 significan que este elemento cumple con la relación de contraste recomendada mejorada (AAA). Si solo tuviera una marca de verificación, eso significaría que cumple con la relación de contraste mínima recomendada (AA).

Haz clic en Mostrar más para expandir la sección Relación de contraste. La línea blanca en el cuadro Espectro de colores representa el límite entre los colores que cumplen con la relación de contraste recomendada y los que no. Por ejemplo, como el color gris de la Figura 6 cumple con las recomendaciones, eso significa que todos los colores debajo de la línea blanca también cumplen con las recomendaciones.

Figura 6. La sección Relación de contraste expandida

Funciones relacionadas

El panel Auditorías tiene una auditoría de accesibilidad automática para garantizar que cada elemento de texto de una página tenga una proporción de contraste suficiente.

Consulta Ejecuta Lighthouse en las Herramientas para desarrolladores de Chrome o mira A11ycast a continuación para aprender a usar el panel Auditorías para probar la accesibilidad.

Auditoría nueva

Chrome 65 incluye una categoría completamente nueva de auditorías de SEO y muchas auditorías de rendimiento nuevas.

Nuevas auditorías de SEO

Asegurarte de que tus páginas aprueben cada una de las auditorías de la nueva categoría SEO puede ayudarte a mejorar tu clasificación en los motores de búsqueda.

Figura 7. La nueva categoría de auditorías SEO

Nuevas auditorías de rendimiento

Chrome 65 también incluye muchas auditorías de rendimiento nuevas:

• El tiempo de inicio de JavaScript es alto
• Usa una política de caché ineficiente en recursos estáticos
• Evita los redireccionamientos de página
• El documento usa complementos
• Reduce el uso de CSS
• Reducir el uso de JavaScript

El rendimiento es importante. Después de que Mynet mejoró la velocidad de carga de la página 4 veces, los usuarios pasaron un 43% más de tiempo en el sitio, vieron un 34% más de páginas, los porcentajes de rebote disminuyeron un 24% y los ingresos aumentaron un 25% por vista de página de artículo. Obtén más información.

Sugerencia: Si deseas mejorar el rendimiento de carga de tus páginas, pero no sabes por dónde comenzar, prueba el panel Auditorías. Le proporcionas una URL y te brinda un informe detallado sobre las diferentes maneras en que puedes mejorar esa página. Comenzar.

Otras novedades

• Nuevas auditorías de accesibilidad manuales
• Actualizaciones de la auditoría de WebP para que sea más inclusiva de otros formatos de imagen de nueva generación
• Una reforma de la puntuación de accesibilidad
• Si una auditoría de accesibilidad no es aplicable para una página, ya no se considera en la puntuación de accesibilidad.
• El rendimiento ahora es la sección principal de los informes

Pasos de código confiables con trabajadores y código asíncrono

Chrome 65 incluye actualizaciones del botón Step Into cuando se ingresa al código que pasa mensajes entre subprocesos y el código asíncrono. Si quieres el comportamiento de pasos anterior, puedes usar el nuevo botón Step en su lugar.

Cómo ingresar al código que pasa mensajes entre subprocesos

Cuando entras en el código que pasa mensajes entre subprocesos, DevTools ahora te muestra lo que sucede en cada subproceso.

Por ejemplo, la app que se muestra en la Figura 8 pasa un mensaje entre el subproceso principal y el subproceso de trabajo. Después de ingresar a la llamada postMessage() en el subproceso principal, DevTools se detiene en el controlador onmessage en el subproceso de trabajo. El controlador onmessage publica un mensaje en el subproceso principal. Si entras en esa llamada, DevTools se pausará en el subproceso principal.

Figura 8. Ingresando código de envío de mensajes en Chrome 65

Cuando ingresabas a un código como este en versiones anteriores de Chrome, Chrome solo te mostraba el lado del subproceso principal del código, como puedes ver en la Figura 9.

Figura 9. Paso al código de transmisión de mensajes en Chrome 63

Cómo ingresar al código asíncrono

Cuando entras en el código asíncrono, DevTools ahora supone que quieres hacer una pausa en el código asíncrono que se ejecuta finalmente.

Por ejemplo, en la Figura 10, después de ingresar a setTimeout(), DevTools ejecuta todo el código hasta ese punto en segundo plano y, luego, se detiene en la función que se pasa a setTimeout().

Figura 10: Cómo ingresar a código asíncrono en Chrome 65

Cuando ingresaste a un código como este en Chrome 63, DevTools lo detuvo mientras se ejecutaba cronológicamente, como puedes ver en la Figura 11.

Figura 11: Cómo ingresar al código asíncrono en Chrome 63

Varias grabaciones en el panel de rendimiento

El panel Rendimiento ahora te permite guardar hasta 5 grabaciones de forma temporal. Las grabaciones se borran cuando cierras la ventana de DevTools. Consulta Cómo comenzar a analizar el rendimiento del tiempo de ejecución para familiarizarte con el panel Rendimiento.

Figura 12: Cómo seleccionar entre varias grabaciones en el panel Rendimiento

Contenido adicional: Automatiza las acciones de Herramientas para desarrolladores con Puppeteer 1.0

Ya está disponible la versión 1.0 de Puppeteer, una herramienta de automatización de navegadores que mantiene el equipo de Herramientas para desarrolladores de Chrome. Puedes usar Puppeteer para automatizar muchas tareas que antes solo estaban disponibles a través de las Herramientas para desarrolladores, como tomar capturas de pantalla:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

También tiene APIs para muchas tareas de automatización generalmente útiles, como generar archivos PDF:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

Consulta la Guía de inicio rápido para obtener más información.

También puedes usar Puppeteer para exponer las funciones de las Herramientas para desarrolladores mientras navegas sin abrir las Herramientas para desarrolladores de manera explícita. Consulta Cómo usar las funciones de DevTools sin abrirlas para ver un ejemplo.

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 plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las nuevas funciones, actualizaciones o cualquier otro aspecto relacionado con Herramientas para desarrolladores.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de DevTools con more_vert Más opciones > Ayuda > Informar un problema de DevTools en DevTools.
• Twittea a @ChromeDevTools.
• Deja comentarios en los videos de YouTube sobre las novedades de las Herramientas para desarrolladores o en los videos de YouTube con sugerencias de Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se analizó en la serie Novedades de DevTools.