Chrome Remote Debugging a local site on a Virtual Machine with port forwarding

Question

I have installed the ADB plugin extension for Chrome and enabled USB debugging. I can see my device listed for inspecting and that works fine.

What I don't know is how to map my developing website which is run on a virtual machine on 192.168.56.2 . I don't know how to configure the port forwarding option.

So for my local development machine (Mac OS), I have this hosts config:

sandbox.local 192.168.56.2

and I access http://sandbox.local to see my website.

But I don't know how to do that on my Android device to debug the website layout for mobile.

What I tried:

Enable Port forwarding and 8088 -> 192.168.56.2:80

now when I go to my mobile device and enter:

localhost:8088

I see localhost not found message. Can someone help me set this up?

Answer 1

Chrome now includes Mobile Emulation feature, with which you can emulate a device regardless of where the page is.

Answer 2

It sounds like you are trying to view a website from a server that is on the same internal network as your android device. It's usually at this point where you begin to see the difference between browsers. I noticed that with a mobile device I cannot use chrome or most other browsers to view websites on my local server thru my own network. But with Firefox you can do a little more 'debugging'. Use firefox and type in the IP of the server ({http://ur.local.ip})

u should get very different results.

If that does you no good, then since you have set up port forwarding on your modem then simply disconnect your phone from your wifi, and access the server from the outside using your cell phone carriers network. Of course you will not be using the internal server's ip address, you will use the modem's ip address. I see you set port forwarding to 8088, if you get no results just by typing in "http://your.ip.add.ress", then just add :8088 at the end. Let me know the results.