Categorías: Labs

Herramientas para desarrolladores: Episodio 27- Editar como HTML, Codemirror y más

Este artículo es una traducción del original publicado en el blog de Mozilla Hacks.

Firefox 27 se encuentra actualmente en el canal Aurora, lo que significa que estamos de vuelta para mostrar las nuevas características en las herramientas de desarrollador de Firefox. A continuación, veremos algunas de ellas. También puedes ver la lista completa de bugs resueltos en las herramientas para esta versión.

Depurador Javascript: Frenar ante eventos del DOM

Ahora puedes frenar automáticamente ante distintos eventos del DOM sin necesidad de establecer un punto de control de forma manual, como se puede ver en este video. Para hacerlo, haz click en el botón ‘Expandir paneles’ ubicado en la parte superior derecha del panel del depurador (justo al lado de la caja de búsqueda). Luego selecciona la pestaña de eventos. Haz click en el nombre de un evento para pausar automáticamente la próxima vez que ocurra. Esto solo muestra los eventos que actualmente poseen un listener asociado a él desde tu código. Si haces click en una de las cabeceras, como “Ratón” ó “Teclado”, serán mostrados todos los eventos relevantes.

Mejoras al inspector

Hemos escuchado el feedback de los desarrolladores web e hicimos varias mejoras al Inspector:

Editar como HTML

Ahora en el inspector, puedes realizar click derecho sobre un elemento y abrir un editor que te permite especificar el outerHTML de un elemento, como se muestra en este video.

Seleccionar el formato de color por defecto

Ahora tienes una opción para seleccionar el formato de color por defecto en el panel de opciones:

formato-de-color

Previsualización de colores

Las herramientas de desarrollo ahora ofrecen previsualizaciones de colores que se muestran en la vista de reglas:

Previsualizacion de colores

Previsualización para las URL de imágenes de fondo

Algo muy solicitado, ahora ofrecemos previsualización para las URL de imágenes de fondo:

vista-previa-de-imagenes

Además de estas mejoras, los elementos mutados del DOM ahora son resaltados en el inspector.

Mantenete alerta para más novedades muy pronto, ¡y siéntete libre de avisarnos si hay alguna característica que te gustaría ver!

Codemirror

Codemirror es un editor de código basado en HTML5 muy popular que se usa en sitios web. Es altamente modificable y soporta temas. Las herramientas de desarrollador de Firefox ahora usan Codemirror en varios lugares: editor de estilos, depurador, inspector (cuando editas como HTML) y el borrador.

Desde el panel de opciones, puedes seleccionar qué tema usar (oscuro o claro).

dev-tools-themes

Consola web: logging de repintados

Cuando la estructura (layout) es invalidada (por cambios de DOM o CSS), Gecko necesita recalcular la posición de algunos nodos. Este cálculo no ocurre inmediatamente. Es disparado por varias razones. Por ejemplo, si haces node.clientTop, Gecko necesita hacer este cálculo. Esto se llama un “repintado” (reflow). Los repintados son costosos. Evitar repintados es importante para el desempeño de los sitios.

Para habilitar el logging de repintados, marca la opción “Log” bajo el menú “CSS” en la pestaña Consola. Ahora, cada vez que ocurra un repintado, un log será impreso con el nombre de la función JavaScript que lo disparó (si fue causado por el JS).

dev-tools-reflow-loggingEso es todo por ahora. ¡Esperamos que te gusten las nuevas mejoras!

The following two tabs change content below.
Desarrollador web interesado en la web abierta y (desarrollo de) videojuegos.