WebIDE, Inspector de almacenamiento, eventos de jQuery, cambio de iframe y más en Firefox 34

19 noviembre, 2014 4:02 por

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

Un nuevo conjunto de herramientas de desarrollo de Firefox Developer han sido agregadas al canal beta. Estas funcionalidades están disponibles actualmente en lo que será la versión 34 del navegador, a ser liberado en noviembre. Este lanzamiento tendrá una nueva serie de herramientas (inspector de almacenamiento, WebIDE), un Analizador renovado, y varias mejoras a las funcionalidades existentes:

WebIDE

WebIDE, una nueva herramienta para desarrollo de aplicaciones dentro del navegador, será activado por defecto en ésta versión. WebIDE te permite crear una nueva aplicación de Firefox OS (que es solo una web app) desde una plantilla, o abrir el código de una aplicación creada previamente. Desde allí puedes editar los archivos aplicación, te encuentras a un clic de ejecutar la aplicación en el simulador y estás a un paso para depurarla con las herramientas de desarrollo. Para abrirlo, selecciona la opción de Abrir WebIDE desde el menu de “Desarrollador web” de Firefox. (leer más documentación)

Vídeo sobre WebIDE.

Inspector de almacenamiento

Ahora hay un nuevo panel desarrollado principalmente principalmente por Girish Sharma, que muestra los datos que tu página ha almacenado en cookies, localStorage, sessionStorage, e IndexedDB. Activa el panel de Almacenamiento al hacer clic la pestaña de Configuración > “Herr. desarr. Predeterminadas” > “Almacenamiento”. Entonces el panel se debe mostrar con la información de almacenamiento pero en modo de solo lectura, pues la habilidad para editar está planeada para un futuro cercano. (mas documentación) (notas de desarrollo) (solicitud en UserVoice)

Inspector de almacenamiento

Eventos de jQuery

El cuadro desplegable en el Inspector ahora soporta jQuery. Esto significa que se mostrará la función personalizada adjunta, por ejemplo,jQuery.on(), y no la función implementada por jQuery. Puedes leer el artículo original en inglés para mayor información y como agregar soporte para tu framework preferido. (notas de desarrollo)

Eventos de jQuery

Cambio de iframe

Cambia el marco (frame) que estás depurando utilizando un nuevo menú de selección de marco. Seleccionando un marco hará que todas las herramientas depuren ese marco, incluyendo el Inspector, Console, y Debugger. Agrega el botón de selección de marco al chequear la opción en el panel de Configuración > “Botones en las cajas de herramientas” > “Seleccionar un marco”. (documentación) (notas de desarrollo)(solicitud en UserVoice)

Cambio de marcohttps://www.youtube.com/watch?v=Me9hjqd74m8

Mejoras al analizador (profiler)

Se ha renovado el analizador de JavaScript que aparece en la pestaña de “Rendimiento” (anteriormente la pestaña “Analizador”). Entre las novedades del analizador están la línea de tiempo para mostrar cuadros por segundos y categorías para cuadros como “red y “gráficos”. (documentación) (notas de desarrollo)

Analizador mejorado

console.table()

Añade una llamada a console.table() en cualquier parte de tu JavaScript para registrar data a la consola utilizando una vista como de las tablas. Registra cualquier objecto, arreglo, Mapa, o un conjunto (Set). Ademas, puedes ordenar las columnas al hacer clic en su respectivo encabezado. (docs) (notas de desarrollo)

console.table()

Pre-visualización del selector

Pasar el cursor por encima de un selector CSS en el Inspector o Editor de Estilos para resaltar todos los nodos que coinciden con el selector en la página. (notas de desarrollo)

selector-preview

Otras menciones

  • Persistencia de la Consola divida – La consola divida (que se abre al presionar ESC) ahora se abrirá con las herramientas si la tenías abierta la última vez que se cerraron las herramientas de desarrollo. (notas de desarollo)
  • Web audio – conexiones de AudioParam – el editor de Audio Web ahora visualiza conexiones de AudioNodes a AudioParams. (notas de desarrollo)

Finalmente, agradecemos a los 41 contribuyentes que agregaron todas las funcionalidades y arreglos en este lanzamiento.

Escribe un comentario, cuenta tu ideas a @FirefoxDevTools en Twitter, o puedes proponer cambios en el canal de retroalimentación de las Herramientas de Desarrollo. Si te gustaría ayudar, chequea la guía para participar.

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.

Compartir artículo:

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Armada alucinante »
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa