Revoluciones de Chrome DevTools 2013

Arthur Evans

Tim Statler

Introducción

A medida que la complejidad y la funcionalidad de las aplicaciones web han aumentado, también lo han hecho Chrome DevTools. En este resumen de la charla de Paul Irish en Google I/O 2013 Chrome DevTools Revolutions 2013, podrás ver las funciones más recientes que están revolucionando la forma en que compilas y pruebas aplicaciones web.

Si te perdiste la charla de Paul, puedes verla arriba (adelante, esperaremos) o ir directamente al resumen de funciones:

• Los espacios de trabajo te permiten usar DevTools como editor de código fuente.
• Si usas Sass, te encantará la capacidad de editar en vivo archivos Sass (.scss) en DevTools y ver los cambios reflejados de inmediato en la página.
• La depuración remota de páginas en Chrome para Android es posible desde hace tiempo, pero la extensión de ADB simplifica la conexión a dispositivos Android. La redirección de puertos inversa te permite conectarte fácilmente a localhost en tu máquina de desarrollo desde tu dispositivo.
• El rendimiento siempre es una preocupación en las aplicaciones web, y DevTools tiene varias funciones nuevas para ayudarte a detectar cuellos de botella, incluida la nueva visualización de diagrama de llama para la generación de perfiles de CPU y varias herramientas nuevas para depurar problemas de rendimiento relacionados con la renderización y el uso de la memoria.

Estas funciones están disponibles en Chrome 28, que ahora está disponible en el canal de actualizaciones estables.

Lugares de trabajo

Los espacios de trabajo te permiten asignar recursos que se entregan desde un servidor web local a archivos en el disco, de modo que puedas editar cualquier tipo de archivo de origen en el panel Sources y que esos cambios se conserven en el disco. Del mismo modo, los cambios que realices en tu editor externo aparecerán de inmediato en el panel Sources.

En la siguiente captura de pantalla, se muestra un ejemplo de espacios de trabajo en acción. El sitio de Calendario se cargó a través de localhost, mientras que el panel de fuentes muestra la vista del sistema de archivos local de la carpeta raíz del sitio. Los cambios que realices en los archivos de esta carpeta se conservarán en el disco. En la siguiente captura de pantalla, se realizaron algunos cambios sin guardar en Calendar.css, por lo que se colocó un asterisco junto al nombre del archivo.

Si presionas Control+S o Command+S, se conservarán los cambios en el disco.

Del mismo modo, los cambios que realices en los estilos de un elemento en el panel Elements se reflejarán en el panel Sources y en tu editor externo. Ten en cuenta lo siguiente:

• Los cambios de DOM en el panel Elements no se conservan. Solo se conservan los cambios de estilo realizados en el panel Elements.
• Solo se pueden cambiar los estilos definidos en un archivo CSS externo. Los cambios en element.style o en los estilos intercalados no se conservan en el disco. Si hay estilos insertados, los puedes cambiar en el panel Sources.
• Los cambios de estilo en el panel Elements se conservan de inmediato; no es necesario presionar Control+S o Command+S.

Cómo agregar una carpeta de espacio de trabajo

El uso de espacios de trabajo consta de dos partes: hacer que el contenido de una carpeta local esté disponible para DevTools y asignar esa carpeta a una URL.

Para agregar una nueva carpeta de lugar de trabajo, sigue estos pasos:

1. En DevTools, haz clic en Configuración para abrir la configuración de DevTools.
2. Haz clic en Lugar de trabajo.
3. Haz clic en Agregar carpeta.
4. Navega a la carpeta que contiene los archivos de origen de tu proyecto y haz clic en Seleccionar.
5. Cuando se te solicite, haz clic en Permitir para otorgarle a DevTools acceso completo a la carpeta.

El panel Sources muestra la nueva carpeta del espacio de trabajo junto con las fuentes cargadas a través de localhost. Ahora puedes editar archivos en vivo en la carpeta de tu espacio de trabajo, y esos cambios se conservarán en el disco.

Cómo asignar una carpeta a una URL

Una vez que hayas agregado una carpeta de espacio de trabajo, puedes asignarla a una URL. Cada vez que Chrome carga la URL especificada, el panel Sources muestra el contenido de la carpeta del lugar de trabajo en lugar del contenido de la carpeta de red.

