9:59:59.000,9:59:59.000
With WebIDE you can create and debug[br]Web Apps directly inside Firefox

9:59:59.000,9:59:59.000
To open WebIDE, select WebIDE from the[br]Web Developer menu

9:59:59.000,9:59:59.000
Before we make an App, we will[br]set up a runtime

9:59:59.000,9:59:59.000
A runtime is an environment in witch[br]we can run and debug the App

9:59:59.000,9:59:59.000
It could be a FirefoxOS Phone[br]connected via USB

9:59:59.000,9:59:59.000
or a Firefox OS Simulator[br]running on a desktop

9:59:59.000,9:59:59.000
In this tutorial we will use a simulator

9:59:59.000,9:59:59.000
If you don't already have a[br]simulator installed,

9:59:59.000,9:59:59.000
You will be asked to install one

9:59:59.000,9:59:59.000
There are different simulators[br]for different versionsof Firefox OS

9:59:59.000,9:59:59.000
You can install as many as you like

9:59:59.000,9:59:59.000
We just will install one

9:59:59.000,9:59:59.000
The simulator is big and downloading[br]can take a minute or more

9:59:59.000,9:59:59.000
Once the simulator is installed it[br]appears in the list of runtimes

9:59:59.000,9:59:59.000
I can open an existing app or[br]create a new one

9:59:59.000,9:59:59.000
If I create a new one the WebIDE asks[br]me to choose a template to use

9:59:59.000,9:59:59.000
One template inculdes the[br]minimum needed to get started

9:59:59.000,9:59:59.000
The other one shows how to use[br]privileged APIs to load remote content

9:59:59.000,9:59:59.000
I will choose the second template

9:59:59.000,9:59:59.000
Choose a name for the app

9:59:59.000,9:59:59.000
Choose location on disk to keep the files

9:59:59.000,9:59:59.000
The template includes CSS,[br]JavaScript, a HTML source.

9:59:59.000,9:59:59.000
a manifest file, placeholder icons[br]and localization machinery

9:59:59.000,9:59:59.000
list left************************************

9:59:59.000,9:59:59.000
On the right hand side[br]there is a source editor

9:59:59.000,9:59:59.000
To run the app select[br]a runtime and press play

9:59:59.000,9:59:59.000
To debug the app, the pause button[br]brings up the Firefox Developer Tools

9:59:59.000,9:59:59.000
that you can use to exam[br]and modify the program

9:59:59.000,9:59:59.000
And experiment with any changes that ***************

9:59:59.000,9:59:59.000
Back in the editor, I can[br]make my changes permanent

9:59:59.000,9:59:59.000
I am going to modify template, so I just place ****************

9:59:59.000,9:59:59.000
First I will change the title and description

9:59:59.000,9:59:59.000
Next, ******************** move to placeholder attribute from the search box.

9:59:59.000,9:59:59.000
Finally, I will update the JavaScript,[br]so it runs adifferent query

9:59:59.000,9:59:59.000
*************** JavaScript

9:59:59.000,9:59:59.000
auto-complete and help

9:59:59.000,9:59:59.000
Lets run the app.

9:59:59.000,9:59:59.000
It is not working

9:59:59.000,9:59:59.000
************ console

9:59:59.000,9:59:59.000
And it looks if we missing a part ******************

9:59:59.000,9:59:59.000
********************* build the URL String

9:59:59.000,9:59:59.000
It looks like ************* needs a trailing slash

9:59:59.000,9:59:59.000
************ test this out using the console.

9:59:59.000,9:59:59.000
Now it works

9:59:59.000,9:59:59.000
So, back in the editor,[br]fix the code, reload the app

9:59:59.000,9:59:59.000
And it works properly now

9:59:59.000,9:59:59.000
This is just a realy quick introdution to[br]the main features of the WebIDE

9:59:59.000,9:59:59.000
To learn more, see the docs at[br]http://developer.mozilla.org/