Las Herramientas para desarrolladores de Chrome se mueven rápido, y queremos que prestes atención a algunas funcionalidades y mejoras nuevas que introdujimos en algunos componentes. En concreto, hablaremos de algunos cambios en la IU, la generación de perfiles de JS en alta resolución y las nuevas funciones de Workspaces.
- La generación de perfiles de alta resolución ahora tiene una precisión de 0 .1 milisegundos
- Las barras de herramientas subieron a la parte superior de Herramientas para desarrolladores y las anulaciones se movieron al panel lateral de la consola.
- Se agregaron varias funciones a los espacios de trabajo para admitir la adición, eliminación y búsqueda de archivos
Generación de perfiles de alta resolución
La generación de perfiles de CPU es una función muy útil para ver la eficacia de JavaScript. Además de las vistas de perfil tradicionales, este verano presentamos un Flame Chart, que representa visualmente el procesamiento de JavaScript de una página a lo largo del tiempo. Se puede usar para ver con facilidad el nivel de profundidad de tu pila de llamadas, así como el tiempo que tardan en procesarse las funciones individuales.
Hasta hace poco, las representaciones tradicionales de peso pesado (de abajo arriba) y de árbol (de arriba abajo), así como el gráfico tipo llama, solo mostraban procesos con una precisión de hasta 1 milisegundo. Para la mayoría de las aplicaciones, esto está bien. Sin embargo, si estás trabajando en algo en lo que la velocidad realmente importa en la IU, como en un juego, la resolución de 1 milisegundo puede ser demasiado fragmentada como para obtener resultados significativos para lo que hace que tu sitio sea lento o tu IU parezca lenta. Para habilitar la generación de perfiles de alta resolución (por el momento, solo la versión canary), sigue estos pasos:
- Abre la configuración de Herramientas para desarrolladores.
- En la pestaña General, en Profiler, activa HighResolution CPU perfiling.
A continuación, se muestra un ejemplo de un gráfico tipo llama que se observa en la generación de perfiles normal y con alta resolución, en el que perfilamos mediante la carga de la página principal de HTML5Rocks.com:
Con la resolución normal de perfiles, el tiempo de proceso siempre se redondea al siguiente milisegundo, por lo que un proceso que solo tarda 0.1 milisegundos o menos se informa que tarda 1.0 milisegundos y es posible que otros procesos no se muestren en la pila de llamadas.
La creación de perfiles de alta resolución tiene una gran sobrecarga en la VM de JavaScript, por lo que se desactiva de forma predeterminada. Si bien se ve mejor que la resolución normal de generación de perfiles, te recomendamos que solo la uses si realmente necesitas la precisión.
Mejoras en la IU de Herramientas para desarrolladores
Si bien siempre se lanzan elementos nuevos en Canary, queremos que prestemos atención a algunos cambios importantes en la IU: los botones que aparecen en la parte superior de la IU en general, los paneles de información y navegación de Timeline y la reubicación de Anulaciones en el panel lateral de la consola.
Primero, veamos de dónde venimos. Como siempre estamos hablando de Rutas, intentaré matar a las dos primeras aves con un par de capturas de pantalla. Actualmente, esta es la apariencia de Rutas en Chrome (estable):
Ahora, esta es la apariencia de la función Rutas.
Ten en cuenta lo siguiente:
- Las barras de herramientas y los botones ahora están en la parte superior de la pantalla, tanto para los elementos específicos de Timeline a la izquierda como para los generales de Herramientas para desarrolladores a la derecha.
- Los registros de Timeline ahora tienen su estructura de anidación en el panel de la izquierda, y hasta puedes usar el teclado para desplazarte por ellos. Además de usar las teclas de flecha hacia arriba y hacia abajo para desplazarte hacia arriba y abajo, también puedes usar las teclas izquierda y derecha para abrir y cerrar registros anidados.
- Los detalles de la hora ahora se muestran en un panel a la derecha de la entrada que hayas seleccionado. (También puedes colocar el cursor sobre otras entradas para obtener su información).
Ahora, echemos un vistazo al panel lateral de la consola. Para abrir el panel lateral de la consola, presiona Escape desde Herramientas para desarrolladores o el botón del panel lateral de la consola 
, y el panel lateral se desplazará desde la parte inferior.
De forma predeterminada, aparecerán las pestañas Consola y Búsqueda. Para acceder a la funcionalidad antes conocida como "Anulaciones", abre la configuración de Herramientas para desarrolladores y marca la casilla junto a "Mostrar vista 'Emulation' en el panel lateral de la consola". Cierra el cuadro de configuración y aparecerá la pestaña Emulation en el panel lateral de la consola, como se muestra en la siguiente captura de pantalla:
Puedes hacer toda la emulación allí.
El motivo de este cambio es que, antes, tenías que ingresar y salir de la configuración para cambiar las anulaciones de emulación y, luego, volver y ver la página. Ahora puedes cambiar las anulaciones de emulación sin dejar de manipular los estilos.
Lugares de trabajo mejorados
Espacios de trabajo en particular es una función que puede simplificar un poco tu flujo de trabajo de creación y, sin embargo, no recibe tanto ayuda como se merece. Con los espacios de trabajo, en lugar de experimentar y realizar cambios en Herramientas para desarrolladores, y tener que copiar y pegar los cambios en tus archivos fuente, puedes realizar cambios en Herramientas para desarrolladores, verlos en el navegador y guardarlos en una versión local persistente de tus archivos, todo sin salir de Chrome.
Si aún no leíste el artículo Revoluciones de las herramientas para desarrolladores de Chrome 2013, echa un vistazo y vuelve aquí para ver las mejoras en esas funciones en los últimos meses.
Agrega archivos con más facilidad
En la época del artículo de Revolutions 2013, para crear un lugar de trabajo nuevo, se debía agregar la carpeta a los lugares de trabajo y, luego, asignarla a un recurso de red. Simplificamos este proceso a un solo paso: solo debes hacer clic con el botón derecho en el panel izquierdo de Fuentes y seleccionar Agregar carpeta al lugar de trabajo. Se abrirá un diálogo de archivo en el que puedes elegir una carpeta nueva para agregarla a tus lugares de trabajo. (No se agrega la carpeta destacada actualmente a tus lugares de trabajo).
Cómo crear y quitar archivos
Puedes agregar archivos nuevos al directorio local que usas para los lugares de trabajo dentro de los espacios de trabajo. Solo debes hacer clic con el botón derecho en una carpeta en el panel Sources de la izquierda y seleccionar New File.
También puedes quitar archivos de Espacios de trabajo. Haz clic con el botón derecho en un archivo del panel Sources de la izquierda y selecciona Delete File.
También puedes duplicar un archivo. Para ello, selecciona Duplicar archivo.
Actualizar
Ahora que puedes crear archivos nuevos (o borrar archivos) directamente en los espacios de trabajo, el directorio Sources también se actualizará automáticamente y mostrará estos archivos nuevos. De lo contrario, puedes hacer clic con el botón derecho en una carpeta y seleccionar Actualizar en el menú emergente para forzar la actualización.
Esto también es útil si cambias tus archivos abiertos en otro editor y deseas que los cambios se muestren en Herramientas para desarrolladores.
Buscar en diferentes archivos
Definimos mejor la interfaz para la búsqueda en los archivos y ahora también puedes buscar cadenas en todos los archivos de tus lugares de trabajo y en todos los archivos cargados en Herramientas para desarrolladores. Puedes buscar una cadena o una expresión regular, y haremos coincidir cada caso en cada archivo o página. Para buscar varios archivos en los espacios de trabajo (actualmente en Canary), sigue estos pasos:
- Presiona la tecla Escape para abrir el panel lateral de la consola y haz clic en la pestaña Search junto a Console para abrir la ventana Search.
O
Presiona Ctrl + Shift + F (Cmd + Opt + F en Mac) para abrir la ventana de búsqueda.
- Escribe tu consulta en el cuadro Fuentes de búsqueda y presiona Intro. Si tu consulta es una expresión regular o no debe distinguir mayúsculas de minúsculas, haz clic en la casilla correspondiente.
Ignorar listas
Buscar en el texto de archivos o filtrar por nombres de archivo puede ser muy tedioso si tienes muchos archivos .git o README.md que desordenan los resultados.
Por lo tanto, agregamos una función de lista de elementos ignorados a los lugares de trabajo para que puedas excluir ciertos tipos de archivos o carpetas cuando visualices y busques tu lugar de trabajo.
A continuación, te explicamos cómo puedes ver y cambiar la lista de elementos ignorados compartida actual en los espacios de trabajo:
- Abre la Configuración de Herramientas para desarrolladores.
- Haz clic en Workspace.
- En Común, dentro del cuadro Patrón de exclusión de carpeta, puedes ver o editar los patrones.
Realizamos los envíos con estos patrones predeterminados de exclusión global:
Esta regex excluye los metadatos de Git, SVN, Mercurial, archivos de proyectos de Eclipse e IntelliJ, archivos de Papelera y OS X DS_Store, y algunas otras cosas que vale la pena ignorar, como la caché de Sass. Toda su carpeta, incluidos los elementos secundarios, se excluye de la IU para que no aparezca en ella ni cuando se busque en los archivos.
Listas de omisión específicas del lugar de trabajo
Para ser más específicos, también puedes optar por excluir archivos y carpetas dentro de tu espacio de trabajo particular para reducir el desorden en las búsquedas. Las carpetas excluidas tampoco aparecerán en el directorio de fuentes.
Para excluir una carpeta completa de tu lugar de trabajo, haz clic con el botón derecho en la carpeta en el panel de fuentes de la izquierda y selecciona Excluir carpeta. Para ver las asignaciones y las carpetas excluidas de una carpeta de lugar de trabajo determinada, sigue estos pasos:
- Abre la configuración de Herramientas para desarrolladores.
- Haz clic en Workspace.
- Selecciona la carpeta que te interesa.
- Haz clic en Editar y aparecerá la ventana "Editar el sistema de archivos". Puedes agregar o quitar asignaciones o carpetas excluidas de esta ventana.
