Skip to content

Instantly share code, notes, and snippets.

@gearsandcode

gearsandcode/android_studio-sim-remote_debug-OSX.md

Last active March 28, 2017 17:06
Show Gist options
  • Save gearsandcode/b309682f15de71200d440155706938f9 to your computer and use it in GitHub Desktop.
Save gearsandcode/b309682f15de71200d440155706938f9 to your computer and use it in GitHub Desktop.
Download ZIP
Android Studio + Simulator + remote debug w/ devtools on OSX
Raw
android_studio-sim-remote_debug-OSX.md

For this example we'll add a Virtual Device for a Samsung Galaxy 5 aka 'the main culprit'. You will not have access to Network activity with a virtual device, you'd need to plug in the physical device.

Setup Simulator

  1. Download Android Studio here: https://developer.android.com/studio/install.html and follow the installation instructions.
  2. Download the Galaxy S5 emulator skin from the top of the page here: http://developer.samsung.com/technical-doc/view.do?v=T000000215 then save it and extract it to a directory for use in a later step
  3. Start Android Studio, you may have to browse to it
  4. Start a New Project.
    • Make sure that Phone and Tablet are checked and use the latest API 25+
    • Use default activity and click through and Finish
    • Wait for build..
  5. Click the 'Run' play icon or ^R
  6. Click the Create New Virtual Device button and be sure that the Phone category is selected.
  7. Click the New Hardware Profile button
  8. You must name the device and enter the hardware profile for the Galaxy S5 located here: http://developer.samsung.com/technical-doc/view.do?v=T000000215 (for all other Samsung devices: http://developer.samsung.com/technical-doc/view.do?v=T000000095)
  9. Scroll to the bottom of the profile pane to Default Skin and browse to the directory from step 2
  10. You may have to select a different category and then select phone again for your new device to show up, select it and click Next
  11. Choose or download a system image to use with your new virtual device and click Next
  12. Make sure that Device Frame is enabled and click Finish
  13. Select your new Virtual Device as the deployment target and click OK
  14. Wait for device to boot, click home button to get to Chrome

Setting up remote debug

  1. In the emulator point Chrome to: https://10.0.2.2:4200/login or wherever you want to go. Primarily including this to document how you access localhost.
  2. Go use remote debugging with Chrome devtools follow these instructions: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
  3. Be sure to toggle Screencast on. It's at the bottom of the instructions. Just click the mobile devices icon in devtools
  4. Hit refresh and if you see any Failed to load resource: net::ERR_INSECURE_RESPONSE errors, copy the url and paste it into the url bar above the screencast in devtools and hit enter. That will take you to the url in the simulator where you should be asked if you'd like to proceed or not. You do, click advanced > proceed.
  5. Repeat 4 until you don't get that error for any URLs.
  6. Return to https://10.0.2.2:4200/login by hitting back a few times or you can paste it directly into the screencast url bar.
  7. Use devtools as you normally would. Again you will not have access to Network activity with a virtual device.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment