Click here to Skip to main content
13,191,877 members (57,316 online)
Click here to Skip to main content
Add your own
alternative version

Stats

4.3K views
1 bookmarked
Posted 17 May 2017
MIT

Using ngrok to Test Web Apps on Mobile While Developing

, 17 May 2017
Rate this:
Please Sign up or sign in to vote.
Using ngrok to Test Web Apps on Mobile while developing

I often never really test on mobile properly because most sites are responsive so it's easier to just resize your browser and test like that. This works great until you trying to get the perfect mobile experience and looking at every element like how drop lists present themselves with different content taking into account how wrapping might happen in mobile browser controls (which is different from web browser, even in chrome Smile). A long time ago, I briefly used ngrok just to test how it works and now I use it constantly for testing apps while they are still in development.

Why Use ngrok?

Lots of developers might ask why use ngrok and not something like the some of the debug functionality that Android provides for chrome which is a lot more powerful. To that, I would say that I didn't need to debug anything Smile with tongue out, I just want see how it looks on the device with the device specific controls. Also, that solution would work fine for chrome on Android, what about other browsers on other phones like Windows phone or even Blackberry? Now that solution might work for all devices, but figuring that out and connecting the devices to the PC would take time and effort.

Using ngrok is simple and easy, so why not save time?

Installing ngrok

Installing ngrok is really simple. If you have Chocolatey installed, you can simply type the below into a cmd window.

choco install ngrok.portable

and by the nature of Chocolatey, you will now have ngrok installed Smile.

Alternatively, you can go to the ngrok website and download it from there.

image

You can test if it's installed correctly why typing ngrok into a cmd window, you should see a list of available commands come up.

Using ngrok

This is where the really easy part comes in Open-mouthed smile. I created a new .NET core project and hit run and it's running on port 32705 locally on my machine.

image

By opening the cmd console typing the below command in:

ngrok http localhost:32705 --host-header localhost

This will go ahead and create a tunnel for you to your local port which is exposed on the internet. Smile

image

Not the forwarding urls, we get an http and https link by default. Browse to this link from your mobile phone and you should notice all the requests showing up in the console.

image

You can also navigate to http://localhost:4040/ and get similar information.

image

As you can see, this page has more functionality than just streaming requests, you can also dig into headers and replay requests from this page.

Conclusion

Everything these days runs on mobile and users rely heavily on their mobile phones so why not take that little extra time testing your apps on mobile, especially because it's so easy.

License

This article, along with any associated source code and files, is licensed under The MIT License

Share

About the Author

Gordon Beeming (RSA)
Software Developer Nologo Studios
South Africa South Africa
Gordon Beeming works at Nologo Studios in the sunny city of Durban, South Africa. His current focus is on Devloper Efficiencies and R&D. When he's not hacking away at a keyboard in Visual Studio he'll generally be relaxing with his family or hitting the black top getting in some mileage. He is a Visual Studio ALM Rangers, Visual Studio ALM MVP.

http://beeming.net

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionAlternatives to NGrok? Pin
BSalita19-May-17 22:24
memberBSalita19-May-17 22:24 
Questiongood info Pin
Member 1320589617-May-17 22:52
memberMember 1320589617-May-17 22:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171017.2 | Last Updated 18 May 2017
Article Copyright 2017 by Gordon Beeming (RSA)
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid