Pseudo elementos, inspección de promesas, cabeceras sin procesar y mucho más – Firefox Developer Edition 36 « Mozilla Hispano

Pseudo elementos, inspección de promesas, cabeceras sin procesar y mucho más – Firefox Developer Edition 36

25 enero, 2015 3:09 por AngelFQC

desarrollo dev tools herramientas de desarrollo javascript labs

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks. Traducción por Sergio Carlavilla Delgado

Firefox 36 fue subido al canal Developer Edition, así que vamos a echar un vistazo a los cambios más importantes de las Herramientas de Desarrollo en está versión. También cubriremos algunos cambios desde que Firefox 35 fue liberado poco antes del anuncio inicial de Developer Edition. Hay mucho que hablar, así que vamos con ello.

Inspector

Ahora podrás inspeccionar los pseudo elementos ::before y ::after. Estos se comportarán como otros elementos en el árbol de marcado y en la barra lateral del inspector. (35, notas de desarrollo).

Hay una nueva opción “Mostrar propiedades del DOM” en el menú contextual en el árbol de marcado. (35, notas de desarrollo, documentación acerca de esta característica en MDN).

El marcador del modelo de caja ahora funciona en objetivos remotos, así que hay un marcador con todas las funciones incluso cuando se trabaja con páginas en Firefox para Android o aplicaciones en Firefox OS. (36, notas de desarrollo, y documentación técnica para la construcción de tu propio marcador personalizado).

El contenido del DOM oculto es ahora visible en el árbol de marcado; ten en cuenta que tendrás que establecer dom.webcomponents.enabled a true para probar esta característica (36, notas de desarrollo, y mira el bug 1053898 para saber más del trabajo en este área).

Pedimos prestada una característica muy útil de Firebug y ahora están permitidas más opciones de pegado cuando pulsamos el botón derecho del ratón sobre un nodo del árbol de marcado. (36, notas de desarrollo, documentación sobre esta característica en la MDN).

Algunos cambios más al Inspector incluidos en Firefox 35 y 36:

Al eliminar un nodo, ahora se selecciona el hermano anterior en lugar del padre (36, notas de desarrollo).
Hay un mayor contraste sobre el nodo en el cual tenemos el cursor actualmente en la vista de marcado (36, notas de desarrollo).
Al pasar el ratón sobre un selector CSS en la vista computada se resaltarán todos los nodos que coinciden con ese selector en la página. (35, notas de desarrollo).

Depurador / Consola

DOM Promises ahora son inspeccionables. Ahora puedes inspeccionar el estado y el valor de las promesas en cualquier momento. (36, notas de desarrollo).

Ahora el Depurador reconoce y trabaja con las fuentes resultantes de eval. (36, notas de desarrollo).

Las fuentes resultantes de eval soportan la sintaxis //# sourceURL=path.js, lo que las hará parecer como un archivo normal en el depurador y en la pila de registro serán reportados por Error.prototype.stack. Ver este artículo: http://fitzgeraldnick.com/weblog/59/ para más información (36, notas de desarrollo, más notas de desarrollo).

Las sentencias en la Consola ahora incluyen el número de columna a partir de las cuales se originaron. (36, notas de de desarrollo).

WebIDE

Ahora podrás conectarte a Firefox para Android desde WebIDE. Consulta la documentación para depuración de Firefox para Android en MDN (36, notas de desarrollo).

Hemos realizado algunos cambios para mejorar la experiencia del usuario en WebIDE:

Muestra las herramientas de desarrollo por defecto cuando se selecciona una aplicación en el entorno de ejecución (35, notas de desarrollo).
Vuelve a seleccionar el proyecto en conexión si el último proyecto es la aplicación en el entorno de ejecución (35, notas de desarrollo).
Selecciona automáticamente y conecta la última aplicación en el entorno de ejecución si está disponible. (35, notas de desarrollo).
Cambio del tamaño de la fuente (36, notas de desarrollo).
Ahora puedes añadir un proyecto de aplicación alojada introduciendo la URL base (por ejemplo: “http://example.com”) en vez de requerir la ruta completa al fichero manifest.webapp (35, notas de desarrollo).

Monitor de red

Hemos añadido una vista plana para las solicitudes/respuestas de las cabeceras para que sea más fácil de ver y copiar las cabeceras sin procesar de la respuesta en una petición (35, notas de desarrollo).

Aquí está la lista de todos los bugs corregidos para Firefox 35 y todos los bugs corregidos en Firefox 36.

¿Tienes comentarios, reporte de bugs, peticiones de características o preguntas? Como siempre, puedes comentar aquí, agregar/votar por las ideas en UserVoice o ponerte en contacto con el equipo en @FirefoxDevTools en Twitter.