Se usó la API de Cloud Translation para traducir esta página.

Novedades de Herramientas para desarrolladores (Chrome 65)

Kayce Basques

Entre las nuevas funciones que llegarán a Herramientas para desarrolladores en Chrome 65, se incluyen las siguientes:

Anulaciones locales
Nuevas herramientas de accesibilidad
Pestaña Cambios
Nueva SEO y auditorías de rendimiento
Varias grabaciones en el panel Performance
Recorrer código confiable 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.

Nota: Verifica qué versión de Chrome estás ejecutando en chrome://version. Si ejecutas una versión anterior, estas características no existirán. Si estás ejecutando una versión posterior, es posible que estas funciones hayan cambiado. Chrome se actualiza automáticamente a una nueva versión principal cada 6 semanas.

Anulaciones locales

Las anulaciones locales te permiten realizar cambios en Herramientas para desarrolladores y mantener estos cambios durante la carga de la página. Antes, los cambios que se hacían en Herramientas para desarrolladores se perdían al volver a cargar la página. Las anulaciones locales funcionan para la mayoría de los tipos de archivos, con algunas excepciones. Consulta Limitaciones.

Persiste un cambio de CSS en todas las cargas de página con anulaciones locales.

Figura 1: Persiste un cambio de CSS en todas las cargas de página con Anulaciones locales

Cómo funciona:

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

Para configurar anulaciones locales, haz lo siguiente:

Abre el panel Fuentes.
Abre la pestaña Anulaciones.

Figura 2. La pestaña Anulaciones
Haz clic en Configurar anulaciones.
Selecciona el directorio en el que deseas guardar los cambios.
En la parte superior del viewport, haz clic en Allow para otorgarle a Herramientas para desarrolladores acceso de lectura y escritura al directorio.
Realiza los cambios.

Limitaciones

Las Herramientas para desarrolladores no guardan 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, las Herramientas para desarrolladores no guardarán el cambio. En su lugar, edita el archivo HTML en el panel Fuentes.

Lugares de trabajo. Las Herramientas para desarrolladores asignan automáticamente los recursos de red a un repositorio local. Cada vez que realizas un cambio en Herramientas para desarrolladores, 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 Herramientas para desarrolladores a través de la nueva pestaña Cambios.

La pestaña Cambios

Figura 3. La pestaña Cambios

Usa el nuevo panel Accesibilidad para inspeccionar las propiedades de accesibilidad de un elemento. Luego, revisa la proporción de contraste de los elementos de texto con el selector de colores para asegurarte de que los usuarios con problemas de visión reducida o deficiencias en la visión del color puedan acceder a ellos.

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

El panel de Accesibilidad

Figura 4. En el panel Accessibility, se muestran los atributos de ARIA y las propiedades calculadas para el elemento que está seleccionado actualmente en el DOM Tree en el 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 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 deficiencias de la visión o visión reducidas. Consulta Color y contraste para obtener más información sobre cómo la proporción de contraste afecta la accesibilidad.

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

Se está inspeccionando la relación de contraste del elemento H1 destacado.

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, significa que cumplió con la relación de contraste mínima recomendada (AA).

Haz clic en Mostrar más para expandir la sección Proporción de contraste. La línea blanca del cuadro Espectro de colores representa el límite entre los colores que cumplen con la proporció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 debajo de la línea blanca también cumplen con las recomendaciones.

La sección Relación de contraste expandida.

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

El panel Auditorías (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 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.

Nuevas auditorías

Chrome 65 incluye una nueva categoría 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 de 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 de SEO

Nuevas auditorías de rendimiento

Chrome 65 también incorpora 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 redireccionamientos de página
El documento usa complementos
Reduce el uso de CSS
Reducir el uso de JavaScript

El rendimiento importa. Después de que Mynet cuadruplicara la velocidad de carga de sus páginas, los usuarios pasaron un 43% más de tiempo en el sitio, vieron un 34% más de páginas, el porcentaje de rebote disminuyó un 24% y los ingresos aumentaron un 25% por página vista 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 das una URL y te da un informe detallado sobre las diversas 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 que sea más inclusiva con 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.
La sección Rendimiento ahora se encuentra en la parte superior de los informes

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

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

Cómo acceder a un código que pasa mensajes entre subprocesos

Cuando ingresas al código que pasa mensajes entre subprocesos, las Herramientas para desarrolladores ahora te muestran 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 acceder a la llamada postMessage() en el subproceso principal, Herramientas para desarrolladores se pausa en el controlador onmessage del subproceso de trabajo. El controlador onmessage publica un mensaje en el subproceso principal. Cuando se inicia esa llamada, se pausa Herramientas para desarrolladores en el subproceso principal.

Ingresando código de transmisión de mensajes en Chrome 65.

Figura 8: Cómo ingresar un código de envío de mensajes en Chrome 65

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

Ingresar código de envío de mensajes en Chrome 63

Figura 9: Cómo ingresar código de envío de mensajes en Chrome 63

Cómo entrar en código asíncrono

Cuando te adentras en el código asíncrono, las Herramientas para desarrolladores ahora suponen que deseas hacer una pausa en el código asíncrono que finalmente se ejecuta.

Por ejemplo, en la figura 10, después de acceder a setTimeout(), las Herramientas para desarrolladores ejecutan todo el código que lleva hasta ese punto en segundo plano y, luego, se detiene en la función que se pasa a setTimeout().

Acceder a código asíncrono en Chrome 65

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

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

Acceder a código asíncrono en Chrome 63

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

Varias grabaciones en el panel de rendimiento

En el panel Performance, ahora puedes guardar temporalmente hasta 5 grabaciones. Las grabaciones se borran cuando cierras la ventana de Herramientas para desarrolladores. Consulta Cómo comenzar a analizar el rendimiento del entorno de ejecución para familiarizarte con el panel Rendimiento.

Selección entre varias grabaciones en el panel de rendimiento.

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

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 mantenida por 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 la generación de 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 Inicio rápido para obtener más información.

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

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 plataforma 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.
Para informar un problema de Herramientas para desarrolladores, use Más opciones > Ayuda > Informar 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.