Hola a todos. En la última edición del Resumen de Herramientas para desarrolladores, pudimos revisar las potentes pilas de llamadas asíncronas y algunas otras. 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 recursos según ciertos campos, como Dominio. Este es un formato de filtro: Domain:website.com. Además del filtrado, también obtienes sugerencias de autocompletar para valores de filtro válidos que se actualizan en tiempo real a medida que escribes tu consulta. Esto puede resultarte útil cuando necesitas encontrar todos los recursos entregados por un dominio en particular. [crbubg.com/258421].
Edita el contenido de Shadow DOM
Herramientas para desarrolladores siempre pudo editar HTML normal en el panel Elementos; estas capacidades ahora se extienden a elementos que forman parte de un Shadow DOM. [crbug.com/348991].
Actualiza a CodeMirror 4.0
CodeMirror, el editor de texto basado en JavaScript que se usa como parte del panel Sources, se actualizó a la versión 4. Como resultado de esto, se agregaron muchas 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
Cuando se registran mensajes en una sucesión rápida, puede ser útil ver la hora exacta en la que se registra un mensaje. Puedes habilitar esta función a través de Experimentos de Herramientas para desarrolladores. [crbug.com/131714].
Desglose de estadísticas de memoria para instantáneas de montón
Al ver una instantánea del montón registrada, observa el gráfico circular flexible que ofrece una descripción general visual, codificada por colores, sobre qué aspecto de JavaScript consume la mayor cantidad de memoria. Actualmente es una función experimental. Habilita "Estadísticas de instantáneas de montón" para probarla. [crbug.com/346335].
Ve la fuente original de un console.log, no la versión unida
Es probable que tengas una función wrapper console.log, pero desafortunadamente, en la consola, todos tus mensajes provienen de algo como util.js:46. Ahora puedes hacer que Herramientas para desarrolladores resuelva tus ubicaciones originales. Ingresa el archivo que une los mensajes de registro de la consola en el cuadro de entrada “Skip steping across sources with particular names” (Omitir paso por fuentes con nombres particulares) para 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].
Otras incorporaciones pequeñas pero poderosas
Actualiza el panel Event Listeners en el panel Elements después de agregar o quitar de forma dinámica objetos de escucha de eventos de JavaScript. [crbug.com/341044].
Puedes usar
Ctrl+para enfocarte en la entrada de la consola. Esto puede resultarte útil para un flujo de trabajo de solo teclado en las Herramientas para desarrolladores. [crbug.com/144943].Se actualizaron las sugerencias de autocompletado de estilo de borde para los valores (punteado, discontinuo, doble, con ranura) a fin de que coincida con la especificación. [crbug.com/349998]
Se agregó el botón Restore default and reload **al panel Settings, que hace exactamente lo que se indica en el molde. [crbug.com/135451].
Actualmente es una función experimental. Puedes probar el conector a la izquierda para descubrir su idoneidad para tu flujo de trabajo. Los otros modos de diseño son acoplar a la ventana principal (derecha o inferior) y desconectarla en una ventana independiente. [crbug.com/134282].
"wheel" ahora se ofrece como un punto de interrupción de objeto de escucha de eventos, además de los eventos habituales de clic, mousemove, mousedown, etc. [crbug.com/347562].
Eso es todo por ahora. ¡Gracias por leer!