Skip to content

Latest commit

 

History

History
87 lines (44 loc) · 4.33 KB

README.md

File metadata and controls

87 lines (44 loc) · 4.33 KB

Step 10 - Use an Android Emulator

In this step, we're going to test our PWA's behaviour on an emulated device environment.

In order to use an emulator, we have to install Android Studio first.

Download Android Studio

Navigate to Android Studio download page and download the latest version for your OS.

Install Android Studio

You need to customize the installation and select Android Virtual Device during the setup.

10-1-install-android-studio

Configure Android Studio SDK

Launch Android Studio, click Configure toggle with the gear icon and select Preferences.

10-2-configure-android-studio

Install Android Emulator

Search for sdk in Preferences pane. And, using the search results, navigate to Appereance & Behaviour > System Settings > Android SDK menu.

10-3-sdk-tools-search

Within SDK Tools pane, click the download icon next to Android Emulator to install the emulator library.

10-4-android-emulator

Create a Virtual Device using AVD

Launch Android Studio and launch AVD Manager from Configure toggle.

10-5-launch-avd-manager

Click Create Virtual Device button on Android Virtual Device Manager.

10-6-create-virtual-device

Select a hardware

From Select Hardware panel, search for Pixel 2 and click Next to install and configure the hardware profile.

10-7-select-hardware

Launch the installed virtual device

Now you can see your installed hardware in the list of devices shown at AVD Manager.

10-8-your-virtual-devices

Click on the Play/Launch icon in the actions column to launch the emulator.

Your emulator is now ready to use.

10-9-emulator-view

Enable developer mode on your virtual device

Navigate to Settings > About emulated device screen on your emulated device.

Tap on Build number at the bottom of the screen 7 times to enable developer mode :)

10-10-build-number

You can find more information about Android Developer Mode and USB debugging on the article: Enable Developer Mode and USB debugging

Inspect Chrome via USB debugging

When developer mode is enabled, USB debugging is enabled for the emulated device automatically.

You can start inspecting the Chrome tabs on your emulated device by opening DevTools on your desktop Chrome, and navigating to Remote devices panel.

Once you click Android SDK built for x86 device on the left sidebar, you'll be able to see all the chrome processes on the device.

Click on Inspect button next to the process you'd like to inspect and that's it!

10-11-remote-devices

To find out more about Chrome DevTools remote device debugging, visit official docs: https://developers.google.com/web/tools/chrome-devtools/remote-debugging#discover

Good to go 🎯

Now you can continue to Step 11 -> Serve a secure local server.