Novedades de Herramientas para desarrolladores (Chrome 65)

Kayce Basques
Kayce Basques

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

Continúa 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 hacer cambios en Herramientas para desarrolladores y mantenerlos entre las cargas de páginas. Anteriormente, los cambios que hacías en Herramientas para desarrolladores se perdían cuando volviste a cargar la página. Las anulaciones locales funcionan para la mayoría de los tipos de archivos, con algunas excepciones. Consulta Limitaciones.

Mantener un cambio de CSS entre las cargas de páginas con anulaciones locales

Figura 1: Mantener un cambio de CSS entre las cargas de páginas con anulaciones 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 herramienta 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 las anulaciones locales, sigue estos pasos:

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

    La pestaña Anulaciones

    Figura 2. La pestaña Anulaciones

  3. Haz clic en Anulaciones de la configuración.

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

  5. En la parte superior del viewport, haz clic en Allow para que las Herramientas para desarrolladores tengan acceso de lectura y escritura al directorio.

  6. Realiza los cambios.

Limitaciones

  • Herramientas para desarrolladores no guarda los cambios realizados en el Árbol del DOM del panel Elements. Edita HTML en el panel Fuentes.
  • Si editas CSS en el panel Styles, y la fuente de ese CSS es un archivo HTML, Herramientas para desarrolladores no guardará 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 el repositorio local.

La pestaña Cambios

Haz un seguimiento de los cambios que realizas de forma local en Herramientas para desarrolladores mediante la nueva pestaña Cambios.

La pestaña Cambios

Figura 3. La pestaña Cambios

Nuevas herramientas de accesibilidad

Usa el nuevo panel Accessibility para inspeccionar las propiedades de accesibilidad de un elemento y, luego, inspeccionar la relación de contraste de los elementos de texto en el selector de colores para asegurarte de que los usuarios con deficiencias visuales o de visión de los colores puedan acceder a ellos.

Panel de accesibilidad

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 Accesibilidad, se muestran los atributos de ARIA y las propiedades calculadas para el elemento que está seleccionado actualmente en el Árbol del DOM del panel Elements, así como su posición en el árbol de accesibilidad.

A continuación, consulta A11ycast de Rob Dodson sobre el etiquetado para ver el panel de accesibilidad en acción.

Relació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 deficiencias visuales o de visión de los colores. Consulta Color y contraste para obtener más información sobre cómo la relación de contraste afecta la accesibilidad.

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

Inspeccionar la relación de contraste del elemento H1 destacado.

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

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

Haz clic en Show More Mostrar más para expandir la sección Contrast ratio. La línea blanca en el cuadro Color Spectrum 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 en la Figura 6 cumple con las recomendaciones, todos los colores por debajo de la línea blanca también cumplen con las recomendaciones.

La sección Proporción de contraste expandida.

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

El panel Audits tiene una auditoría de accesibilidad automatizada para garantizar que todos los elementos de texto de una página tengan una proporción de contraste suficiente.

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

Auditorías nuevas

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

Nuevas auditorías de SEO

Asegúrate de que tus páginas aprueben cada una de las auditorías de la nueva categoría SEO para mejorar tus clasificaciones 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áginas
  • El documento usa complementos
  • Reduce el uso de CSS
  • Reducir el uso de JavaScript

El rendimiento importa Después de que Mynet mejoró la velocidad de carga de sus páginas en cuatro 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 un 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 Audits (Auditorías). Le proporcionas una URL y obtienes un informe detallado sobre muchas formas diferentes de mejorar esa página. Comenzar.

Otras novedades

Paso de código confiable con trabajadores y código asíncrono

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

Entrar al código que pasa mensajes entre subprocesos

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

Por ejemplo, la app que se muestra en 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, Herramientas para desarrolladores se detiene en el controlador onmessage del subproceso de trabajo. El controlador onmessage publica un mensaje en el subproceso principal. Si ingresas a esa llamada, Herramientas para desarrolladores se pausa en el subproceso principal.

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

Figura 8: Ingresa al código de transmisión de mensajes en Chrome 65

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

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

Figura 9: Ingresa al código de transmisión de mensajes en Chrome 63

Entrar al código asíncrono

Cuando se ingresa al código asíncrono, Herramientas para desarrolladores supone que deseas pausar en el código asíncrono que finalmente se ejecuta.

Por ejemplo, en la Figura 10 después de ingresar a setTimeout(), Herramientas para desarrolladores ejecuta todo el código que pasó hasta ese punto en segundo plano y, luego, hace una pausa en la función que se pasa a setTimeout().

Ingresa a código asíncrono en Chrome 65.

Figura 10: Ingresa al código asíncrono en Chrome 65

Cuando ingresaste a un código como este en Chrome 63, las Herramientas para desarrolladores pausaban el código mientras se ejecutaba cronológicamente, como se puede ver en la Figura 11.

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

Figura 11: Ingresa al 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 Cómo comenzar a analizar el rendimiento del entorno de ejecución para familiarizarte con el panel Rendimiento.

Seleccionar entre varias grabaciones en el panel Rendimiento

Figura 12: Seleccionar entre varias grabaciones en el panel Rendimiento

Contenido adicional: Automatiza 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 mediante 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 cuenta con APIs para muchas tareas de automatización que suelen ser ú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 Guía de 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 tener que abrirlo de manera explícita. Para ver un ejemplo, consulta Cómo usar las funciones de Herramientas para desarrolladores sin abrir Herramientas para desarrolladores.

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

  • Envíanos tus sugerencias o comentarios a través de crbug.com.
  • Informa un problema en Herramientas para desarrolladores mediante Más opciones   Más   > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
  • Envía un tweet a @ChromeDevTools.
  • Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).

Novedades de Herramientas para desarrolladores

Una lista de todos los temas abordados en la serie Novedades de Herramientas para desarrolladores.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Se canceló Chrome 82.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59