Download - What is WebIDE?
![Page 1: What is WebIDE?](https://reader036.vdocument.in/reader036/viewer/2022062710/5599f12a1a28abe01a8b47d8/html5/thumbnails/1.jpg)
![Page 2: What is WebIDE?](https://reader036.vdocument.in/reader036/viewer/2022062710/5599f12a1a28abe01a8b47d8/html5/thumbnails/2.jpg)
![Page 3: What is WebIDE?](https://reader036.vdocument.in/reader036/viewer/2022062710/5599f12a1a28abe01a8b47d8/html5/thumbnails/3.jpg)
• WebIDE allow users 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.
• Key-bindings and quick iteration : Common keybindings make iterating 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
![Page 4: What is WebIDE?](https://reader036.vdocument.in/reader036/viewer/2022062710/5599f12a1a28abe01a8b47d8/html5/thumbnails/4.jpg)
Where is the WebIDE ?
• Firefox Brower• Firefox Stable version
• Firefox Beta
• Firefox Aurora
• Firefox Nightly
![Page 5: What is WebIDE?](https://reader036.vdocument.in/reader036/viewer/2022062710/5599f12a1a28abe01a8b47d8/html5/thumbnails/5.jpg)
Firefox Developer Edition
![Page 6: What is WebIDE?](https://reader036.vdocument.in/reader036/viewer/2022062710/5599f12a1a28abe01a8b47d8/html5/thumbnails/6.jpg)
Enable the WebIDE
• Write about:config in the Address Bar.
• Click the I’ll be careful, I promise!
• Write webide in the Search.
• Double click the devtools.webide.enabled to make true the value
• Now Go to Tools>Web Developer>WebIDE (for all) or Shift+F8
(only for nightly)
![Page 7: What is WebIDE?](https://reader036.vdocument.in/reader036/viewer/2022062710/5599f12a1a28abe01a8b47d8/html5/thumbnails/7.jpg)
How to Use
![Page 8: What is WebIDE?](https://reader036.vdocument.in/reader036/viewer/2022062710/5599f12a1a28abe01a8b47d8/html5/thumbnails/8.jpg)
Simulators
![Page 9: What is WebIDE?](https://reader036.vdocument.in/reader036/viewer/2022062710/5599f12a1a28abe01a8b47d8/html5/thumbnails/9.jpg)
Manage Simulator
![Page 10: What is WebIDE?](https://reader036.vdocument.in/reader036/viewer/2022062710/5599f12a1a28abe01a8b47d8/html5/thumbnails/10.jpg)
Sample Apps Files
![Page 11: What is WebIDE?](https://reader036.vdocument.in/reader036/viewer/2022062710/5599f12a1a28abe01a8b47d8/html5/thumbnails/11.jpg)
Manifest
![Page 12: What is WebIDE?](https://reader036.vdocument.in/reader036/viewer/2022062710/5599f12a1a28abe01a8b47d8/html5/thumbnails/12.jpg)
Demo Apps in Simulator
![Page 13: What is WebIDE?](https://reader036.vdocument.in/reader036/viewer/2022062710/5599f12a1a28abe01a8b47d8/html5/thumbnails/13.jpg)
Debug Panel
![Page 14: What is WebIDE?](https://reader036.vdocument.in/reader036/viewer/2022062710/5599f12a1a28abe01a8b47d8/html5/thumbnails/14.jpg)
References
• https://hacks.mozilla.org/
• http://mozillabd.org/blog/
![Page 15: What is WebIDE?](https://reader036.vdocument.in/reader036/viewer/2022062710/5599f12a1a28abe01a8b47d8/html5/thumbnails/15.jpg)
Any Questions ???
![Page 16: What is WebIDE?](https://reader036.vdocument.in/reader036/viewer/2022062710/5599f12a1a28abe01a8b47d8/html5/thumbnails/16.jpg)