Para asignar una carpeta de espacio de trabajo a una URL, haz lo siguiente:

1. En el panel Sources, haz clic con el botón derecho o presiona Control y haz clic en un archivo de una carpeta de espacio de trabajo.
2. Selecciona Asigna a un recurso de red.

   

3. Selecciona el recurso de red correspondiente de la página cargada actualmente.

   

4. Vuelve a cargar la página en Chrome.

El panel Sources ahora debería mostrar solo el contenido de la carpeta del espacio de trabajo local de tu sitio, no las fuentes de localhost, como se muestra a continuación.

Nota: Si sigues viendo las fuentes de localhost, actualiza la página en Chrome.

Existen otras dos formas de vincular una carpeta de red a una carpeta de Workspace:

• Haz clic con el botón derecho (o presiona Control y haz clic) en un recurso de red y selecciona Map to File System Resource.
• Agrega asignaciones manualmente en la pestaña Workspace del diálogo de configuración de DevTools.

Depuración de mapas de origen de Sass/CSS

La depuración de Sass (mapa de origen de CSS) te permite editar en vivo los archivos Sass (.scss) en el panel Sources y ver los resultados sin tener que salir de DevTools ni actualizar la página. Cuando inspeccionas un elemento cuyos estilos son proporcionados por un archivo CSS generado por Sass, el panel Elements muestra un vínculo al archivo .scss, no al archivo .css generado.

Si haces clic en el vínculo, se abrirá el archivo SCSS (editable) en el panel Sources. Puedes hacer los cambios que quieras en este archivo.

Cuando guardas los cambios en un archivo SCSS (en DevTools o en otro lugar), el compilador de Sass vuelve a generar los archivos CSS. Luego, DevTools vuelve a cargar el archivo CSS recientemente generado.

Nota: Técnicamente, esta función debería funcionar con cualquier preprocesador de CSS que admita mapas de origen. Para obtener más información, consulta Cómo trabajar con preprocesadores de CSS en la documentación de DevTools.

Usa la depuración de Sass

Para usar la depuración de Sass en Chrome, debes tener la versión preliminar del compilador de Sass, que es la única versión que actualmente admite la generación de mapas de origen.

gem install sass -v '>=3.3.0alpha' --pre

También debes habilitar la función de depuración de Sass en los experimentos de DevTools:

1. Abre about:flags en Chrome.
2. Activa Habilitar experimentos de Herramientas para desarrolladores.
3. Reinicia Chrome.
4. Abre la configuración de DevTools y haz clic en Experiments.
5. Activa la Compatibilidad con Sass (o Depuración de hojas de estilo de Sass, según la versión del navegador que uses).

Una vez que se instale Sass, inicia el compilador de Sass para detectar cambios en tus archivos de origen de Sass y crear archivos de mapa de origen para cada archivo CSS generado, por ejemplo:

sass --watch **--sourcemap** sass/styles.scss:styles.css

Si usas Compass, ten en cuenta que aún no admite la versión preliminar de Sass, por lo que no puedes usar la depuración de Sass con Compass.

Cómo funciona

Para cada archivo fuente de SCSS que procesa, el compilador de Sass genera un archivo de mapa de origen (archivo .map), además del CSS compilado. El archivo de mapa de origen es un archivo JSON que define las asignaciones entre el archivo .scss y los archivos .css. Cada archivo CSS contiene una anotación que especifica la URL de su archivo de mapa de origen, incorporado en un comentario especial:

/*# sourceMappingURL=<url>; */

Por ejemplo, dado el siguiente archivo SCSS:

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass genera un archivo CSS como este, con la anotación sourceMappingURL:

<!-- styles.css -->
h2 {
  font-size: 24px;
  color: orange;
  background-color: darkblue; 
}
/*# sourceMappingURL=styles.css.map */

A continuación, se muestra un ejemplo de un archivo de mapa de origen:

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

Depuración remota más sencilla en Chrome para Android

Dos funciones nuevas en DevTools facilitan la configuración de la depuración remota en Chrome para Android: la extensión de ADB y el reenvío de puertos inverso.

La extensión de Chrome para ADB simplifica el proceso de configuración de la depuración remota. Proporciona los siguientes beneficios:

