Kayce Basques

Meggin Kearney

Sofia Emelianova

You can use port forwarding to:

• Case 1. Debug a tab opened on a different Chrome instance.
• Case 2. Host a site on a development machine web server, then access the content from an Android device through a USB cable.

InCase 2, port forwarding works through a listening TCP port on your Android device that maps to a TCP port on your development machine. Traffic between the ports travel through the USB connection between your Android device and development machine, so the connection doesn't depend on your network configuration.

Additionally, if your web server is using a custom domain, you can set up your Android device to access the content at that domain withcustom domain mapping.

Set up port forwarding

Depending on your case, follow the next steps.

Case 1: Set up port forwarding to another Chrome instance

1. Run another Chrome instance with the--remote-debugging-port=PORT parameter, for example:

   MacOS

   open-a"Google Chrome"--args--remote-debugging-port=PORT

   Windows

   startchrome--remote-debugging-port=PORT

   Linux

   google-chrome--remote-debugging-port=PORT

2. In the Chrome instance you are debugging with:

   1. Openchrome://inspect/#devices.
   2. Make sureDiscover network targets is checked.
   3. ClickConfigure next to the checkbox.

   4. InTarget discovery settings, enterlocalhost:PORT, checkEnable port forwarding, and clickDone.

      

   5. Back inDevices, you'll see a new remote target. Clickinspect next to the tab you want to debug.

      

3. A new DevTools window indevice mode opens. In the address bar at the top, you can enter the address of the website you want to debug.

   

4. Next to the address bar, you can toggle input methods.

Case 2: Set up port forwarding through USB for your Android device

1. Set upremote debugging between your development machine and your Android device. When you're finished, you should see your Android device in the list.

   

2. Make sureDiscover USB devices is checked.

3. ClickPort forwarding next to the checkbox.

4. InPort forwarding settings,localhost:8080 is set up by default. CheckEnable port forwarding.

   .

5. If you want to set up other ports, follow the next to steps. Otherwise skip the steps and clickDone.

6. In thePort textfield on the left, enter the port number from which you want tobe able to access the site on your Android device. For example, if you wanted to access the sitefromlocalhost:5000 you would enter5000.

7. In theIP address and port textfield on the right, enter the IP address or hostname on whichyour site is running on your development machine's web server, followed by the port number. Forexample, if your site is running onlocalhost:5000 you would enterlocalhost:5000.

8. ClickDone.

Port forwarding is now set up. You can see a status indicator of the port forward at the top as wellas besides the device name.

To view the content, open up Chrome on your Android device and go to thelocalhost port that youspecified in theDevice port field. For example, if you entered5000 in the field, then youwould go tolocalhost:5000.

Map to custom local domains

Custom domain mapping lets you to view content on an Android device from a web server on yourdevelopment machine that is using a custom domain.

For example, suppose that your site uses a third-party JavaScript library that only works on theallow-listed domainchrome.devtools. So, you create an entry in yourhosts file on yourdevelopment machine to map this domain tolocalhost (i.e.127.0.0.1 chrome.devtools). Aftersetting up custom domain mapping and port forwarding, you'll be able to view the site on yourAndroid device at the URLchrome.devtools.

Set up port forwarding to proxy server

To map a custom domain you must run a proxy server on your development machine. Examples of proxyservers areCharles,Squid, andFiddler.

To set up port forwarding to a proxy:

1. Run the proxy server and note the port that it's using.

   Note: The proxy server and your web server must run on different ports.

2. Set upport forwarding to your Android device. For thelocal address field, enterlocalhost: followed by the port that your proxy server is running on. For example, if it'srunning on port8000, then you would enterlocalhost:8000. In thedevice port fieldenter the number that you want your Android device to listen on, such as3333.

Configure proxy settings on your device

Next, you need to configure your Android device to communicate with the proxy server.

1. On your Android device go toSettings >Wi-Fi.

2. Long-press the name of the network that you are connected to.

   Note: Proxy settings apply per network.

3. TapModify network.

4. TapAdvanced options. The proxy settings display.

5. Tap theProxy menu and selectManual.

6. For theProxy hostname field, enterlocalhost.

7. For theProxy port field, enter the port number that you entered fordevice port in theprevious section.

8. TapSave.

With these settings, your device forwards all of its requests to the proxy on your developmentmachine. The proxy makes requests on behalf of your device, so requests to your customized localdomain are properly resolved.

Now you can access custom domains on your Android device Android just as you would on thedevelopment machine.

If your web server is running off of a non-standard port, remember to specify the port whenrequesting the content from your Android device. For example, if your web server is using the customdomainchrome.devtools on port7331, when you view the site from your Android device you shouldbe using the URLchrome.devtools:7331.