• Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
Firefox Developer Tools
  1. MDN
  2. Firefox Developer Tools
  3. WebIDE
  4. Opening WebIDE

Opening WebIDE

There are three ways to open WebIDE:

  • In the Tools > Web Developer menu, click on the WebIDE entry.
  • Use the keyboard shortcut Shift + F8.
  • Click the dedicated icon in the Firefox toolbar. This is always present if you're using Firefox Developer Edition, and with any other Firefox from version 36 onwards it appears after you've opened WebIDE once:

Here's what WebIDE looks like:The sidebar on the left lets you open existing apps or create new ones. The sidebar on the right lets you select a runtime or set up a new runtime.

The buttons in the middle run, stop, and debug the app: they are only enabled when you have opened an app and selected a runtime.

You can change the font size throughout WebIDE using the standard keyboard shortcuts (use Command instead of Control on OS X):

  • Ctrl + increases font size.
  • Ctrl - decreases font size.
  • Ctrl 0 resets the font size to the default.

Document Tags and Contributors

Tags: 
  • opening
  • WebIDE
 Contributors to this page: wbamberg, Sivlo, Delapouite, chrisdavidmills, Addeayu
 Last updated by: wbamberg, Nov 29, 2016, 8:16:47 AM
  1. Core Tools
    1. Page Inspector
    2. Web Console
    3. JavaScript Debugger
    4. Network Monitor
    5. Performance
    6. Responsive Design Mode
    7. Tips
  2. More Tools
    1. Memory
    2. Storage Inspector
    3. DOM Property Viewer
    4. Developer Toolbar
    5. Eyedropper
    6. Screenshot
    7. Scratchpad
    8. Style Editor
    9. Shader Editor
    10. Web Audio Editor
  3. Connecting the devtools
    1. about:debugging
    2. Connecting to Firefox for Android
    3. Connecting to iframes
    4. Connecting to other browsers
  4. Debugging the browser
    1. Browser Console
    2. Browser Toolbox
  5. Extending the devtools
    1. Adding a panel to the toolbox
    2. Example devtools add-ons
    3. Remote Debugging Protocol
    4. Stream Transport
    5. Source Editor
    6. The Debugger Interface
    7. Web Console custom output
  6. Settings
  7. Release notes