Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

WebIDE está disponible desde Firefox 34 en adelante.

También puede habilitarlo en Firefox 33, modificando una opción: Visite about:config, encuentre la opción llamada devtools.webide.enabled y cambie su valor a true.

WebIDE es el sustituto de App Manager. Al igual que App Manager, este permite ejecutar y depurar aplicaciones Firefox OS  utilizando el Firefox OS Simulator o un dispositivo Firefox OS real.

Además, proporciona un entorno de edición para crear y desarrollar aplicaciones para FireFox OS, incluye una vista de árbol jerárquica de todos los archivos de la aplicación con la posibilidad de editarlos y grabar los cambios realizados, y también dos plantillas de aplicación para ayudar a comenzar a desarrollar.

Por último, WebIDE le permite conectarse a Firefox Developer Tools (Herramientas de Desarrollo Firefox) a otros navegadores, incluyendo Firefox para Android, Chrome para Android, y Safari para iOS. Vea la página de Remote Debugging (Depuración Remota) para instrucciones de como conectar con un navegador específico.

Con WebIDE, primero configura uno o varios runtimes. Un runtime es un entorno en el que podrás ejecutar y depurar la aplicación. Un runtime podría ser un dispositivo Firefox OS conectado al escritorio a través de USB, o podría ser un Simulador de Firefox OS instalado en el propio escritorio.

Luego, cree una aplicación, o abra una aplicación existente. Si está creando una nueva aplicación, empiece con una plantilla que incluya la estructura y el contenido mínimo que necesita para empezar, o una plantilla más completa que muestre cómo utilizar una API privilegiada. WebIDE muestra los archivos de su aplicación en un árbol, que se pueden editar y guardar usando su editor de código incorporado. Por supuesto, usted no tiene que utilizar el editor integrado: puede desarrollar su aplicación completamente fuera del WebIDE, y sólo utilizarlo para la depuración.

Finalmente, puede instalar la aplicción en uno de los runtimes y ejecutarla. Usted puede abrir la suite de herramientas para desarrolladores - el Inspector, la Consola, el JavaScript Debugger (Depurador de JavaScript), etc. - para examinar y modificar la aplicación en ejecución.

Requisitos del Sistema

Para desarrollar y depurar aplicaciones utilizando la WebIDE, todo lo que necesita es Firefox versión 33 o posterior. Para hacer pruebas en un dispositivo de Firefox OS real, necesita un dispositivo que ejecute Firefox OS 1.2 o posterior, y un cable USB.

Sólo se puede utilizar el WebIDE si usted está pensando en Firefox OS 1.2 o posterior.

Ejecutando WebIDE

Hay tres maneras de abrir WebIDE:

  • En el menú Web Developer (Desarrollador Web), haga clic en "WebIDE" y éste se abrirá.
  • Use la combinación de teclas Shift-F8.
  • Un ícono para tales efectos está disponible en la Barra de Herramientas de Firefox. Este siembre es visible si se está usando Firefox Developer Edition (Firefox Edición Desarrollador), y con cualquier Firefox versión 36 o superior aparece después de que haya abierto el WebIDE al menos una vez:

Así es como luce WebIDE:El menú desplegable de la izquierda con la etiqueta "Abrir aplicación" (Open App) le permite abrir aplicaciones existentes o crear otras nuevas. El menú desplegable de la derecha con la etiqueta "Seleccionar Runtime" (Select Runtime) le permite seleccionar un runtime o configurar uno nuevo.

Los botones en el medio ejecutan, detienen, y depuran la aplicación: sólo se activan cuando se ha abierto una aplicación y se selecciona un runtime.

Desde Firefox versión 36, puede cambiar el tamaño de la fuente de todo el WebIDE usando los atajos de teclado estándares (Use Command en vez de Control en OS X):

  • Ctrl +  aumenta el tamaño de la fuente
  • Ctrl -  disminuye el tamaño de la fuente
  • Ctrl 0  vuelte el tamaño de la fuente al valor por defecto

