Lo nuevo en DevTools (Chrome 65)

Powered by Google Translate

Las nuevas características que llegan a DevTools en Chrome 65 incluyen:

Siga leyendo o vea la versión en video de estas notas de publicación, a continuación.

Locales

Anulaciones locales le permiten realizar cambios en DevTools y mantener esos cambios en todas las cargas de la página. Anteriormente, cualquier cambio que hiciera en DevTools se perdería al volver a cargar la página. Anulaciones locales funcionan para la mayoría de los tipos de archivos, con un par de excepciones. Ver Limitations .

Persisting a CSS change across page loads with Local Overrides.
Figure 1. Persisting a CSS change across page loads with Local Overrides

Cómo funciona:

  • Usted especifica un directorio donde DevTools debe guardar los cambios.
  • Cuando realiza cambios en DevTools, DevTools guarda una copia del archivo modificado en su directorio.
  • Cuando recarga la página, DevTools sirve el archivo local, modificado, en lugar del recurso de red.

Para configurar Anulaciones Locales :

  1. Abra el panel Fuentes . 1. Abra la pestaña Anulaciones .

    The Overrides tab
    Figure 2. The Overrides tab

  2. Haga clic en Anulaciones de configuración . 1. Seleccione el directorio en el que desea guardar sus cambios. 1. En la parte superior de su ventana gráfica, haga clic en Permitir para dar a DevTools acceso de lectura y escritura al directorio. 1. Haz tus cambios.

Limitaciones

  • DevTools no guarda los cambios realizados en el Árbol DOM del panel Elementos . Edite HTML en el panel Fuentes en su lugar.
  • Si editas CSS en el panel Estilos , y la fuente de ese CSS es un archivo HTML, DevTools no guardará el cambio. Edite el archivo HTML en el panel Fuentes en su lugar.
  • Workspaces . DevTools asigna automáticamente los recursos de red a un repositorio local. Cada vez que realiza un cambio en DevTools, ese cambio también se guarda en su repositorio local.

La pestaña Changes

Realice un seguimiento de los cambios que realice localmente en DevTools a través de la nueva pestaña Changes .

The Changes tab
Figure 3. The Changes tab

Nuevas herramientas de accesibilidad

Use el nuevo panel Accesibilidad para inspeccionar las propiedades de accesibilidad de un elemento e inspeccione la relación de contraste de los elementos de texto en el Selector de color para asegurarse de que sean accesibles para usuarios con problemas de visión o color. -visiones deficiencias.

accesibilidad de

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

The Accessibility pane shows the ARIA attributes and computed
            properties for the element that's currently selected in the DOM Tree of
            the Elements panel, as well as its position in the accessibility tree.
Figure 4. The Accessibility pane shows the ARIA attributes and computed properties for the element that's currently selected in the DOM Tree on the Elements panel, as well as its position in the accessibility tree

Echa un vistazo a A11ycast de Rob Dodson en el etiquetado a continuación para ver el panel Accesibilidad en acción.

