DevTools/WebIDE: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(Created page with "== What is WebIDE? == <br /> '''[http://people.mozilla.org/~prouget/webide.webm Screencast].''' <br /> WebIDE is the code name of the new [https://developer.mozilla.org/en-...")
 
No edit summary
Line 2: Line 2:
<br />
<br />


'''[http://people.mozilla.org/~prouget/webide.webm Screencast].'''
Screencast: [http://people.mozilla.org/~prouget/webide.webm http://people.mozilla.org/~prouget/webide.webm]


<br />
<br />


WebIDE is the code name of the new [https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager App Manager]. As for today, WebIDE only supports Firefox OS Apps (hence the name: App Manager). It will soon support Android tabs and Firefox Addons development.
WebIDE is the code name of the new [https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager App Manager]. As for today, WebIDE only supports Firefox OS Apps (hence the name: App Manager).
 
Status: Will be available in Firefox Nightly starting the 7th of June. Disabled by default (pref: devtools.webide.enabled).


WebIDE allow the user to:
WebIDE allow the user to:
* Edit apps (WebIDE comes with its own code editor)
* Edit apps (WebIDE comes with its own code editor)
* Install apps to the device/simulator
* Debug apps (WebIDE integrates the usual Firefox DevTools).
* Debug apps (WebIDE integrates the usual Firefox DevTools).


== Major features ==
== Major features ==


==== Code Editor ====
* '''Code Editor''': The user can write the code of its app in WebIDE. It's an optional feature. User can still use his own editor.
 
* '''App Creation''': 2 simple app templates are offered to the user.
The user can write the code of its app in WebIDE. It's an optional feature. User can still use his own editor.
* ''' App Validation ''': A validation mechanism will report any common errors in the manifest and the app structure.
 
* ''' Runtimes & Simulators ''': WebIDE supports Firefox OS devices connected via USB. It's also possible to install and run simulators.
==== App Validation ====
* ''' Auto-install ADB ''': ADB (required to connect the phone via a USB cable) is automatically installed and controlled via WebIDE. The user won't need to install extra addons or android tools.
 
* ''' Command line support ''': WebIDE can be controlled via the command line. Simple operations like importing an app, pushing and running it on the device/simulator, and connecting the devtools can be all done from a shell script.
A validation mechanism will report any common errors in the manifest and the app structure.
* ''' Key-bindings and quick iteration ''': Common keybindings make iterating quickly very simple. Write code in WebIDE. Save (Ctrl-s). Push and reload app (Ctrl-r). Close app (Ctrl-w). Repeat.
 
* '''Device Info''': get an extensive list of data from the device (versions, hardware, screen resolution, permissions, ...)
==== Runtimes & Simulators ====
* '''Debug non-local apps''': Apps running on the device (like gaia apps) are debuggable. Certified apps are not debuggable by default (see [https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager#Debugging_Certified_Apps_2 how to enable certified apps debugging])
 
WebIDE supports Firefox OS devices connected via USB. It's also possible to install and run simulators.
 
==== Auto-install ADB ====
 
ADB (required to connect the phone via a USB cable) is automatically installed and controlled via WebIDE. The user won't need to install extra addons or android tools.
 
==== Command line support ====
 
WebIDE can be controlled via the command line. Simple operations like importing an app, pushing and running it on the device/simulator, and connecting the devtools can be all done from a shell script.


==== Key-bindings and quick iteration ====
== Work in progress ==


Common keybindings make iterating quickly very simple. Write code in WebIDE. Save (Ctrl-s). Push and reload app (Ctrl-r). Close app (Ctrl-w). Repeat.
* Better templates
* Performance monitor (Firewatch-like tool)
* Editor preferences panel
* Debug B2G main process
* Debug Android tabs

Revision as of 06:19, 6 June 2014

What is WebIDE?


Screencast: http://people.mozilla.org/~prouget/webide.webm


WebIDE is the code name of the new App Manager. As for today, WebIDE only supports Firefox OS Apps (hence the name: App Manager).

Status: Will be available in Firefox Nightly starting the 7th of June. Disabled by default (pref: devtools.webide.enabled).

WebIDE allow the user to:

  • Edit apps (WebIDE comes with its own code editor)
  • Install apps to the device/simulator
  • Debug apps (WebIDE integrates the usual Firefox DevTools).

Major features

  • Code Editor: The user can write the code of its app in WebIDE. It's an optional feature. User can still use his own editor.
  • App Creation: 2 simple app templates are offered to the user.
  • App Validation : A validation mechanism will report any common errors in the manifest and the app structure.
  • Runtimes & Simulators : WebIDE supports Firefox OS devices connected via USB. It's also possible to install and run simulators.
  • Auto-install ADB : ADB (required to connect the phone via a USB cable) is automatically installed and controlled via WebIDE. The user won't need to install extra addons or android tools.
  • Command line support : WebIDE can be controlled via the command line. Simple operations like importing an app, pushing and running it on the device/simulator, and connecting the devtools can be all done from a shell script.
  • Key-bindings and quick iteration : Common keybindings make iterating quickly very simple. Write code in WebIDE. Save (Ctrl-s). Push and reload app (Ctrl-r). Close app (Ctrl-w). Repeat.
  • Device Info: get an extensive list of data from the device (versions, hardware, screen resolution, permissions, ...)
  • Debug non-local apps: Apps running on the device (like gaia apps) are debuggable. Certified apps are not debuggable by default (see how to enable certified apps debugging)

Work in progress

  • Better templates
  • Performance monitor (Firewatch-like tool)
  • Editor preferences panel
  • Debug B2G main process
  • Debug Android tabs