ChromeDev Tools: Reverse Port Forwarding

Reverse Port Forwarding is fun in Mobile Web Development. It gives us access to localhost from Mobile and Tablet device. Is not this a fun?

The only thing we need to do is to use four digit port number as 8080, 8081 etc. So, instead of http://localhost/index.php, now we need to use something like this: http://localhost:8080/index.php.

For using 4 digit port number create virtual host on your development environment. or setup Apache to use different port than 80. I think, to change port for all, just change Listen 80 to Listen 8080, etc in httpd.conf.

We need to follow steps written here for ChromeDev Tools for enabling Reverse Port Forwarding. I saw that 127.0.0.1 was not working on mobile device for some reason. So, I need to give localhost:8081. 8081 is the port I used. After first use, when I clicked on link which leads to 127.0.0.1:8081, then also it stopped working but in next try it started working as 127.0.0.1 as well. Little strange but good one.
One more thing, many people switch off Wi-Fi when using Chrome Dev. I also tried with that. Later when one image which was coming from web was not showing up and I want to see the post with that, so I enabled wi-fi when reverse port forwarding was working then wi-fi has not created any problem.

Reverse Port Forwarding with Tablet Snapshot

Reverse Port Forwarding with Tablet Snapshot

  • # 1 - by Lori

    I found /etc/apache2/httpd.conf to be 0 bytes long (and found no httpd.conf elsewhere in the root tree). I found the line

    Listen 80

    in /etc/apache2/ports.conf. So far, haven’t managed to pull up localhost:8080. I’ll drop a line if I ever do solve this puzzle.

    • # 2 - by Satya Prakash

      Just search for httpd.conf using grep.

Comments are open for an year period. Please, write here on Facebook page.