Relación de contraste en el {: #contrast } color

Color Picker ahora muestra la relación de contraste de los elementos de texto. El aumento de la relación de contraste de los elementos de texto hace que su sitio sea más accesible para los usuarios con deficiencias visuales o deficiencias en la visión del color. Vea Color and contrast para obtener más información sobre cómo la relación de contraste afecta la accesibilidad.

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

Inspecting the contrast ratio of the highlighted H1 element.
Figure 5. Inspecting the contrast ratio of the highlighted h1 element

En Figura 5 , las dos marcas de verificación junto a 4.61 significan que este elemento cumple con las enhanced recommended contrast ratio (AAA) . Si solo tuviera una marca de verificación, eso significaría que cumplió con las minimum recommended contrast ratio (AA) .

Haga clic en Mostrar más ! Show More 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, ya 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 con las recomendaciones.

The expanded Contrast Ratio section.
Figure 6. The expanded Contrast Ratio section

El panel Auditorías tiene una auditoría de accesibilidad automatizada para garantizar que * cada * elemento de texto en una página tiene una relación de contraste suficiente.

Vea Run Lighthouse in Chrome DevTools , o vea el A11ycast a continuación, para aprender cómo usar el panel Auditorías para probar la accesibilidad.

Nuevas auditorías

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

Asegurarse de que sus páginas superen cada una de las auditorías en la nueva categoría SEO puede ayudar a mejorar su posicionamiento en los motores de búsqueda.

The new SEO category of audits.
Figure 7. The new SEO category of audits

Nuevas auditorías de performance

Chrome 65 también viene con muchas auditorías de rendimiento nuevas:

  • El tiempo de arranque de JavaScript es alto
  • Utiliza una política de caché ineficiente en activos estáticos.
  • Evita redireccionamientos de página.
  • Documento utiliza complementos.
  • Minify CSS
  • Minificar JavaScript

Otras actualizaciones

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

Chrome 65 trae actualizaciones para el Step Into ! Botón Step Into al entrar en el código que pasa mensajes entre subprocesos y código asíncrono. Si desea el comportamiento de paso anterior, puede utilizar el nuevo Paso ! Botón Step , en su lugar.

en el 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 aplicación en Figura 8 pasa un mensaje entre el hilo principal y el hilo trabajador. Después de ingresar a la llamada postMessage() en el hilo principal, DevTools se detiene en el controlador onmessage en el hilo trabajador. El controlador onmessage envía un mensaje al hilo principal. Al entrar en * esa * llamada se detiene DevTools nuevamente en el hilo principal.

Stepping into message-passing code in Chrome 65.
Figure 8. Stepping into message-passing code in Chrome 65

Cuando ingresó a un código como este en versiones anteriores de Chrome, Chrome solo le mostró el lado del hilo principal del código, como puede ver en Figura 9 .

Stepping into message-passing code in Chrome 63.
Figure 9. Stepping into message-passing code in Chrome 63

en el código asíncrono

Al entrar en el código asíncrono, DevTools ahora asume que desea hacer una pausa en el código asíncrono que finalmente se ejecuta.

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

Stepping into asynchronous code in Chrome 65.
Figure 10. Stepping into asynchronous code in Chrome 65

Cuando ingresó a un código como este en Chrome 63, DevTools se detuvo en el código mientras se ejecutaba cronológicamente, como puede ver en Figura 11 .

Stepping into asynchronous code in Chrome 63.
Figure 11. Stepping into asynchronous code in Chrome 63

Grabaciones múltiples en el panel Performance

El panel Performance ahora le permite guardar temporalmente hasta 5 grabaciones. Las grabaciones se eliminan al cerrar la ventana de DevTools. Vea Get Started with Analyzing Runtime Performance para Get Started with Analyzing Runtime Performance cómodo con el panel Performance .

Selecting between multiple recordings in the Performance panel.
Figure 12. Selecting between multiple recordings in the Performance panel

Bonus: Automatice las acciones de DevTools con Puppeteer 1.0

La versión 1.0 de Puppeteer, una herramienta de automatización del navegador mantenida por el equipo de Chrome DevTools, ya está disponible. Puede 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 API para muchas tareas de automatización generalmente útiles, como generar 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();
})();

Vea Quick Start para aprender más.

También puede usar Puppeteer para exponer las funciones de DevTools mientras navega sin tener que abrir DevTools explícitamente. Ver Using DevTools Features Without Opening DevTools para un ejemplo.

Una solicitud del equipo de DevTools: considere Canary

Si está en Mac o Windows, considere usar Chrome Canary como su navegador de desarrollo predeterminado. Si informa un error o un cambio que no le gusta mientras aún está en Canary, el equipo de DevTools puede abordar sus comentarios de manera significativamente más rápida.

Feedback

El mejor lugar para discutir cualquiera de las características o cambios que ve aquí es google-chrome-developer-tools@googlegroups.com mailing list . También puedes twittearnos en @ChromeDevTools si tienes poco tiempo. Si está seguro de que ha encontrado un error en DevTools, por favor, open an issue .

Consulte la etiqueta devtools-whatsnew para ver los enlaces a todas las notas de la versión de DevTools anteriores.

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!