DevTools de Chrome evoluciona rápidamente y queremos llamar tu atención a algunas funciones y mejoras nuevas que agregamos a algunos componentes. En particular, hablaremos sobre algunos cambios en la IU, la generación de perfiles de JS de alta resolución y las nuevas funciones de Workspaces.
- El perfilado de alta resolución ahora tiene una precisión de 0.1 milisegundos.
- Las barras de herramientas se elevaron a la parte superior de Devtools 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 creación de perfiles de CPU es una función muy útil para ver qué tan eficiente es tu código JavaScript. Además de las vistas de perfil tradicionales, este verano presentamos un gráfico tipo llama, que representa visualmente el procesamiento de JavaScript de una página a lo largo del tiempo. Se puede usar para ver fácilmente qué tan profunda es tu pila de llamadas y cuánto tiempo tardan en procesarse las funciones individuales.
Hasta hace poco, las representaciones tradicionales de Heavy (de abajo hacia arriba) y de árbol (de arriba hacia abajo), así como el gráfico de llama, solo mostraban procesos con una precisión de hasta 1 millesegundo. Para la mayoría de las aplicaciones, esto está bien. Sin embargo, si estás trabajando en algo en lo que la velocidad es realmente importante en la IU, como un juego, la resolución de 1 milisegundo puede ser demasiado grande para obtener resultados significativos sobre lo que hace que tu sitio sea lento o que tu IU parezca lenta. Para habilitar la generación de perfiles de alta resolución (actualmente, solo en Canary), sigue estos pasos:
- Abre la configuración de DevTools.
- En la pestaña General, en Profiler, activa High resolution CPU profiling.
Este es un ejemplo de un gráfico de llama que se ve en la generación de perfiles normal y con alta resolución, en el que se genera un perfil de carga de la página principal de HTML5Rocks.com:
Con la resolución de perfiles normal, 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 como 1.0 milisegundos, y es posible que otros procesos no se muestren en la pila de llamadas.
La generación de perfiles de alta resolución tiene una gran sobrecarga en la VM de JavaScript, por lo que está desactivada de forma predeterminada. Si bien se ve mejor que la resolución de perfiles normal, te recomendamos que solo la uses si realmente necesitas la precisión.
Mejoras en la IU de Devtools
Si bien siempre se lanzan novedades en Canary, queríamos llamar tu atención a algunos cambios importantes en la IU: los botones que suben a la parte superior de la IU en general, los paneles de información y navegación de Rutas y la reubicación de Anulaciones en el panel lateral de consola.
Primero, veamos de dónde venimos. Como de todos modos estamos hablando de Rutas, intentaré matar dos pájaros de un tiro con un par de capturas de pantalla. Así se ve Rutas en Chrome (versión estable) en este momento:
Así es como se ve Rutas ahora.
Ten en cuenta lo siguiente:
- Ahora, las barras de herramientas y los botones están en la parte superior de la pantalla, tanto para las de Rutas específicas a la izquierda como para las generales de DevTools a la derecha.
- Los registros de Rutas ahora tienen su estructura de anidación en el panel de la izquierda, y puedes usar el teclado para desplazarte por ellos. Además de usar las teclas de flecha hacia arriba y abajo para desplazarte hacia arriba y abajo, también puedes usar las teclas de flecha hacia la izquierda y la 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, veamos el panel lateral de la consola. Para abrir el panel lateral de la consola, presiona Esc desde DevTools o presiona el botón del panel lateral de la consola 
, y el panel se enrollará desde la parte inferior.
De forma predeterminada, verás las pestañas Console y Búsqueda. Para acceder a la funcionalidad que antes se conocía como Anulaciones, abre la configuración de DevTools y marca la casilla junto a "Mostrar la vista "Emulation" en el panel lateral de la consola". Cierra el cuadro de configuración y verás una pestaña Emulation en el panel lateral de la consola, como se muestra en la siguiente captura de pantalla:
Y puedes hacer toda la emulación allí.
El motivo de este cambio es que, antes, debías ingresar y salir de la configuración para cambiar las anulaciones de emulación y, luego, volver y ver tu página. Ahora puedes cambiar tus anulaciones de emulación y, al mismo tiempo, manipular los estilos.
Lugares de trabajo mejorados
Los espacios de trabajo, en particular, son una función que puede simplificar bastante tu flujo de trabajo de autoría y, sin embargo, no recibe tanto amor como se merece. Con los espacios de trabajo, en lugar de experimentar y hacer cambios en DevTools y tener que copiar y pegar los cambios en tus archivos de origen, puedes hacer cambios en DevTools, verlos renderizados 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 Chrome Developer Tools Revolutions 2013, hazlo y, luego, vuelve a esta página para descubrir cómo mejoramos esas funciones en los últimos meses.
Agrega archivos con mayor facilidad
En la época del artículo de Revolutions de 2013, crear un espacio de trabajo nuevo requirió agregar la carpeta a tus espacios de trabajo y, luego, asignarla a un recurso de red. Simplificamos este proceso a un solo paso: Solo haz clic con el botón derecho en el panel izquierdo de Fuentes y selecciona Agregar carpeta al espacio de trabajo. Se abrirá un cuadro de diálogo de archivos en el que podrás elegir una carpeta nueva para agregarla a tus Workspaces. (No agrega la carpeta destacada actualmente a tus espacios de trabajo).
Cómo crear y quitar archivos
Ahora puedes agregar archivos nuevos al directorio local que usas para Workspaces desde Workspaces. Simplemente, haz clic con el botón derecho en una carpeta del panel izquierdo Sources y selecciona New File.
También puedes quitar archivos desde los espacios de trabajo. Haz clic con el botón derecho en un archivo del panel izquierdo Fuentes y selecciona Borrar archivo.
También puedes duplicar un archivo seleccionando Duplicar archivo.
Actualizar
Ahora que puedes crear archivos nuevos (o borrarlos) directamente en los espacios de trabajo, el directorio Fuentes 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 una actualización.
Esto también es útil si cambias los archivos abiertos en otro editor y deseas que los cambios aparezcan en DevTools.
Buscar en todos los archivos
Refinamos un poco la interfaz de búsqueda en archivos y, ahora, también puedes buscar cadenas en todos los archivos de tus espacios de trabajo, así como en todos los archivos cargados en DevTools. Puedes buscar una cadena o una expresión regular, y hacemos coincidir cada ocurrencia en cada archivo o página. Para buscar varios archivos en Workspaces (actualmente en Canary), haz lo siguiente:
- Presiona la tecla Escape para abrir el panel lateral de la consola y haz clic en la pestaña Búsqueda junto a Consola para abrir la ventana de Búsqueda.
O
Presiona Ctrl + Shift + F (Cmd + Opt + F en Mac) para abrir la ventana de búsqueda.
- Escribe tu búsqueda en el cuadro Fuentes de búsqueda y presiona Intro. Si tu consulta es una expresión regular o no distingue mayúsculas de minúsculas, haz clic en la casilla correspondiente.
Listas de elementos ignorados
Buscar en el texto de los archivos o filtrar por nombres de archivos 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 Workspaces para que puedas excluir ciertos tipos de archivos o carpetas cuando veas y busques en tu espacio de trabajo.
Sigue estos pasos para ver y cambiar la lista de elementos omitidos compartida actual en Workspaces:
- Abre la Configuración de las Herramientas para desarrolladores.
- Haz clic en Lugar de trabajo.
- En Comunes, dentro del cuadro Patrón de exclusión de carpetas, puedes ver o editar los patrones.
Enviamos con estos patrones de exclusión globales predeterminados:
Esta regex excluye los metadatos de Git, SVN, Mercurial, los archivos de proyecto de Eclipse y IntelliJ, los archivos OS X DS_Store y Trash, y algunas otras cosas que vale la pena ignorar, como la caché de Sass. Toda la carpeta, incluidas las carpetas secundarias, se excluyen de la IU para que no aparezcan en ella ni cuando se busquen archivos.
Listas de elementos ignorados específicas del lugar de trabajo
Para ser más específico, también puedes excluir archivos y carpetas dentro de tu espacio de trabajo en 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 espacio de trabajo, haz clic con el botón derecho en la carpeta del panel izquierdo Fuentes y selecciona Excluir carpeta. Para ver las asignaciones y las carpetas excluidas de una carpeta de espacio de trabajo determinada, haz lo siguiente:
- Abre la configuración de DevTools.
- Haz clic en Lugar de trabajo.
- Destaca la carpeta que te interesa.
- Haz clic en Editar y aparecerá la ventana "Editar sistema de archivos". En esta ventana, puedes agregar o quitar asignaciones o carpetas excluidas.
