Analítica web
Reflexiones desde el mercado español de Analítica Web

Nueva actualización de las DevTools de Google Chrome

Se lee en 3 minutos

Las herramientas para desarrolladores de Google Chrome, DevTools, se han actualizado. Para disponer de la última versión, debes tener la versión 65 de Chrome.

En esta nueva versión han añadido algunas nuevas funcionalidades muy interesantes:

Accesibility Tools

Nuevas herramientas de accesibilidad. Estas herramientas están pensadas para inspeccionar las propiedades de accesibilidad de un elemento que, entre otras cosas, sirven para ayudar a que los sitios web puedan ser usados por personas que usan tecnologías de asistencia.
Dentro del panel “Elements”, encontrarás esta nueva funcionalidad en la pestaña “Accesibility”.

panel-accesibilidad

En la imagen anterior se puede ver el panel de accesibilidad donde se muestran los atributos ARIA del elemento que se está inspeccionando y su rol dentro del documento, el contenido de dicho elemento así como su posición dentro del árbol de accesibilidad.

También han incluido mejoras en el “color picker” relacionadas con la accesibilidad y que son las causantes de que a partir de ahora podamos ver la relación de contraste entre los distintos elementos de texto de la página web. Así, podremos asegurarnos que los usuarios con visión reducida, o con problemas de visión de color, verán correctamente dichos textos.

Audits

Se trata de una nueva funcionalidad dentro de las DevTools que contempla temas relacionados con SEO. Básicamente, lo que te permite es realizar una auditoría a cualquier sitio web para comprobar si cumple todas las recomendaciones SEO.

Puedes encontrar esta funcionalidad en el panel “Audits”.

panel-audits

Debugger

Chrome 65 viene también con novedades interesantes para depurar el código.

  • Por un lado nos encontramos con mejoras en el botónStep Into. Cuando estamos pasando mensajes entre distintos hilos, permite ver qué ocurre en cada uno de los hilos. En las versiones anteriores solo se podía ver el hilo principal.
  • Por otro lado, también han hecho mejoras en la forma de depurar el código asíncrono. Si pones puntos de interrupción en código asíncrono, DevTools ahora asume que quieres parar la ejecución en el código asíncrono, y no ejecutarlo de forma cronológica, que sería el comportamiento en las versiones anteriores al Chrome 65.
    Puedes ver un ejemplo muy ilustrativo y claro de cómo funciona en la propia web para desarrolladores de Google donde se ha anunciado la nueva versión de las DevTools.

Performance Panel

La novedad aquí reside en la posibilidad de hacer hasta cinco grabaciones. Ten en cuenta, que estas grabaciones se borran una vez que se cierran las DevTools.

Local overrides

Para mí, la novedad estrella de esta actualización. Con esta nueva funcionalidad podemos realizar cambios en el código fuente de una página web –obviamente de forma local– como, por ejemplo, cambiar una propiedad de una clase CSS, o hacer un cambio en el código de una función JavaScript. Lo más interesante además, es que estos cambios se mantienen incluso cuando la página se recarga. Hay que decir que tiene algunas limitaciones:

  • No permite hacer cambios en el árbol DOM del panel “Elements”. Si quieres hacer cambios a nivel de HTML, has de hacerlo dentro del propio fichero HTML en el panel “Sources”.
  • Lo mismo ocurre si quieres hacer algún cambio en el CSS usando el panel “Styles”, esto no es posible, y para conseguir ese cambio deberás hacerlo editando el fichero HTML dentro del panel “Sources”.

¿Quieres saber cómo funciona? Es sencillo:

Lo primero que hay que hacer es escoger una carpeta que será donde las DevTools guarden los cambios que vamos a realizar. Para ello, dentro del panel “Sources”, tenemos que abrir la pestaña “Overrides” y en ella, pulsar sobre “Select folder for overrides”.

local-overrides

Una vez hecho esto, la aplicación nos pedirá permiso para usar esta carpeta. Pulsaremos el botón “Permitir” para poder continuar.

solicitud-permiso-local-overrides

En cuanto le demos permiso, ya podemos realizar los cambios necesarios dentro de los ficheros de código, y una vez editados, es necesario guardar dichos cambios para que sean aplicados en posteriores recargas de la página.

save-for-overrides

En este caso simplemente he editado uno de los archivos JS para incluirle un console.log al principio de todo.

A pesar de sus pequeñas limitaciones, creo que es un gran avance tener esta funcionalidad dentro de las propias DevTools. No sé vosotros, pero yo por lo menos es algo que en muchas ocasiones eché en falta.

Changes tab

Con esta pestaña, que se encuentra dentro del panel “Sources”, podemos ver los cambios que hemos hecho de forma local usando lo comentado en el apartado anterior.

panel-changes

En la imagen anterior se pueden ver los cambios que he hecho en el fichero JavaScript. Y si pulsamos sobre la flechita que hay en la barra inferior, estos cambios se desharán volviendo a su versión anterior.

Personalmente, tanto la nueva funcionalidad “local overrides” como las mejoras añadidas a nivel de debugging, creo que van a ser de mucha utilidad, y si aun no has actualizado el Chrome, te lo recomiendo para que puedas comenzar a usarlas.

Puedes encontrar toda esta información y más detalles de la actualización en el propio sitio web para desarrolladores que Google tiene a nuestra disposición.

Escribe tu comentario

3 × 5 =

Navegar