• Incluye Android Debug Bridge (ADB) para que no tengas que instalarlo.
• No se requiere interacción con la línea de comandos.
• IU para iniciar y detener fácilmente el daemon de ADB y ver los dispositivos conectados.

El reenvío de puertos inverso facilita la conexión de Chrome en Android a un servidor web que se ejecuta en tu localhost, algo que algunos entornos de red dificultan sin algunos trucos de DNS.

Cómo usar la extensión de ADB

Primero, instala la extensión de Chrome para ADB desde Chrome Web Store. Haz clic en Agregar a Chrome para instalar la extensión.

Nota: No se puede instalar extensiones desde Chrome Web Store en Windows 8. Si tienes problemas para instalar desde Chrome Web Store, consulta Depuración remota en Android para obtener instrucciones de instalación alternativas.

Una vez instalado, aparecerá un ícono de menú gris de Android en Chrome. Para iniciar ADB, haz clic en el ícono y, luego, en Iniciar ADB.

Una vez que se inicia ADB, el ícono del menú se vuelve verde y muestra la cantidad de dispositivos conectados actualmente, si los hay.

Haz clic en Ver dispositivos para abrir la página about:inspect, que muestra cada dispositivo conectado y sus pestañas. Para inspeccionar una pestaña en DevTools, haz clic en el vínculo "Inspeccionar" junto a su URL.

Si no ves ningún dispositivo conectado, verifica que el dispositivo esté conectado a USB y que la depuración por USB esté habilitada en la configuración de Chrome para Android. Para obtener instrucciones más detalladas y pasos para solucionar problemas, consulta Depuración remota en Android.

Redirección de puertos inversa (experimental)

Por lo general, tienes un servidor web en ejecución en tu máquina de desarrollo local y quieres conectarte a ese sitio desde tu dispositivo. Si la máquina de desarrollo y el dispositivo están en la misma red, esto es sencillo. Sin embargo, en algunos casos, como en redes corporativas restringidas, es posible que esto no sea posible sin algunos trucos inteligentes de DNS. Una nueva función de Chrome para Android llamada redirección de puertos inversa facilita esta tarea. Funciona creando un puerto TCP de escucha en tu dispositivo que reenvía el tráfico a través de USB a un puerto TCP específico en tu máquina de desarrollo.

Para usar esta función, necesitarás lo siguiente:

• Chrome 28 o versiones posteriores instalados en tu máquina de desarrollo
• Chrome para Android beta instalado en tu dispositivo
• Android Debug Bridge (extensión de Chrome para ADB o SDK de Android completo) instalado en tu máquina de desarrollo

Para usar la redirección de puertos inversa, debes tener el dispositivo conectado para la depuración remota, como se describe en Cómo usar la extensión de ADB. Luego, debes habilitar la redirección de puertos inversa y agregar una regla de redirección de puertos para tu aplicación.

Primero, habilita la redirección de puertos inversa:

1. Abre Chrome en tu máquina de desarrollo.
2. En about:flags, activa Habilitar experimentos de Herramientas para desarrolladores y reinicia Chrome.
3. Abre about:inspect. Deberías ver tu dispositivo móvil y una lista de las pestañas abiertas.
4. Haz clic en el vínculo "inspeccionar" junto a cualquiera de los sitios de la lista.
5. En la ventana de DevTools que se abre, abre el panel de configuración.
6. En Experimentos, activa Habilitar la redirección de puertos inversa.
7. Cierra la ventana de DevTools y vuelve a about:inspect.

Luego, agrega una regla de redirección de puertos:

1. Vuelve a hacer clic en el vínculo "Inspeccionar" para abrir DevTools y, luego, vuelve a abrir la configuración de DevTools.
2. Haz clic en la pestaña Redirección de puertos.
3. En el campo Device port, ingresa el número de puerto al que se debe conectar Chrome en tu dispositivo Android (el valor predeterminado es 8080).
4. En el campo Target, agrega el número de puerto en el que se ejecuta tu aplicación web en tu máquina de desarrollo.

   

5. En Chrome para Android, abre localhost:, donde es el valor que ingresaste en el campo Puerto del dispositivo (el valor predeterminado es 8080).

Deberías ver el contenido que publica tu máquina de desarrollo.

Visualización de gráficos de llama para perfiles de JavaScript

