At this point, you probably want to start adding new functionality to the basic app that Ember CLI has generated for you, to make it do something exciting. However, in order to do this, it's important to familiarize yourself with the tools available for viewing, testing and debugging your application. Your web app will need to run successfully across different platforms, otherwise it won't win any prizes! This article explains some of the essential tools that are available.
Debugging in the browser
If you don't currently have your Ember CLI application running locally, use your command line or terminal to navigate to your project directory and run ember serve.
Most modern browsers (we recommend installing Firefox Nightly) include developer tools that allow you to view and manipulate your application code. Refer to your browser's documentation to learn more about working with its developer tools. Extensive documentation on the Firefox Developer Tools (including the mobile-specific parts) can be found on MDN, and you can also find a beginners guide at Discover browser developer tools.
Note: The Firefox Developer Tools are built to be flexible, and enable you to connect to a number of other browsers so you can test your application in Firefox for Android, Chrome on Android, and Safari on iOS. For more information on connecting to other browsers, refer to the MDN guide on Remote Debugging.
Viewing Your Application with WebIDE
The WebIDE tool that comes built into Firefox (version 34 and up) allows you to run your application in a Firefox OS simulator, as well as view and edit its file structure and code. This makes it easy to monitor your application as you make changes and fix any bugs that pop up along the way, as you try to get it working just right on Firefox OS.
To get started with WebIDE:
- From the Firefox menu bar, go to Tools > Web Developer > WebIDE (if you do not see this option available in the menu, you likely need to run a more recent version of Firefox.)
- In the upper left corner of the WebIDE screen, click on Open App > Open Hosted app. You will see a pop-up appear where you can enter the URL of your app manifest. Assuming your application is running on port 4200, your manifest file URL would be
http://localhost:4200/manifest.webapp. - Click OK and you should see the details about your application appear in the WebIDE display:
Starting the Simulator
- In the top right corner of the WebIDE screen, click on Select Runtime. This will allow you to run or install a simulator, or connect to a device attached via USB. Click on Install Simulator to install a specific version of the Firefox OS Simulator. Once installed, you will immediately have that runtime available to you for debugging.
- Select the simulator you would like to run your application in from the drop-down menu that appears under Select Runtime.
- A new simulator should open, showing you the home screen of a Firefox OS device:
- Back in the WebIDE screen, in the top center, you should see a "play" button that is now active. When you click on this button, your app will be installed and open on the simulator.
- To view and debug your application code, click the "pause" button on the WebIDE screen. The Firefox Developer Tools will appear and display the code currently running inside the Firefox OS Simulator. If you make changes to this code, you’ll see the changes reflected live in the simulator.
Running Your App on a Real Phone
To run your app on a real phone, the steps are basically the same as running it in the Simulator, except that you need to:
- Have a real phone available, which is running Firefox OS 1.2+.
- Install the drivers provided by your phone manufacturer if you are using Windows.
- Disable Screen Lock (Settings > Screen lock > Lock Screen) on your phone.
- Show the Developer menu (Settings > Device information > More information > Developer Menu) on your phone.
- Enable Remote Debugging (Settings > Developer > Debugging via USB > ADB and DevTools) on your phone.
- Install the ADB Helper add-on on Firefox Desktop.
- Connect your phone to your development machine via a USB cable.
- Click on the name of your device, which you should now see listed as an option in the drop-down menu on the WebIDE screen under Select Runtime.
Next steps
Now we've familiarized ourselves with the kinds of developer tools we can use to debug our web apps, let's return to building up our World Clock app.