The Firefox OS Simulator

[? Music ?] [Treehouse presents] 0:00 [Quick Tips] [The Firefox OS Simulator with Jim Hoskins] 0:02 [In association with Mozilla] 0:04 Because web apps use web technology, much of the development 0:06 can be done in a normal web browser. 0:09 Eventually, you'll want to test on a physical device, 0:11 but in development, a simulator can be a great tool. 0:13 It allows you to see what your app will behave like 0:17 on your computer without the need to load it onto a real device. 0:19 Let's see how to get started with the Firefox OS Simulator. 0:23 In order to test out our apps as they would appear on a Firefox OS device, 0:27 we can use the Firefox OS Simulator, 0:31 which can be installed as an add-on to Firefox on the desktop. 0:34 The first thing you'll need to do is install it by simply going to the add-on page here 0:39 and clicking "Add to Firefox." 0:43 It will take a short while to download, but after we do that, 0:45 we'll go through the normal steps of installing it. 0:48 Now that the download has completed, we can click "Install now," 0:50 and it's gone ahead and installed itself, 0:54 and this is the Firefox OS Simulator dashboard here. 0:57 To return to it, we can go to Web Developer 1:01 under the Tools menu and open the Firefox OS Simulator, 1:04 which will reopen this page in the future. 1:08 Right now it's stopped, but all we have to do is click on this slider right here, 1:11 and it will open up a Firefox OS device. 1:15 We can go ahead and interact with it just like any old device. 1:19 It comes with some demo applications, 1:24 and we can go in there and try a few of them out. 1:27 For instance, we can see 3D video effects are working, 1:33 and you can try out some other things here. 1:38 Also from this dashboard, we can do a couple of other interesting things. 1:41 For instance, if we want the console to appear, 1:44 we'll have to click that, and if we restart it, 1:47 we'll now get the Firefox Error Console, 1:50 so we can get any information about errors or messages 1:52 right here in the console to debug our apps. 1:55 From this page, we can also add our own apps. 1:58 We can either add the URL to our online web apps 2:01 by pasting in the URL of our app or the URL to our manifest.webapp, 2:04 or if we're developing locally, we can click "Add Directory." 2:09 I'm going to open up our offline demo, 2:14 where I've created a manifest.webapp, which we can see right here. 2:17 This has some simple information like our online/offline name, 2:20 the description, our launch path, which is index.html for our app, 2:24 as well as an icon and some information about myself. 2:29 I haven't used any other permissions or any other advanced things, 2:33 but this is a very simple manifest.webapp, 2:36 and we also have our icon in the image directory 2:39 as we specified it under the icons property. 2:43 By simply clicking on the manifest.webapp and clicking open, 2:46 it's added it to our dashboard and restarted our application here, 2:51 and it's started it right up. 2:55 We can see that it's also added it to our homepage, 2:58 although it's all the way at the end here, and this is the icon we've used, 3:00 so we can go ahead and use this here. 3:03 If you have any updates, you're always free to update, 3:07 and it will reinstall and check for any updates to the source code 3:10 as well as you can easily remove it here. 3:14 If you click on the Help section, there is some information 3:17 about the keyboard keys you can use to simulate 3:19 the hardware keys on the device, for instance, 3:22 the home button, power button, and volume buttons. 3:24 Anytime you want to check out how your web app looks on the Firefox OS devices, 3:27 be sure to check out the simulator for Firefox OS. 3:30

You need to sign up for Treehouse in order to set up Workspace

Sign up