go to top

Category Archives: WHYpleasejustwork

How to actually run the Chrome web inspector with an emulated Android device

If you’ve never tried to do this, you’re probably thinking to yourself: “this should be pretty straightforward. Emily should use her time writing about more helpful things” – and you would be mistaken. This is, so far, the most difficult thing I have tried to do as a developer since I started working as one last year. No, I’m not kidding.

If you have tried to do this, my hope is that you’re finding this article early in your search and by the end of reading it a wave of relief will wash over you, ideally not after several days of hair-pulling. I hope you don’t even find out how difficult this was to accomplish for what seems like such a standard workflow. I hope you haven’t been sitting in the Starbucks while the other patrons shift nervously as you swear not quite under your breath for the twentieth time this hour. If that has been you, well…I’m sorry. My SEO probably sucks. But you’re here now. Breathe. This will work.

Preamble

You’re on a Mac (dunno about differences with PCs, but should be mostly the same). You’re connected to the internet and can download whatever. You do not have physical, meatspace, IRL android devices on hand and are therefore not intending to connect anything by said meatspace USB.* So therefore your goal is to:

  1. emulate various android hardware and software combos

because you are:

  1. a web developer who cares about your work

with:

  1. clients who don’t want a terrible product

How to do something that should be super easy but is not: Android emulator edition.

STEP ONE – download stuff from the internet

  • Navigate in your desktop to genymotion.com/#!/download and download Genymotion. This will be your free, very fast emulator. You need to create an account, and don’t forget to check your email and click on the verification before you start up Genymotion.
  • If you don’t already have it, download Virtual Box: virtualbox.org/wiki/Downloads
  • Download the correct version of cyanogenMod’s gapps: I’m going to be running an Android 4.3 device for this tutorial, so try this first and if you want a different version later just substitute that, downloading the correct gapps for whatever version of the OS you want. Here’s the one for Android 4.3: androidfilehost.com/?fid=23060877490000124. Different versions here.
  • Genymotion runs on x86, and we need cyanogen’s gapps as previously stated, which is ARM. What, you think this could stop us? Nah: download this Genymotion ARM translation: filetrip.net/dl?4SUOrdcMRv

STEP TWO – do stuff with that software

  • Go ahead and open up Genymotion.app. Sign in. Click “add” to add a device – in my case I’m making a google galaxy nexus running 4.3 (API 18). Select that device and press “Start”. If all went well, you should be looking at an emulated version of your android device.
  • Next, drag and drop (yes, again, really) the ARM translation file (genymotion-ARM-translation_v1.1.zip). Close and reopen the emulated device. If it doesn’t work try again.
  • Now, install gapps by dragging and dropping the zipped folder onto the screen of your emulated device. Close and reopen the emulated device. If it doesn’t work try again.
  • If you get a message that the google play store stopped working, open up the play store which should now be on your device and update your apps
  • Through the Play Store on your emulated device install Google Chrome (just search for it).

STEP THREE – the final frontier

  • In your emulated device, open the “Settings” app, and scroll down to the bottom where “Developer Options” is NOTE: if you don’t see this, and I am still not making this up, go to: Settings > About/About Phone/About Device > [Software Information >] Build Number and tap seven times on Build Number (it will count down after a few taps and once you’ve got to seven it will – again again again 100% not a joke – say “congratulations you are now a developer!”. Wow, bummer I wasted all that time and money when that’s all it takes.)
  • In developer tools, make sure “USB Debugging” is turned on
  • Now, in Chrome for desktop, in the URL bar type in: chrome://inspect/#devices and glory of glories you should see your emulated device in the list like this:

chrome

 

  • Make sure “Discover USB devices” is checked off if you don’t see anything
  • Now click on “inspect”
  • Back in your emulated device, open up Chrome if it isn’t already, and navigate to the site you want to inspect (also works for me with the apps running on my local server)
  • You should see something like this (emulated device highlighted in red):

Screen Shot 2015-06-18 at 3.57.33 PM

 

STEP FOUR – THERE IS NO STEP FOUR WE DID IT!!!!

Bush

Congratulations everyone. Now…what was I actually testing?

*if you do have real life devices there’s lots of tutorials out there including the official documentation by Google, just Duck Duck Go it.

Thanks to Le Wang for his help to finally solve this.

Posted in WHYpleasejustworkComments Off on How to actually run the Chrome web inspector with an emulated Android device