With WebIDE you can create and debug
Web Apps directly inside Firefox

To open WebIDE, select WebIDE from the
Web Developer menu

Before we make an App, we will
set up a runtime

A runtime is an environment in witch
we can run and debug the App

It could be a FirefoxOS Phone
connected via USB

or a Firefox OS Simulator
running on a desktop

In this tutorial we will use a simulator

If you don't already have a
simulator installed,

You will be asked to install one

There are different simulators
for different versionsof Firefox OS

You can install as many as you like

We just will install one

The simulator is big and downloading
can take a minute or more

Once the simulator is installed it
appears in the list of runtimes

I can open an existing app or
create a new one

If I create a new one the WebIDE asks
me to choose a template to use

One template inculdes the
minimum needed to get started

The other one shows how to use
privileged APIs to load remote content

I will choose the second template

Choose a name for the app

Choose location on disk to keep the files

The template includes CSS,
JavaScript, a HTML source.

a manifest file, placeholder icons
and localization machinery

list left************************************

On the right hand side
there is a source editor

To run the app select
a runtime and press play

To debug the app, the pause button
brings up the Firefox Developer Tools

that you can use to exam
and modify the program

And experiment with any changes that ***************

Back in the editor, I can
make my changes permanent

I am going to modify template, so I just place ****************

First I will change the title and description

Next, ******************** move to placeholder attribute from the search box.

Finally, I will update the JavaScript,
so it runs adifferent query

*************** JavaScript

auto-complete and help

Lets run the app.

It is not working

************ console

And it looks if we missing a part ******************

********************* build the URL String

It looks like ************* needs a trailing slash

************ test this out using the console.

Now it works

So, back in the editor,
fix the code, reload the app

And it works properly now

This is just a realy quick introdution to
the main features of the WebIDE

To learn more, see the docs at
http://developer.mozilla.org/