Configurando runtimes

En el el menú desplegable "Seleccione Runtime", los rumtimes se agrupan en tres tipos:

  • Dispositivos USB: Dispositivos con sistema operativo Firefox conectados a través de USB.
  • Simuladores: instancias del simulador Firefox OS que ha instalado.
  • Personalizado: úselo para conectarse a la WebIDE utilizando un nombre arbitrario y el puerto.

La primera vez que hace clic en el menú desplegable, es posible que no vea los runtimes aquí:

El resto de esta sección describe cómo se pueden agregar algunos runtimes.

Conectando un dispositivo Firefox OS

Antes de conectar un dispositivo Firefox OS, algunas configuraciones que debes revisar:

  • revisar la versión Firefox OS: asegurar que tu dispositivo tiene Firefox OS 1.2/Boot2Gecko 1.2 o superior. Para revisar la versión, ir a configuracion de app del dispositivo, luego Device Information > Software. Si no tiene la última actualización, busca tu dispositivo en  guia del desarrollador y sigue las instrucciones de actualizacion.
  • habilitar depuracion remota: en la configuracion de app del dispositivo, ir a Device information > More information > Developer.
    • Firefox OS 1.3 y anteriores: "Depuración Remota" es una simple casilla. Confirmalo.
    • Firefox OS 1.4 y superiores: "Depuración Remota" le pedirá habilitar ADB, o ADB y DevTools. Seleccionar "ADB y DevTools".
  • deshabilitar el bloqueo de pantalla en el dispositivo: en la configuracion de app del dispositivo, vaya a Screen Lock y desmarcar el Lock Screen checkbox. es una buena idea porque cuando la pantalla se bloquea, la conexion del teléfono se pierde, esto significa que no esta disponible para depuración.
  • si tu quieres depurar aplicaciones, incluyendo aplicaciones presintaladas: revisar la sección depurando apps certificadas .

Solo Linux :

Solo Windows:

Si existe otro dispositivo Android conectado a tu ordenador, desconectelo(s). Ahora conecta el dispositivo al ordenador mediante el USB. Tu podrás ver que tu dispositivo aparecer bajo "USB DEVICES":

Si no visualizas el dispositivo, dirigete a la página Solucionador de problemas.

Añadiendo un Simulador

The Firefox OS Simulator is a version of the higher layers of Firefox OS that simulates a Firefox OS device, but runs on the desktop. It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.

Esto significa que en muchos casos, no necesitas un dispositivo real para probar y depurar su app.

The Simulator is big, so it doesn't ship inside Firefox but as a Firefox add-on. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.

Lo puede instalar tantas veces como quieras. Sea paciente: el Simulador es grande y puede llevar unos minutos para descargarlo. Una vez ha instalado algunos Simuladores, puede cerrar la ventana de "Componentes Extra", y los simuladores que ha instalado aparecerán como opciones en el menú desplegable del runtime.

Para aprender más sobre el Simulador, mire su página de documentación.

Runtimes personalizados

Con un runtime personalizado puede usar on nombre de host un un puerto arbitrario para conectarte a un dispositivo remoto.

Bajo el capó, los dispositivos con el SO Firefox y Android se conectan al escritorio llamado Android Debug Bridge (Puente de Depuración Android), o ADB. Por defecto, el WebIDE usa un complemento llamado ADB Helper: esto simplifica el proceso para usted, puesto que instala el ADB y configura un puerto para que el escritorio de herramientas de Firefox pueda intercambiar mensajes con el dispositivo.

Esto es conveniente en la mayoría de casos, pero a veces querrá usar el ADB fuera del WebIDE: por ejemplo, podría estar usando el ADB directamente desde línea de comandos. En ese caso, se conectará al dispositivo especificando un host y puerto, usando el  comando adb forward.

Si, entonces, quiere conectar el WebIDE también, deberías desactivar el complemento ADB Helper y conectar el WebIDE usando la opción de Runtime personalizado, introduciendo el host y puerto ue has pasdo a adb forward.

