We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

O WebIDE está disponível a partir do Firefox 34 em diante. 
O WebIDE é o substituto para o App Manager. Como o App Manager, ele lhe permite executar e depurar os aplicativos do Firefox OS usando o Firefox OS Simulator ou um dispositivo Firefox OS real . 
 
No entanto, ele também oferece um ambiente de edição para que você possa criar e desenvolver aplicativos do Firefox OS, incluindo uma exibição em árvore de todos os arquivos em seu aplicativo com a capacidade de editá-los e salvá-los, e dois modelos de aplicativos para ajudar você a começar.
 
Finalmente, WebIDE permite conectar as ferramentas de Firefox para Desenvolvedores a uma série de outros navegadores, incluindo o Firefox para Android, Chrome no Android, e Safari no iOS. Veja a página de Depuração Remota  para obter instruções sobre como se conectar a um navegador específico.

Com a WebIDE, você primeiro deve configurar um ou mais runtimes (tempo de execução). Um runtime  é um ambiente no qual você vai executar e depurar o aplicativo. Um runtime pode ser um dispositivo Firefox OS conectado a um Desktop através de USB, ou poderia ser um Firefox OS Simulator instalado no próprio desktop.

Em seguida, você cria um aplicativo ou abre um aplicativo existente. Se você estiver criando um novo aplicativo  você inicia com um modelo que inclui a estrutura de diretórios e o mínimo que você precisa para começar, ou com um modelo mais completo que mostra como usar a API privilegiada. O WebIDE mostra os arquivos do seu aplicativo em estrutura de árvore, e você pode editar e salvá-los usando um editor embutido de código . Claro, você não tem que usar o editor embutido: você pode desenvolver seu aplicativo inteiramente fora do WebIDE, e só usá-lo para depurar ..

Finalmente, você pode instalar o aplicativo em uma das runtimes e executá-lo. Você pode, então, abrir o conjunto habitual de ferramentas de desenvolvimento - o Inspector, Console, JavaScript Debugger e assim por diante - para examinar e modificar o aplicativo em execução.

Requisitos do sistema

Para desenvolver e depurar aplicativos usando o WebIDE, tudo o que você precisa é o Firefox versão 33 ou superior. Para testar em um dispositivo Firefox OS real , você precisa de um dispositivo rodando o Firefox OS 1.2 ou superior, e um cabo USB.

Você só pode usar o WebIDE visando o Firefox OS 1.2 ou superior.

Abrindo a WebIDE

O WebIDE está escondido atrás de uma preferência. Para torná-lo visível visite about:config, procure a preferência chamada devtools.webide.enabled e a defina como true. Agora você verá uma nova entrada no menu  Web Developer chamado WebIDE. Clique nele e o WebIDE abre:

O dropdown na esquerda rotulado "Open App" permite abrir aplicativos existentes ou criar novos. O menu suspenso à direita chamado "Select Runtime" permite que você selecione um tempo de execução ou criação de um novo tempo de execução.

Os botões no meio, executam, param e depuram o app: eles só são ativados quando você abrir um app e selecionar um tempo de execução.

A partir do Firefox 36, você pode alterar o tamanho da fonte em todo WebIDE usando os atalhos de teclado padrão (use Command em vez de Controle no OS X):

  • Ctrl + aumenta o tamanho da fonte
  • Ctrl - diminui o tamanho da fonte
  • Ctrl 0 redefine o tamanho da fonte para o padrão

Configurando runtimes (tempos de execução)

Sob o dropdown "Select Runtime", runtimes são agrupados em três tipos:

  • USB devices: Dispositivos OS Firefox conectados por USB
  • Simulators: instâncias do Firefox OS Simulator que você tenha instalado
  • Custom: use para conectar um tempo de execução para WebIDE usando um nome e porta arbitrária. A partir do Firefox 36, ste tipo de tempo de execução é renomeado "Other". Se você tiver o Valence add-on instalado, esta seção também irá listar os tempos de execução adicionais permitidos

Da primeira vez que você clicar no dropdown, pode ser que você não veja nenhum tempo de execução:

O restante desta seção descreverá como você pode adicionar alguns runtimes.

Conectando um dispositivo Firefox OS

