Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Use Remote Sources to Debug a Web App on an Emulator, Simulator, or Physical Device

    htmlHTML 5

    We can emulate different operating systems, browsers, and devices within a desktop operating system. We’re going to discuss iOS and Android options we have available to us, and how to debug on those devices.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Instructor: Regularly, we're going to want to emulate a mobile device so that we can test our app on the device. To do that, we can use remote debugging. This is different to simply using desktop browser developer tools, because there may be features to advise or operating system that aren't available through a browser like Chrome.

    To test on a device emulator, we're going to want to set up an http server, because we're not going to be able to simply open index.html. Because we'll be using a remote source.

    From the command line, we're going to want to install http server globally. Then, we can say http server pass a port, for example, 8,000. I always use the flag -c-1, because this avoids caching issues.

    Let's run this, and we have our http server running. Now, we can access our app on a device emulator. One example of this is a cross-browser testing platform such as BrowserStack.

    We have access to many different devices and operating systems for mobile phones. Let's go ahead and open Samsung Galaxy S8 in Chrome. Let's enter our http server address, and here's our app.

    On newer devices, we even have access to the dev tools, we can debug in the same way that we normally would with Chrome. We can test our mobile app using device simulators available to us from our operating system.

    Using this method, we can be quite sure that what we're seeing is going to be the same as what our user is seeing. Let's open our http server link in the iPhone 5S simulator in Safari. Here's our app.

    We can even use dev tools to debug this. Using Safari, we can head to the develop menu. Inside simulator, we can head to the relevant page. Here's our app. We can use these dev tools to debug our app remotely through the simulator.

    Android Studio offers us an emulator for Android devices, too. Let's head over to our page. In the Android emulator, we're using Chrome on a Nexus 5X device. Instead of using 127.001 as our address, we need to use 10.02.2 followed by the port.

    We can also debug this Android emulator in a similar way to the iOS simulator. It's just a little different. If we go to the devices section of Chrome, we can see the remote target that we set up here.

    If we had to inspect, we can use the dev tools to debug our app. Often, we may want to debug our app using our phone so that there's no simulator or emulator involved. Sometimes, this may not be possible because we can't access index.html from our phone.

    We may not be able to access localhost directly from a phone. But there is a way around this. Let's check our server's still running. In a separate tab in our terminal, we're going to globally install ngrok. Once ngrok is in our path, we can type ngrok http then the port number.

    Now, we have remote urls available to us. If we were to access this url from a phone, we would see our app. I'm going to access this from my phone now, and here's the response.

    I can see our app on my phone so that I can test the usability of it to insure that what I'm seeing through my emulators is what I'm going to see on the actual devices.