Revoluciones de Chrome DevTools 2013

Introducción

A medida que crece la complejidad y la funcionalidad de las aplicaciones web, también crece Chrome Herramientas para desarrolladores. En este resumen de la charla Chrome DevTools Revoluciones 2013 de Paul Irlandés, en Google I/O 2013, podrá conocer las últimas funciones que revolucionan la forma de compilar y probar aplicaciones web.

Si no pudo ver la charla de Paul, puede mirarla arriba (adelante, esperaremos) o pasar directamente al resumen de funciones:

• Los lugares de trabajo te permiten usar Herramientas para desarrolladores como editor de código fuente.
• Si usas Sass, te encantará la capacidad de editar archivos Sass (.scss) en vivo dentro de Herramientas para desarrolladores y ver tus cambios reflejados de inmediato en la página.
• Durante un tiempo, es posible depurar páginas de forma remota en Chrome para Android, pero la extensión ADB facilita la conexión con 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 Herramientas para desarrolladores tiene varias funciones nuevas para ayudarte a rastrear cuellos de botella, incluida la nueva visualización de gráfico tipo llama para la generación de perfiles de CPU y varias herramientas nuevas para depurar problemas de rendimiento relacionados con la representación y el uso de memoria.

Estas funciones están disponibles en Chrome 28, ahora disponibles en el canal de actualización estable.

Lugares de trabajo

Los lugares de trabajo te permiten asignar recursos entregados desde un servidor web local a archivos en el disco, para que puedas editar cualquier tipo de archivo de origen dentro del panel Sources y hacer que esos cambios persistan en el disco. Del mismo modo, los cambios que realices en el editor externo aparecerán de inmediato en el panel Sources.

En la siguiente captura de pantalla, se muestra un ejemplo de lugares de trabajo en acción. El sitio del Calendario se cargó en localhost, mientras que el panel Sources 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 captura de pantalla a continuación, se han realizado algunos cambios no guardados en Calendar.css, por lo que se coloca un asterisco junto al nombre del archivo.

Cuando se presionan Control+S o Command+S, los cambios se mantienen en el disco.

De manera similar, los cambios que realices en los estilos de un elemento en el panel Elements se reflejarán tanto en el panel Sources como 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 del 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 tienes estilos intercalados, puedes cambiarlos en el panel Sources.
• Los cambios de estilo del panel Elements se conservan de inmediato. No es necesario que presiones Control+S ni Command+S.

Agrega una carpeta de espacio de trabajo

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

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

1. En Herramientas para desarrolladores, haz clic en Configuración para abrir la configuración de Herramientas para desarrolladores.
2. Haz clic en Lugar de trabajo.
3. Haz clic en Agregar carpeta.
4. Navega a la carpeta que contiene los archivos fuente de tu proyecto y haz clic en Seleccionar.
5. Cuando se le solicite, haga clic en Allow para que las Herramientas para desarrolladores tengan acceso completo a la carpeta.

En el panel Sources, se muestra la nueva carpeta del lugar de trabajo junto con los orígenes cargados en localhost. Ahora puedes editar archivos en vivo dentro de la carpeta de tu lugar de trabajo, y esos cambios se conservarán en el disco.

Asigna una carpeta a una URL

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

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

