Use the mobile phone to access the local environment of the sharp weapon Ngrok

We are debugging the mobile page, especially when debugging the page, we will encounter this situation, the mobile phone connected to the company's WiFi, development environment (desktop) plug the Company's network cable, we want to use the mobile phone to access the page under the development environment. This time, if the network cable and WiFi is in the same network segment, then directly on the phone to access the computer's IP can access to our local Web services. However, many times, the company's network is not so set up, WiFi and network cable is not a network segment, then, through the above method can not be accessed.

Sometimes the debugs have to be done on the phone, and the simulations under chrome are not enough. What happens now? Before I took this approach, the computer plug a 360wifi (plug the kind of USB hole), and then share the hotspot, the phone connected to this hotspot online, you can access to the development environment. If you need to view an HTTP request, open Fiddler on your computer, set up a proxy, and then set WiFi on your phone as the agent for Fiddler, (the port defaults to 8888). This way the request from the phone is captured by fiddler and you can debug the code using Fiddler's powerful features. The above method is very convenient, but requires a small hardware, 360wifi. You can buy one, very cheap, Baidu also has the same product. What if we don't have the hardware at hand? Then the protagonist appeared, and that was Ngrok. What the hell is Ngrok? In fact, it is a reverse proxy, we run this service on the machine, it can put a local port proxy to the public network. What is the concept of proxy to public network? Public network Ah, that is everyone can access to, there is no network restrictions. Of course, our test machine, connected to any network under the mobile phone is also possible. Unfortunately, Ngrok was erected in the United States and has been lost to the wall by our great motherland. But! A conscience netizen in the domestic set up a server, we can use any, clap! Nonsense said so much, we look at Ngrok how to use it? It's pretty simple, actually. First, download the relevant documentsFirst of all, download the required Ngrok software from this man's website (http://www.tunnel.mobi/), Windows, Linux, Mac platforms have OH. My is the Windows environment, download after decompression is a ngrok.exe file. Then, you need a configuration file, as well as a download, and a ngork.cfg file after the download. second, the operation of servicesAfter downloading the two files, we can easily find a directory to put it on the line, for example, I put on the D-Drive, so it is OK: Then, open the CMD terminal, enter the following command to start the service: Ngrok-config ngrok.cfg-subdomain Lvdabao 80 Use the-config parameter to specify the configuration file,-subdomain specify the subdomain name and local port of the access, the following interface appears, indicating that the boot succeeded: Note that this subdomain name is optional, but not with the name of others, because this is the unique identity of your agent, You can then use the http://lvdabao.tunnel.mobi/address to access your local port 80. As long as it is connected to the public network of any device can access the Oh, well, pick up your phone. Third, enter the debugging interfaceStarting the service is not enough, our ultimate goal is to debug, we have to capture the HTTP request. This is quite simple to implement because Ngrok is ready for you. It's pretty sweet. Please look at the above services to run up the information, there is a web Interface 127.0.0.1:4040, we directly access it can be debugged, in your local browser to enter this address, try it. Very cool There is no, you can see the HTTP request header and return the content, you need to have all. And, there is a better use of the function, see the Replay button, click on it can be manually re-launch your selected request, simply can not be more praise, so we debug a data interface, also save the old to refresh the page on the phone, especially debug page, do not have to brush the bloody two-dimensional code every time. The basic use of this tool is introduced here, to meet the needs of our initial request. In fact, it has more powerful functions, interested can FQ to the official website to view the document. Finally again for the domestic this man to praise, we can also go to his website above view related information: http://www.tunnel.mobi/

A sharp weapon to access the local environment using your phone Ngrok