Hola a todos. En la última edición del Resumen de Herramientas para desarrolladores, pudimos ver las poderosas pilas de llamadas asíncronas y algunas más. En esta edición, veremos un filtrado de Network Panel mejorado (con autocompletado), capacidades de edición con contenido de Shadow DOM, actualizaciones de CodeMirror 4 y mucho más.
Filtrado del panel de red
Ahora puedes filtrar los recursos por ciertos campos, como Dominio. Un formato de filtro es el siguiente: Domain:website.com. Además de filtrar, también obtienes sugerencias de autocompletado para valores de filtro válidos que se actualizan en tiempo real a medida que escribes tu consulta. Esto puede resultarte útil cuando necesites encontrar todos los recursos que entrega un dominio en particular. [crbubg.com/258421]
Edita el contenido de Shadow DOM
DevTools siempre pudo editar HTML normal en el panel Elements, y estas funciones ahora se extienden a los elementos que forman parte de un Shadow DOM. [crbug.com/348991]
Actualización a CodeMirror 4.0
CodeMirror, el editor de texto basado en JavaScript que se usa como parte del panel de fuentes, se actualizó a la versión 4. Como resultado, se agregaron varias funciones nuevas. crbug.com/356878]
Búsqueda rápida de una propiedad CSS
Ahora puedes buscar nombres de propiedades, valores o selectores de reglas desde el nuevo cuadro de búsqueda en el panel Estilos. Los resultados se destacan en tiempo real a medida que escribes tu consulta. [crbug.com/278852]
Marcas de tiempo junto a los mensajes de la consola
Al registrar mensajes en una sucesión rápida, puede ser útil ver el momento exacto en el que se registra un mensaje. Puedes habilitar esta opción a través de Experiments de DevTools. [crbug.com/131714]
Desglose de las estadísticas de memoria para las instantáneas del montón
Cuando veas una instantánea del montón registrada, observa el gráfico de tarta de estadísticas, que proporciona una descripción general visual con código de colores sobre qué aspecto de JavaScript consume más memoria. Actualmente, es una función experimental. Habilita "Estadísticas de instantáneas del montón" para probarla. [crbug.com/346335]
Cómo ver la fuente original de un console.log, no la versión unida
Es probable que tengas una función de wrapper console.log, pero, lamentablemente, en la consola, todos tus mensajes provienen de algo como util.js:46. Ahora puedes hacer que DevTools resuelva tus ubicaciones originales. Ingresa el archivo que une los mensajes de registro de la consola en la casilla de entrada “Omitir las fuentes con nombres específicos” para hacer que Herramientas para desarrolladores lo incluya en la caja negra y luego muestre la verdadera fuente de una instrucción de registro. [crbug.com/231007]
Algunas incorporaciones más pequeñas, pero potentes
Actualiza el panel Event Listeners en el panel Elements, después de agregar o quitar dinámicamente objetos de escucha de eventos de JavaScript. [crbug.com/341044]
Puedes usar
Ctrl+para enfocar la entrada de la consola. Esto puede ser útil para un flujo de trabajo solo con el teclado en DevTools. [crbug.com/144943]Se actualizaron las sugerencias de autocompletado de estilo de borde para los valores (punteado, discontinuo, doble, ranura) para que coincidan con las especificaciones. [crbug.com/349998]
El botón Restablecer valores predeterminados y volver a cargar **se agregó al panel de configuración, que hace exactamente lo que dice en la lata. [crbug.com/135451]
Actualmente, es una función experimental. Puedes probar la opción Activar a la izquierda para descubrir si es adecuada para tu flujo de trabajo. Los otros modos de diseño son anclar a la ventana principal (derecha o inferior) y desconectarla en una ventana separada. [crbug.com/134282]
"wheel" ahora se ofrece como un punto de interrupción de objeto de escucha de eventos, esto se suma a los eventos habituales de clic, mousemove, mousedown, etc. [crbug.com/347562]
Eso es todo por ahora. Gracias por leer.