Novedades de Herramientas para desarrolladores (Chrome 65)

Kayce Basques

Las nuevas funciones que se incluirán en las Herramientas para desarrolladores de Chrome 65 son las siguientes:

• Invalidaciones locales
• Nuevas herramientas de accesibilidad
• La pestaña Cambios
• Nuevas auditorías de SEO y rendimiento
• Varias grabaciones en el panel Rendimiento
• Depuración confiable del código 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

Los reemplazos locales te permiten realizar cambios en Herramientas para desarrolladores y conservarlos en las cargas de página. Anteriormente, los cambios que realizabas en Herramientas para desarrolladores se perdían cuando volvías a cargar la página. Las invalidaciones locales funcionan para la mayoría de los tipos de archivos, con algunas excepciones. Consulta las limitaciones.

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

Cómo funciona:

• Especifica un directorio en el que Herramientas para desarrolladores debe guardar los cambios.
• Cuando realizas cambios en Herramientas para desarrolladores, esta guarda una copia del archivo modificado en tu directorio.
• Cuando vuelvas a cargar la página, Herramientas para desarrolladores entregará el archivo local modificado en lugar del recurso de red.

Para configurar Local Overrides, haz lo siguiente:

1. Abre el panel Fuentes.

2. Abre la pestaña Overrides.

   

   Figura 2. La pestaña Anulaciones

3. Haz clic en Setup Overrides.

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

5. En la parte superior de la ventana gráfica, haz clic en Permitir para otorgar acceso de lectura y escritura al directorio de Herramientas para desarrolladores.

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

Funciones relacionadas

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

La pestaña Cambios

Haz un seguimiento de los cambios que realices de forma local en Herramientas para desarrolladores a través de la nueva pestaña Changes.

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 el panel Selector de color para inspeccionar la proporción de contraste de los elementos de texto y asegurarte de que sean accesibles para los usuarios con deficiencias visuales o de visión del color.

Panel de accesibilidad

Usa el panel Accesibilidad en el panel Elementos para investigar las propiedades de accesibilidad del elemento seleccionado actualmente.

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

Mira el 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 en la visión del color. 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 para cualquier persona.

Figura 5. Inspección de la proporció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, 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 color representa el límite entre los colores que cumplen con la relación de contraste recomendada y los que no. Por ejemplo, dado que el color gris de la figura 6 cumple con las recomendaciones, significa que todos los colores que se encuentran 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 Audits tiene una auditoría de accesibilidad automatizada para garantizar que cada elemento de texto de una página tenga una proporción de contraste suficiente.

Consulta Cómo ejecutar Lighthouse en las Herramientas para desarrolladores de Chrome o mira el siguiente A11ycast para aprender a usar el panel Audits para probar la accesibilidad.

Auditorías nuevas

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 pasen cada una de las auditorías en 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 su página en 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 del artículo. Obtén más información.

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

Otras novedades

• Nuevas auditorías de accesibilidad manuales
• Actualizaciones en la auditoría de WebP para incluir otros formatos de imagen de última generación
• Revisión de la puntuación de accesibilidad
• Si una auditoría de accesibilidad no es aplicable a una página, esa auditoría ya no se tendrá en cuenta para la puntuación de accesibilidad.
• Ahora, la sección Rendimiento es la primera en los informes

Depuración confiable del código con trabajadores y código asíncrono

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

Cómo ingresar en el código que pasa mensajes entre subprocesos

Cuando ingresas en el código que pasa mensajes entre subprocesos, Herramientas para desarrolladores ahora te muestra lo que sucede en cada subproceso.

Por ejemplo, la app de la figura 8 pasa un mensaje entre el subproceso principal y el subproceso de trabajador. Después de ingresar a la llamada de postMessage() en el subproceso principal, DevTools se detiene en el controlador de onmessage en el subproceso de trabajador. El controlador onmessage en sí publica un mensaje de vuelta al subproceso principal. Si ingresas en esa llamada, se pausará DevTools en el subproceso principal.

Figura 8. Cómo ingresar al código de transferencia de mensajes en Chrome 65

Cuando analizabas 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. Cómo ingresar al código de transmisión de mensajes en Chrome 63

Cómo recorrer el código asíncrono

Cuando se ingresa en código asíncrono, DevTools ahora supone que deseas pausar el código asíncrono que se ejecuta eventualmente.

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

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

Cuando ingresabas en un código como este en Chrome 63, las Herramientas para desarrolladores se detenían en el código a medida que se ejecutaba cronológicamente, como puedes ver en la Figura 11.

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

Varias grabaciones en el panel Rendimiento

El panel Rendimiento ahora te permite guardar temporalmente hasta 5 grabaciones. Las grabaciones se borran cuando cierras la ventana de Herramientas para desarrolladores. Consulta Primeros pasos con el análisis del rendimiento del tiempo de ejecución para familiarizarte con el panel de Rendimiento.

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

Bonus: Automatiza las acciones de DevTools con Puppeteer 1.0

Ya está disponible la versión 1.0 de Puppeteer, una herramienta de automatización del navegador 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 DevTools, como la captura de 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 la generación de PDFs:

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 DevTools mientras navegas sin abrir DevTools explícitamente. Consulta Cómo usar las funciones de Herramientas para desarrolladores sin abrir Herramientas para desarrolladores 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 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 hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con Herramientas para desarrolladores.

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

Novedades de Herramientas para desarrolladores

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