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.
- Download Android Studio here: https://developer.android.com/studio/install.html and follow the installation instructions.
- 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
- Start Android Studio, you may have to browse to it
- 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..
- Click the 'Run' play icon or ^R
- Click the Create New Virtual Device button and be sure that the Phone category is selected.
- Click the New Hardware Profile button
- 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)
- Scroll to the bottom of the profile pane to Default Skin and browse to the directory from step 2
- 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
- Choose or download a system image to use with your new virtual device and click Next
- Make sure that Device Frame is enabled and click Finish
- Select your new Virtual Device as the deployment target and click OK
- Wait for device to boot, click home button to get to Chrome
- 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.
- Go use remote debugging with Chrome devtools follow these instructions: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
- Be sure to toggle Screencast on. It's at the bottom of the instructions. Just click the mobile devices icon in devtools
- 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. - Repeat 4 until you don't get that error for any URLs.
- 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.
- Use devtools as you normally would. Again you will not have access to Network activity with a virtual device.