Also, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. See more about connecting to Firefox for Android using ADB.

Seleccionando un runtime

Una vez haya configurado un runtime, puede seleccionarlo usando el menú "Select Runtime" (Seleccionar runtime).

  • Si selecciona un Simulador, el WebIDE inicia el Simulador.
  • Si selecciona un dispositivo con SO Firefox, el WebIDE se conecta al dispositivo. En el dispositivo, un diálogo le preguntará si confirma la conexión: presione "OK".

Ahora el botón "play" en el centro de la barra de herramientas del WebIDE está habilitado: clícalo para instalar y ejecutar la app en el runtime seleccionado.

Acciones de los runtime

Cuando un runtime es seleccionado, el menú desplegable de Runtimes tendrá tres objetos extras:

  • Información del Runtime: información del runtime actual.
  • Tabla de permisos: una tabla ordenando permisos de la app para el runtime utilizado, indicando, para cada API y tipo de app, si el acceso está permitido (✓), denegado (✗), o si se le pide al usuario (!).
  • Captura de pantalla: un comando para sacar captura de pantalla desde el runtime.

Creando y abriendo apps

En el menú "Open App" (Abrir App) tiene tres opciones: crear una nueva app, abrir una app empaquetada y abrir una app como anfitrión.

Crear una nueva app

Seleccione "New App..." (Nueva App...) para crear una nueva app. Verá una ventana ofreciéndole dos opciones de plantillas, "App Privilegiada y vacía" y "App Privilegiada".

Ambas plantillas son de la colección de plantillas para apps de Mozilla, y le proporcionan la estructura básica que necesita para empezar. La "App Privilegiada" muestra cómo una app puede usar permisos para cargar contenido cross-origin.

Una vez haya seleccionado una plantilla, deberá poner un nombre a la app y seleccionar un directorio para guardar los archivos, y luego la app será abierta en el editor de proyectos.

Abrir una app empaquetada

Seleccione "Open a Packaged App..." (Abrir una app empaquetada) para abrir una app empaquetada. Deberá seleccionar un directorio que contenga el  manifiesto de la app, y esta se abrirá en el editor de proyecto.

Abrir una app alojada

Seleccione "Open Hosted App..." (Abrir una app alojada) para abrir una app alojada. Deberá introdducir la URL apuntando al manifiesto de la app, y esta se abrirá en el editor de proyecto

Editando apps

El editor de proyecto proporciona un entorno para edición de apps. Hay una visión en arbol a la izquierda con todos los archivos en la app: puedes añadir y borrar archivos usando un menú contextual. Hay un panel de editor a la derecha.

La página sumario de la app

Cuando por primera vez abra una app, el panel del editor estará ocupado por la página sumario de la app, mostrada debajo:

Puede volver siempre a la página de sumario de la app clicando en la raíz del árbol en la izquierda.

Validación del manifiesto

WebIDE automáticamente comprueba el manifiesto por algunos problemas comunes. Si encuentra algún problema, indicará que la app es inválida, y describirá el problema en el sumario de la app.

Por supuesto, puede editar el archivo manifest.webapp directamente en el editor de proyecto.

El editor fuente

WebIDE usa el editor fuente CodeMirror.

Atajos de teclado del editor fuente

This table lists the default shortcuts for the source editor.

In the Editor Preferences section of the developer tools settings, you can choose to use Vim, Emacs, or Sublime Text key bindings instead.

To select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting. If you do this, the selected bindings will be used for all the developer tools that use the source editor. You need to reopen the editor for the change to take effect.

From Firefox 33 onwards, the key binding preference is exposed in the Editor Preferences section of the developer tools settings, and you can set it there instead of about:config.