La nueva vista de gráfico de llama proporciona una representación visual del procesamiento de JavaScript a lo largo del tiempo, similar a las que se encuentran en los paneles de cronograma y red.

El eje horizontal representa el tiempo y el vertical la pila de llamadas. En la parte superior del panel, se muestra una descripción general de toda la grabación. Puedes acercar una región de la descripción general si la seleccionas con el mouse, como se muestra a continuación. La escala de tiempo de la vista de detalles se reduce según corresponda.

En la vista de detalles, una pila de llamadas se representa como una pila de "bloques" de funciones. El bloque de función inferior llamó a un bloque que se encuentra encima de otro. Si colocas el cursor sobre un bloque determinado, se mostrarán su nombre de función y sus datos de sincronización:

• Nombre: Es el nombre de la función.
• Tiempo propio: Indica el tiempo que tardó en completarse la invocación actual de la función, incluidas solo las instrucciones de la función, sin incluir las funciones a las que llamó.
• Tiempo total: Es el tiempo que tardó en completarse la invocación actual de esta función y las funciones a las que llamó.
• Tiempo propio agregado: Es el tiempo total de todas las invocaciones de la función en toda la grabación, sin incluir las funciones a las que esta función llamó.
• Tiempo total agregado: Es el tiempo total agregado de todas las invocaciones de la función, incluidas las funciones a las que esta función llamó.

Si haces clic en un bloque de función, se abrirá el archivo JavaScript que lo contiene en el panel Sources, en la línea en la que se define la función.

Para usar el gráfico de llama, sigue estos pasos:

1. En DevTools, haz clic en la pestaña Profiles.
2. Elige Record JavaScript CPU profile y haz clic en Start.
3. Cuando termines de recopilar datos, haz clic en Detener.
4. En la vista de perfil, selecciona la visualización Flame Chart.

   

Cinco funciones clave de medición del rendimiento

Para completar este resumen de los avances revolucionarios de DevTools, se incluyen varias funciones nuevas para investigar problemas de rendimiento:

• Modo de pintura continua
• Cómo mostrar rectángulos de pintura y bordes de capas
• Medidor de FPS
• Cómo encontrar diseños sincrónicos forzados (paginación excesiva de diseños)
• Seguimiento de la asignación de objetos

Modo de pintura continua

El modo de pintura continua es una opción en la configuración de DevTools (Renderización > Habilitar la repintura continua de la página) que te ayuda a identificar el costo de renderización de elementos individuales o estilos CSS.

Por lo general, Chrome solo pinta en la pantalla en respuesta a un cambio de diseño o estilo, y solo en aquellas regiones de la pantalla que necesitan actualización. Cuando habilitas el restablecimiento continuo de la página, se vuelve a pintar toda la pantalla de forma constante. Una pantalla sobreimpuesta muestra el tiempo que le lleva a Chrome pintar la página, así como el rango de tiempos y un gráfico que muestra la distribución de los tiempos de pintura recientes. La línea horizontal del histograma indica la marca de 16.6 ms.

El beneficio de usar esto es que puedes recorrer el árbol del DOM en el panel Elementos y ocultar elementos individuales (presiona la tecla H para ocultar el elemento seleccionado actualmente) o inhabilitar los estilos CSS de un elemento. Para ver cuánto tiempo agrega un elemento o un estilo al "peso" de renderización de la página, si corresponde, observa los cambios en el tiempo de pintura de la página. Si ocultar un solo elemento reduce significativamente los tiempos de pintura, debes enfocarte en el diseño o la construcción de ese elemento.

Para habilitar el modo de pintura continua, haz lo siguiente:

1. Abre la configuración de DevTools. 1.En la pestaña General, en Renderización, activa Habilitar la repintura continua de la página.

Nota: Si no ves esta opción en Configuración, abre about:flags, activa Composición de GPU en todas las páginas y reinicia Chrome.

Para obtener más información, consulta Cómo generar perfiles de tiempos de pintura largos con el modo de pintura continua de DevTools.

Cómo mostrar rectángulos de pintura y bordes de capas

Otra opción en DevTools es mostrar en qué regiones rectangulares de la pantalla se pinta. (Configuración > Renderización > Mostrar áreas procesadas con rectángulos destacados). Por ejemplo, en la siguiente captura de pantalla, se dibuja un rectángulo de pintura sobre la región donde se aplicaba un efecto de desplazamiento del CSS al gráfico púrpura. Esto es bueno, ya que es una parte relativamente pequeña de la pantalla.

