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/