Categorías: Labs

Mejoras al inspector, la caja de herramientas y al borrador de código

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

Con la llegada de Firefox 32 al canal beta, se incluyen varios cambios a las herramientas de desarrollo, así que vamos a observarlas. Pero antes, agradecemos a todas las 41 personas que contribuyeron con parches para este lanzamiento de las herramientas. Aquí hay una lista de los bugs que fueron resueltos para Firefox 32.

Caja de herramientas

Empezaremos con una lista de funcionalidades sugeridas en el canal de UserVoice que estamos probando.

Las dimensiones de los nodos ahora se muestran en la barra de modelo de caja (box model). Al igual de como funcionan otras herramientas, puedes ver fácilmente las dimensiones del nodo resaltado, directamente desde la barra de información (notas de desarrollo y solicitud en UserVoice).

Dimensiones en la barra

El boton de ‘Elegir un elemento de la página’ ahora está más cerca de la pestaña del Inspector para que sea más fácil navegar entre ellos. Consejo: también puedes usar los accesos directos Ctrl+Shift+C o Cmd+Opt+C desde el teclado para hacer lo mismo (notas de desarrollo y solicitud en UserVoice).

Inspeccionar elemento

Ahora existe un botón del comando de captura completa de la página. Después de activar este botón, solo presiónalo y tomará una captura que aparecerá en tu carpeta de descargas (notas de desarrollo).

Botón de captura

Una demostración animada de la captura de la pantalla se puede observar a continuación:

Toma de captura

Nuevas imágenes están siendo usadas en la interfaz de las herramientas de desarrollo, para soportar pantallas con alta densidad de píxeles (HiDPI), para que la interfaz luzca mejor en estos dispositivos. ¡Gracias a nuestro contribuyente Tim Nguyen por su gran trabajo en estos cambios! (notas de desarrollo).

Editor de Audio Web

Uniéndose al editor de sombras (shader) y el depurador de canvas, el editor de Audio web es una nueva herramienta que ha aterrizado en Firefox 32. Después de activarlo en el panel de opciones, puedes inspeccionar el gráfico de AudioContext y modificar propiedades en los nodos de audio (AudioNodes). Te recomendamos mirar la entrada en Mozilla Hacks sobre la introducción del editor de audio web para mayor información sobre esta herramienta.

Herramienta de WebAudio

Inspector

Los estilos del navegador (user agent) pueden mostrarse en el inspector. Puesto que estos estilos por defecto pueden interactuar con los estilos de tus páginas, es útil verlos. Esto se puede activar desde el panel de configuración, y existe más documentación sobre esta característica en MDN (notas de desarrollo y solicitud en UserVoice).

Estilos de navegadorOpción de estilos de navegador

Los nodos ocultos ahora se muestran diferente de los nodos visibles en la pestaña del inspector (notas de desarrollo y solicitud en UserVoice).

inspector-hidden-nodes

Las fuentes web (web fonts) ahora son previsualizadas dentro del inspector de fuentes. Cuando se pasa el cursor por encima de definición de fuentes, observarás la fuente aplicada al cuadro de sugerencia (incluyendo cualquier fuente web) (notas de desarrollo).

Cuadro de fuente web

Ahora hay la opción ‘Pegar HTML externo’ (outerHTML) en el menú contextual de los nodos, en la pestaña de inspector (notas de desarrollo y solicitud de UserVoice).

Borrador

Ahora hay autocompletado de código con inferencias de tipo para JavaScript. Puedes abrir una lista de sugerencias en tu posición actual con Ctrl + Espacio, escribe código y para mostrar la información sobre el tipo del símbolo actual presiona Shift+Espacio. Esto es realizado gracias al excelente motor de análisis de código tern (notas de desarrollo).

Autocompletado borrador

Información de tipo en el borrador

¿Tienes ideas, reporte de bugs, solicitud de características o preguntas? Como siempre, puedes agregar/votar por ideas en UserVoice o involucrarte con el equipo de @FirefoxDevTools en Twitter.

The following two tabs change content below.
Colaborador de Mozilla Venezuela e Hispano en las áreas de desarrollo y medios sociales, entre otros. También soy desarrollador Web, Skateboarder, Profesor universitario, jugador de Playstation y PC, usuario Linux, Blogger, Geek, entre otros.