Novedades de Herramientas para desarrolladores (Chrome 65)

Kayce Basques
Kayce Basques
X GitHub Error

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

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.

Cómo conservar un cambio de CSS en todas las cargas de páginas con anulaciones locales

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

Cómo funciona:

  • Especifica un directorio en el que DevTools debe 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.

    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.
  • Espacios de trabajo. Las Herramientas para desarrolladores asignan automáticamente los recursos de red a un repositorio local. Cada vez que realizas 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.

La 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.

Panel de accesibilidad

Figura 4. El panel Accessibility muestra los atributos ARIA y las propiedades calculadas del elemento que está seleccionado actualmente en el Árbol de DOM del panel Elements, 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 de 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.

Inspección de la relación de contraste del elemento H1 destacado

Figura 5. Inspección de 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 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.

La sección expandida de Contrast Ratio.

Figura 6. Sección Proporción de contraste expandida

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 Cómo ejecutar Lighthouse en las herramientas para desarrolladores de Chrome o mira el A11ycast a continuación para aprender a usar el panel Audits y 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.

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

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 empezar, 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

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

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

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 de la Figura 8 pasa un mensaje entre el subproceso principal y el 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.

Paso al código de transmisión de mensajes en Chrome 65.

Figura 8. Paso al código de transmisión 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.

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

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 deseas 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().

Paso al código asíncrono en Chrome 65.

Figura 10: Paso al 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.

Paso al código asíncrono en Chrome 63.

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

Varias grabaciones en el panel 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.

Selección entre varias grabaciones en el panel Rendimiento

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

Bono: Automatiza las acciones de DevTools 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 Chrome DevTools. Puedes usar Puppeteer para automatizar muchas tareas que antes solo estaban disponibles a través de DevTools, 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 funciones de DevTools mientras navegas sin abrirlas de forma 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 funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

Novedades de DevTools

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