The App: Really Cool Test/Debugging Setup

The App: Really Cool Test/Debugging Setup

Trying to host a local site on your local machine while communicating with other hosts can be a huge pain. But it's really important for debugging and seeing the traffic and what's going on.

If you're trying to do that, here's a series of steps that make it much easier if your trying to do something with a web project out of Visual Studio 2015.

Create your web project in VS2015

  • This will create an entry in the IIS Express applicationhost.config file with your project name and assign a port number to go with it.
  • You'll need to know these later.

Install ngrok

  • Download NGROK from here.
  • Install it somewhere convenient.
  • Modify the properties of the executable and make sure to "unblock it".
  • Update your system's environment variable (ask Cortana where) and add the location where you installed it to the Path variable.

Launch ngrok

  • In a command windows, do this: ngrok http <your project's port number>
  • You will see a pair of URLs.
    One is your local host and port number that you can use to see the incoming traffic. It looks like this
  • The other is the address forwarding that's available on the internet. It looks like this: -> localhost:<your project's port number>
  • Launch your favorite browser and navigate to the above localhost and port number. You can't do anything yet, but you'll be ready to see when things start happening.
  • Leave the ngrok command window open and ngrok running. Restarting it gives you a new port forwarding address each time and you'll have to start over. There might be a way to fix this, but I haven't found it. Haven't looked that hard, either. {Edit 8/22/2016: This is true if you get a free copy, but they have a subscription version that will let you create a subdomain within that is fixed. Beyond cool.}

Change IIS Express to bind the incoming traffic to your project

  • Navigate to your project's solution folder.
  • In the .vs/config folder, edit the file applicationhost.config.
  • Look for your project name in the settings.
    It'll look like this:
    <sites> ... <site name="<your project's website name>" id="2"> ... <bindings> <binding protocol="http" bindingInformation="*:<your project's port number>:localhost" /> <binding protocol="http" bindingInformation="*:<your project's port number>:<your ngrok subdomain value>"/> </bindings> </site> ... </sites>
  • The first binding protocol entry will already be there. You'll need to add the second one referencing your ngrok subdomain .
  • Mine looked like this:
    <binding protocol="http" bindingInformation="*:43276:localhost" /> <binding protocol="http" bindingInformation="*"/>

Edit Windows to allow it to serve incoming traffic

  • Windows isn't going to let just any traffic come ploughing into your machine, right?.
  • Open up a command prompt as admimistrator.
  • Enter this command:
    netsh http add urlacl url=http://<your ngrok subdomain><your project's port number>/ user=everyone
  • Later, when you're cleaning up, you can remove that entry from a command prompt (as Administrator) like this (don't forget the trailing slash):
    netsh http delete urlacl url=
  • If you forget which ones you have, you can list them like this:
    netsh http show urlacl

Stop Visual Studio 2015 and start it up again, running it as admin

  • Navigate to the ngrok route http://<your ngrok subdomain>
  • You should see your project's website.

Each time anyone accesses your website (using the ngrok URL) all your traffic will be showing in the browser you used to navigate to<ngrok port number> Mine was

Now I can monitor incoming traffic from other website (to see webhooks and redirects, etc.).

Neat stuff.