Command Windows OS X Linux
Go to line Ctrl + J Cmd + J Ctrl + J
Find in file Ctrl + F Cmd + F Ctrl + F
Find again Ctrl + G Cmd + G Ctrl + G
Select all Ctrl + A Cmd + A Ctrl + A
Cut Ctrl + X Cmd + X Ctrl + X
Copy Ctrl + C Cmd + C Ctrl + C
Paste Ctrl + V Cmd + V Ctrl + V
Undo Ctrl + Z Cmd + Z Ctrl + Z
Redo Ctrl + Shift + Z / Ctrl + Y Cmd + Shift + Z / Cmd + Y Ctrl + Shift + Z / Ctrl + Y
Indent Tab Tab Tab
Unindent Shift + Tab Shift + Tab Shift + Tab
Move line(s) up Alt + Up Alt + Up Alt + Up
Move line(s) down Alt + Down Alt + Down Alt + Down
Comment/uncomment line(s) Ctrl + / Cmd + / Ctrl + /

Autocompletado de código

Cuando se edite CSS y JavaScript, el editor proporciona sugerencias de autocompletado. El autocompletado en CSS está siempre habilitado:

Para mostrar las sugerencias de autocompletado en JavaScript, pulse Control + Espacio:

Documentación en línea

El editor también muestra documentación en línea para JavaScript. Pulsa Shift + Espacio para ver un popup con el contenido de la documentación para el símbolo en el que su cursor está sobrevolando:

Clicando el link [docs] en el popup le llevará a la página MDN para el símbolo.

Guardando archivos

Para que los cambios en sus archivos tengan efecto necesitas guardarlos. Los archivos no guardaddos tendrán un asterisco junto a su nombre en la vista de árbol, y podrá guardarlos usando el menú o con Control+S (Command+S en Mac OS X).

Borrando proyectos

Para borrar una app del WebIDE, vaya a la págnia de sumario de la app y clique "Remove Project" (Borrar Proyecto).

Ejecutando y depurando apps

Cuando esté preparado para ejecutar la app, necesitará seleccionar un runtime del menú desplegable "Select Runtime". Si no tiene ningún runtime disponible, compruebe cómo se añaden algunos runtimes en Configurando runtimes.

El botón "play" en el centro de la bara de herramientas de WebIDE está habilitado ahora: clique para instalar y ejecutar la app en el runtime seleccionado:

Para depurar la app, da click en el botón de Pausa y las herramientas de la Toolbox de Desarrollador aparecerá, conectada a su app:

Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the Inspector, Console, JavaScript Debugger, Style Editor, Profiler and Scratchpad. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.

Depurando apps certificadas

Con el Simulador, si le das click en el menu desplegable de la aplicación mientras el tiempo de ejecucion esta seleccionado , puedes ver y depurar no solo tu aplicacion, sino todas las que esten corriendo en tiempo de ejecucion, incluidas las apps certificadas:


However, to debug certified apps on a real device:

  • the device must be running a development build of Firefox OS 1.2+
  • you must enable certified app debugging

To enable certified app debugging, connect to the runtime, and then, in the menu, go to Runtime > Runtime Info. From here, if you see "DevTools restricted privileges: yes", that means certified apps can't be debugged. The path then differs depending on what you are debugging against:

  • Real device
    • If it can be rooted, clicking "request higher privileges" will enable certified apps debugging (Firefox OS will restart).
  • Simulator
    • The simulators come with certified debugging enabled by default.
  • B2G desktop
    • Manually edit the B2G desktop client preferences before connecting to enable certified app debugging.

Now (or after a restart of the B2G desktop client) in the WebIDE you should see all the certified apps on the device.

Monitoring performance

If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:

  • The Monitor panel offers a good overview of a device's performance. This can help you detect problems, e.g. a sudden, excessive increase in an app's memory usage (leak).
  • The Profiler tool gives you a way to analyze a single app's footprint in great detail. This is especially useful when investigating a known performance problem.

Troubleshooting

If you have any problems working with the WebIDE, see the Troubleshooting page.

 

 

Etiquetas y colaboradores del documento

 Colaboradores en esta página: BrayanG26, RoxPulido, mariosumd, ju3rga, dnekox, Albestio, ger.albornoz, HaroldoG72, Chalalo
 Última actualización por: BrayanG26,