Novedades de Herramientas para desarrolladores (Chrome 65)

Kayce Basques
Kayce Basques
X GitHub Error

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

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 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. Locales Las anulaciones 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 archivo de red recurso.

Para configurar anulaciones locales, haz lo siguiente:

  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 Configurar anulaciones.

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

  5. En la parte superior del viewport, haz clic en Permitir para otorgarle a Herramientas para desarrolladores acceso de lectura y escritura a la .

  6. Realiza los cambios.

Limitaciones

  • Las Herramientas para desarrolladores no guardan los cambios realizados en el árbol del DOM del panel Elements. Edita el código HTML en el Sources en su lugar.
  • Si editas CSS en el panel Estilos y la fuente de ese CSS es un archivo HTML, las Herramientas para desarrolladores no lo harán 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. Siempre que hacer 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

Nuevas herramientas de accesibilidad

Usar el nuevo panel Accesibilidad para inspeccionar las propiedades de accesibilidad de un elemento inspeccionarán la proporción de contraste de los elementos de texto en el selector de colores para asegurarte de que accesible para usuarios con discapacidades visuales o deficiencias en la visión de los colores.

Panel de accesibilidad

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

El panel de Accesibilidad

Figura 4. El panel Accesibilidad muestra los atributos y las propiedades calculadas de ARIA para el que está seleccionado actualmente en el Árbol del DOM en el panel Elements, así como su 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 el contraste proporción de elementos de texto hace que el sitio sea más accesible para los usuarios con discapacidades visuales o deficiencias en la percepción del color. Consulta Color y contraste para obtener más información sobre 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.

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 marca de verificación relación de contraste recomendada (AAA). Si solo tuviera una marca de verificación, significa que cumplió con los relación de contraste mínima recomendada (AA).

Haz clic en Mostrar más Mostrar más para expandir el Contraste Proporción. La línea blanca del cuadro Espectro de colores representa el límite entre colores. que cumplan con la proporción de contraste recomendada y las que no. Por ejemplo, dado que el color gris en La figura 6 cumple con las recomendaciones, lo que significa que todos los colores debajo de la línea blanca también cumplen recomendaciones.

La sección Relación de contraste expandida.

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

El panel Auditorías tiene una auditoría de accesibilidad automatizada para garantizar que cada elemento de texto en 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 la 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

Si te aseguras de que tus páginas aprueben cada una de las auditorías de la nueva categoría de SEO, podrás mejorar tu de 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 la sitio, vio un 34% más de páginas, el porcentaje de rebote disminuyó un 24% y los ingresos aumentaron un 25% por artículo. vista de página. Obtén más información.

Sugerencia: Si desea mejorar el rendimiento de carga de sus páginas, pero no sabe por dónde empezar, prueba el panel Auditorías. Le das una URL y te da un informe detallado de muchos maneras de mejorar esa página. Comenzar.

Otras novedades

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

Chrome 65 trae actualizaciones a Step Into Botón Entrar al entrar en código que pasa mensajes entre subprocesos y código asíncrono. Si quieres ver los pasos anteriores comportamiento, puedes usar el nuevo Paso Paso botón.

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 ocurre 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 entrar en la llamada postMessage() del subproceso principal, Herramientas para desarrolladores se pausa en onmessage en el subproceso de trabajo. El controlador onmessage publica un mensaje en el directorio principal conversación. 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. Ingreso de código para pasar mensajes en Chrome 65

Cuando entrabas a un código como este en versiones anteriores de Chrome, Chrome solo te mostraba el principal del código, 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 ingresas al código asíncrono, las Herramientas para desarrolladores ahora suponen que deseas hacer una pausa en la y 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. hasta ese punto detrás de escena 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 como 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 son se borrará cuando cierres la ventana de Herramientas para desarrolladores. Consulta Cómo comenzar a analizar el entorno de ejecución Rendimiento para sentirse cómodo 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

La versión 1.0 de Puppeteer, una herramienta de automatización de navegadores mantenida por el equipo de Herramientas para desarrolladores de Chrome, ya se encuentra y sale de ella. Puedes usar Puppeteer para automatizar muchas tareas que antes solo estaban disponibles a través de 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 tener que hacerlo explícitamente abriendo Herramientas para desarrolladores. 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 plataformas 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.
  • Informa un problema en Herramientas para desarrolladores con Más opciones   Más > Ayuda > Informa 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.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.