Search code examples
androidgoogle-chromeweb-applicationsadbmobile-devices

Using Chrome on mobile device to read HTML files on a PC through USB?


Currently I'm developing a web page application and I would like to test it on my mobile device (Android, to be specific). I need to run it on the actual device, and simply testing it using the emulator on the PC Chrome is not enough. I know how to use ADB to inspect the running result on a PC as I open the URL on my phone, which is very helpful; however, every time I make a change to the web page, I still need to upload the files to a remote server in order for the Chrome on my phone to open it. I wonder if there's a way to use my phone to directly open the HTML file on my PC while they're connected by USB? Thanks.


Solution

  • I found myself asking the same question, and through a little bit of experimentation I have found a solution which works.

    First, connect your device as usual like in Angus' answer. The trick is another feature of Chrome's DevTools, port forwarding. Go into the Remote devices tab, followed by Settings, and tick the box that says Port forwarding. I'll use port 8000 for both sides here, but you can change them if you wish. Click Add rule, and fill in 8000 for the device port and localhost:8000 for the local address. Confirm, and your port forward is set up.

    As for the server, if you just want a simple directory mirror I recommend using something like Python's SimpleHTTPServer module (http.server in Python 3), which you can run like this from the target directory:

    python -m SimpleHTTPServer
    python3 -m http.server
    

    Once you have the server running, you can open a new tab either on your phone or from Chrome with URL localhost:8000, or whichever port you used for the device. All the files under this structure will then be available.

    Read more: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server