1. En el panel Sources, haz clic con el botón derecho o presiona Control + clic en un archivo de una carpeta del espacio de trabajo.
2. Selecciona Map to Network Resource (Asignar a 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 lugar de trabajo local del sitio, no las fuentes del localhost, como se muestra a continuación.

Existen otras dos maneras de vincular una carpeta de red con una carpeta del lugar de trabajo:

• Haz clic con el botón derecho (o Control + clic) en un recurso de red y selecciona Map to File System Resource.
• Agrega asignaciones manualmente en la pestaña Lugar de trabajo del diálogo Configuración de Herramientas para desarrolladores.

Depuración del mapa de orígenes de Sass/CSS

La depuración por Sass (mapa de fuentes de CSS) te permite editar en tiempo real archivos Sass (.scss) en el panel Sources y ver los resultados sin tener que salir de Herramientas para desarrolladores 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.

Cuando haces clic en el vínculo, se abre el archivo SCSS (editable) en el panel Sources. Puedes realizar los cambios que quieras en este archivo.

Cuando guardas los cambios en un archivo SCSS (en Herramientas para desarrolladores o en otro lugar), el compilador Sass vuelve a generar los archivos CSS. Luego, Herramientas para desarrolladores vuelve a cargar el archivo CSS recién generado.

Cómo usar la depuración de Sass

Para usar la depuración de Sass en Chrome, debes tener la versión previa al lanzamiento 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 Herramientas para desarrolladores:

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

Una vez instalado Sass, inicia el compilador Sass para observar los cambios en tus archivos de origen de Sass y crea 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 Compass aún no es compatible con la versión previa al lanzamiento de Sass, por lo que no puedes usar la depuración de Sass con Compass.

Cómo funciona

Para cada archivo de origen 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 del archivo de mapa de origen, incorporada en un comentario especial:

/*# sourceMappingURL=<url>; */

Por ejemplo, en 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 el siguiente, 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 orígenes:

{
  "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

Un par de funciones nuevas de Herramientas para desarrolladores facilitan la configuración de la depuración remota en Chrome para Android: la extensión ADB y la redirección de puertos inversa.

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

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

La redirección de puertos inversa facilita la conexión de Chrome en Android a un servidor web que se ejecute en tu localhost, algo que algunos entornos de red dificultan algunos trucos de DNS.

Cómo usar la extensión de ADB

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

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

Una vez que se inicie ADB, el ícono de menú se pondrá de color verde y mostrará la cantidad de dispositivos conectados actualmente, si corresponde.

Haz clic en View Devices para abrir la página about:inspect, en la que se muestran todos los dispositivos conectados y sus pestañas. Para inspeccionar una pestaña en Herramientas para desarrolladores, haz clic en el vínculo "inspect" junto a su URL.

Si no ves ningún dispositivo conectado, verifica que 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, esto no será posible sin algunos trucos ingeniosos de DNS. Una nueva función de Chrome para Android llamada redirección de puertos inversa facilita este proceso. Funciona creando un puerto TCP de escucha en tu dispositivo que reenvía el tráfico mediante 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 una versión posterior instalada en tu máquina de desarrollo
• Chrome para Android (versión beta) instalada en tu dispositivo
• Tener instalado Android Debug Bridge (extensión de Chrome adb o SDK completo de Android) en tu máquina de desarrollo.

Si quieres usar la redirección de puertos inversa, debes conectar tu dispositivo para realizar 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 en las 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 Herramientas para desarrolladores que se abre, abre el panel Configuración.
6. En Experimentos, activa Habilitar la redirección de puertos inversa.
7. Cierra la ventana de Herramientas para desarrolladores y regresa a about:inspect.

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

1. Vuelve a hacer clic en el vínculo "inspect" para abrir las Herramientas para desarrolladores, y vuelve a abrir la configuración de Herramientas para desarrolladores.
2. Haz clic en la pestaña Redirección de puertos.
3. En el campo Puerto del dispositivo, ingresa el número de puerto al que Chrome debe conectarse en tu dispositivo Android (el valor predeterminado es 8080).
4. En el campo Destino, agrega el número de puerto en el que se ejecuta la 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 entrega tu máquina de desarrollo.

Visualización de gráfico tipo llama para perfiles de JavaScript

La nueva vista de gráfico tipo llama proporciona una representación visual del procesamiento de JavaScript en el tiempo, similar a la que se encuentra en los paneles Timeline y Network.

El eje horizontal es el tiempo y el vertical es la pila de llamadas. En la parte superior del panel, aparece una descripción general que muestra toda la grabación. Para acercar una parte de la vista general, selecciónala con el mouse, como se muestra a continuación. La escala de tiempo de la vista detallada 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 la función inferior llamó a un bloque que se encuentra encima de otro. Cuando colocas el cursor sobre un bloque determinado, se muestran el nombre de la función y los datos de sincronización:

• Nombre: Es el nombre de la función.
• Tiempo propio: Se refiere al tiempo que tardó en completarse la invocación actual de la función, incluidas solo las sentencias de la función en sí, sin incluir las funciones a las que llamó.
• Tiempo total: Es el tiempo que tardó en completar la invocación actual de esta función y las funciones a las que llamó.
• Aggregated self time: el tiempo agregado para todas las invocaciones de la función en el registro, sin incluir las funciones a las que esta función llamó.
• Tiempo total agregado: Tiempo total de todas las invocaciones de la función, incluidas las funciones a las que esta función llamó.

Cuando haces clic en un bloque de función, se abre el archivo JavaScript que contiene en el panel Sources, en la línea donde se define la función.

Para usar el gráfico tipo llama, haz lo siguiente:

1. En Herramientas para desarrolladores, haga clic en la pestaña Perfiles.
2. Elige Record JavaScript CPU profile y haz clic en Iniciar.
3. Cuando termines de recopilar los datos, haz clic en Detener.
4. En la vista de perfil, selecciona la visualización Flame Chart.

   

   .

Cinco funciones clave para la medición del rendimiento

Para completar esta encuesta sobre los avances revolucionarios de Herramientas para desarrolladores, hay varias funciones nuevas que permiten investigar problemas de rendimiento:

• Modo de pintura continua
• Cómo mostrar la función Pintar rectángulos 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 de la configuración de Herramientas para desarrolladores (Renderización > Habilitar la repetición continua de pintura de páginas) que te ayuda a identificar el costo de renderización de elementos individuales o estilos de CSS.

Normalmente, Chrome solo pinta en la pantalla en respuesta a un cambio de diseño o estilo, y solo en las regiones de la pantalla que deben actualizarse. Cuando habilitas la función de pintura continua de la página, la pantalla completa se vuelve a pintar constantemente. Una pantalla de aviso muestra el tiempo que tarda Chrome en pintar la página, así como el intervalo 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.

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

Para habilitar el modo de dolor continuo, haz lo siguiente:

1. Abre la configuración de Herramientas para desarrolladores. 1.En la pestaña General, en Renderización, activa Habilitar la función de pintura continua de página.

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

Se muestran rectángulos de pintura y bordes de capas

Otra opción en Herramientas para desarrolladores es mostrar a qué partes rectangulares de la pantalla se están pintando. (Configuración > Renderización > Mostrar rectángulos de pintura). Por ejemplo, en la siguiente captura de pantalla, se dibuja un rectángulo de pintura sobre la región donde se aplicó un efecto de desplazamiento de CSS al gráfico púrpura. Esto es bueno, ya que es una parte relativamente pequeña de la pantalla.

Quieres evitar prácticas de diseño y desarrollo que hagan que toda la pantalla se vuelva a pintar. 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, la causa es la imagen de fondo en el elemento del cuerpo. La posición de la imagen está configurada 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 con la variabilidad de la velocidad de fotogramas.

Para mostrar el medidor de FPS, sigue estos pasos:

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

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

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

Para maximizar el rendimiento de representación, Chrome normalmente agrupa los cambios de diseño solicitados por tu aplicación y programa un pase de diseño para calcular y procesar de forma asíncrona los cambios solicitados. Sin embargo, si una aplicación solicita el valor de una propiedad que depende del diseño (como offsetHeight o offsetWidth), Chrome se verá obligado a realizar un diseño de página de forma inmediata y síncrona. Estos llamados diseños sincrónicos forzados pueden reducir en gran medida el rendimiento de la renderización, en especial cuando se realizan repetidamente en árboles grandes del DOM. Esta situación también se denomina "paginación excesiva de diseños".

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

En esta ventana emergente, también se muestra la cantidad de nodos que requerían diseño, el tamaño del árbol de rediseño, el alcance y la raíz del diseño.

Consulta la Demostración de línea de tiempo: Cómo diagnosticar diseños sincrónicos forzados para obtener más información.

Seguimiento de la asignación de objetos

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

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

1. En Herramientas para desarrolladores, haga clic en la pestaña Perfiles.
2. Selecciona Record heap allocations y haz clic en Start.
3. Cuando hayas terminado de recopilar los datos, haz clic en Stop recording heap profile (el círculo rojo en la esquina inferior izquierda del panel de generación de perfiles).

Generación de perfiles de Canvas (experimental)

Por último, esta es una función completamente experimental para explorar. La creación de perfiles de Canvas te permite grabar y reproducir llamadas de WebGL realizadas en un elemento de lienzo. Puedes repasar las llamadas individuales de WebGL o los grupos de llamadas y ver los resultados renderizados. También puede ver el tiempo que llevó volver a reproducir esas llamadas en particular.

Para usar la generación de perfiles de Canvas, haz lo siguiente:

1. Activa la función Inspección de lienzo en la pestaña Experimentos de la configuración de Herramientas para desarrolladores. (Si no ves esta pestaña, abre about:flags, activa Habilitar experimentos en las Herramientas para desarrolladores y reinicia Chrome).
2. Haga clic en la pestaña Perfiles.
3. Selecciona Capturar marco de lienzo y haz clic en Tomar instantánea.
4. Ahora puedes explorar las llamadas que se usaron para crear el marco del lienzo.