Debes evitar las prácticas de diseño y desarrollo que provoquen que se vuelva a pintar toda la pantalla. Por ejemplo, en la siguiente captura de pantalla, el usuario se desplaza por la página. Un rectángulo de pintura rodea la barra de desplazamiento y otro rodea todo el resto de la página. En este caso, el culpable es la imagen de fondo del elemento body. La posición de la imagen se establece como fija en CSS, lo que requiere que Chrome vuelva a pintar toda la página en cada desplazamiento.

Medidor de FPS

El medidor de FPS muestra la velocidad de fotogramas actual de la página, la velocidad de fotogramas mínima y máxima, un gráfico de barras que muestra la velocidad de fotogramas en el tiempo y un histograma que muestra la variabilidad de la velocidad de fotogramas.

Para mostrar el medidor de FPS, haz lo siguiente:

1. Abre la configuración de DevTools.
2. Haz clic en General.
3. En Renderización, activa Forzar composición acelerada y Mostrar medidor de FPS.

Para forzar que el medidor de FPS siempre aparezca, abre about:flags, activa FPS counter y reinicia Chrome.

Cómo encontrar diseños sincrónicos forzados (paginación excesiva de diseños)

Para maximizar el rendimiento de la renderización, Chrome normalmente agrupa los cambios de diseño que solicita tu aplicación y programa un pase de diseño para calcular y renderizar de forma asíncrona los cambios solicitados. Sin embargo, si una aplicación solicita el valor de una propiedad dependiente del diseño (como offsetHeight o offsetWidth), Chrome se ve obligado a realizar un diseño de página de forma inmediata y síncrona. Estos llamados diseños sincrónicos forzados pueden reducir significativamente el rendimiento de la renderización, especialmente cuando se realizan de forma repetida en árboles de DOM grandes. Esta situación también se conoce como "fragmentación del diseño".

Una grabación de Rutas te alerta cuando detecta un diseño sincrónico forzado con un ícono de advertencia amarillo junto al registro de Rutas correspondiente. Si colocas el cursor sobre uno de estos registros, se mostrarán los seguimientos de pila del código que invalidó el diseño y el código que lo forzó.

Esta ventana emergente también muestra la cantidad de nodos que necesitaban diseño, el tamaño del árbol de diseño nuevo, el alcance del diseño y la raíz del diseño.

Consulta la demostración de cronograma: Cómo diagnosticar diseños sincrónicos forzados para obtener más información.

Seguimiento de la asignación de objetos

El seguimiento de asignaciones de objetos es un nuevo tipo de perfil de memoria que muestra la asignación a lo largo del tiempo. Cuando inicias el seguimiento de asignaciones, DevTools toma instantáneas del montón de forma continua con el tiempo. El perfil de asignación de montón muestra dónde se crean los objetos e identifica la ruta de retención.

Para realizar un seguimiento de las asignaciones de objetos, haz lo siguiente:

1. En DevTools, haz clic en la pestaña Profiles.
2. Elige Record heap allocations y haz clic en Start.
3. Cuando termines de recopilar datos, haz clic en Stop recording heap profile (el círculo rojo en la esquina inferior izquierda del panel de perfiles).

Generación de perfiles de Canvas (experimental)

Por último, te presentamos una función completamente experimental para explorar. La generación de perfiles de Canvas te permite grabar y reproducir llamadas a WebGL realizadas en un elemento de Canvas. Puedes recorrer llamadas individuales de WebGL o grupos de llamadas y ver los resultados renderizados. También verás el tiempo que tardó en volver a reproducir esas llamadas en particular.

Para usar el perfilado de Canvas, haz lo siguiente:

1. Activa la función Canvas inspection en la pestaña Experiments de la configuración de DevTools. (Si no ves esta pestaña, abre about:flags, activa Enable Developer Tools experiments y reinicia Chrome).
2. Haz clic en la pestaña Perfiles.
3. Selecciona Capturar marco del lienzo y haz clic en Capturar instantánea.
4. Ahora puedes explorar las llamadas que se usan para crear el marco del lienzo.