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/