Antes de conectar um dispositivo OS Firefox , existem algumas configurações que você deve fazer:

  • Veja a versão do seu Firefox OS: certifique-se que seu dispositivo está rodando o Firefox OS 1.2/Boot2Gecko 1.2 ou superior. Para verificar a versão, vá no menu de Configurações do seu dispositivo, entãoDevice Information > Software. Se você não tem uma versão atualizada o suficiente, encontre o seu dispositivo no developer phone guide e siga as instruções para atualização.
  • Ativar a depuração remota: no menu de Configurações no dispositivo, vá em Device information > More information > Developer.
    • Firefox OS 1.3 and earlier: "Remote Debugging" é só um checkbox. Marque-o.
    • Firefox OS 1.4 and later: "Remote Debugging" pergunta se você deseja habilitar somente para ADB, ou para ADB and DevTools. Selecione "ADB and DevTools".
  • Desativar o bloqueio de tela do dispositivo: no menu de Configurações no dispositivo, vá em Screen Lock e desmarque o checkbox Lock Screen. Isso é uma boa idéia pois quando a tela trava, o telefone perde a conexão, significando que ele não está mais disponpivel para depuração.
  • Se você quer depurar applicativos certificados, incluindo aplicativos embarcados: veja a sessão em debugging certified apps.

Somente Linux :

  • adicione um arquivo de regras udev, como documentado no passo 3 deste guia para definindo um dispositivo Android. O atributo idVendor usado para o Geeksphone is "05c6", e esta página lista outros valores para idVendor.

Somente Windows:

Se existem outros dispositivos Android conectados ao seu computador, desconecte todos eles. Agora conecte o dispositivo ao computador usado o USB. Você deve ver o dispositivo aparecer em "USB DEVICES":

Se você não visualizar o seu dispositivo, veja a página de Solução de Problemas.

Adicionando um Simulador

O Firefox OS Simulator é uma versão das altas camadas do Firefox OS  que simula o dispositivo Firefox OS, mas roda no desktop. Ele roda em uma janela com o mesmo tamanho de um dispositivo com Firefox OS, inclui a interface de usuário do Firefox OS e aplicativos padrão, e simula muitas APIs de dispositivos Firefox OS.

Isso significa que em muitos casos, você não precisa de um dispositivo real para testar ou depurar sua aplicação.

O Simulador é grande, então não é distribuído junto com o Firefox mas como um add-on Firefox. Se você clicar em "Install Simulator" no menu de Runtimes, você vai para um página onde você pode instalar simuladores para várias versões do Firefox OS.

You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:

To learn more about the Simulator, see its documentation page.

Custom runtimes

With a custom runtime you can use an arbitrary hostname and port to connect to the remote device.

Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or ADB. By default, the WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.

This is convenient in most cases, but sometimes you might want to use ADB outside of the WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the adb forward command.

If you then want to use WebIDE to connect as well, you should disable the ADB Helper add-on and connect WebIDE using the Custom runtime option, entering the host and port that you passed to 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.

Selecting a runtime

Once you've set up a runtime you can select it using the "Select Runtime" menu.

  • If you select a Simulator, the WebIDE launches the Simulator.
  • If you select a Firefox OS device the WebIDE connects to the device. On the device a dialog will ask you to confirm that you wish to connect: press "OK".

Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.

Runtime actions

When a runtime is selected, the Runtimes dropdown menu has three extra items:

  • Runtime Info: information on the current runtime
  • Permissions Table: a table summarising app permissions for the current runtime, indicating, for each API and each app type, whether access is allowed (✓), denied (✗), or whether the user is prompted (!)
  • Screenshot: a command to take a screenshot from the runtime

Creating and opening apps

Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:

Create a new app

Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".

Both templates are from Mozilla's app template collection, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.

Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the project editor.

Open a packaged app

Select "Open Packaged App..." to open a packaged app. You'll be asked to select a directory containing the app's manifest, and the app will be opened in the project editor.

Open a hosted app

Select "Open Hosted App..." to open a hosted app. You'll be asked to enter a URL pointing to the app's manifest, and the app will be opened in the project editor.

Editing apps

The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.

The app summary page

When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:

You can always get back to the app summary page by clicking on the root of the tree on the left.

Manifest validation

The WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:

Of course, you can edit the manifest.webapp file right in the project editor as well.

The source editor

The WebIDE uses the CodeMirror source editor.

Source editor shortcuts

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 + /

Code completion

When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:

To display autocomplete suggestions in JavaScript press Control + Space:

Inline documentation

The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:

Clicking the [docs] link in the popup will take you to the MDN page for the symbol.

Saving files

For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).

Removing projects

To remove an app from the WebIDE, go to the app summary page and click "Remove Project".

Running and debugging apps

When you're ready to run the app, you need to select a runtime from the "Select Runtime" dropdown menu. If you don't have any available runtimes here, find out how to add some in Setting up runtimes.

The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:

To debug the app, click the "Pause" button and the Developer Tools Toolbox appears, connected to your 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.

Debugging certified apps

With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including certified apps:


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. If your device can be rooted, clicking "request higher privileges" will enable certified apps debugging (Firefox OS will restart).

Now in the WebIDE you should see all the certified apps on the device.

Troubleshooting

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

 

 

Etiquetas do documento e colaboradores

Etiquetas: 
Colaboradores desta página: Shura16, JAugusto, maybe, PriscillaAlcalde, Greg.Maus
Última atualização por: Shura16,