Your redirect rule seems reasonable although the condition should probably be the simpler.
<conditions>
<add input="{HTTPS}" pattern="^OFF$" />
</conditions>
However you have made the redirect permanent (301) and this is almost always the wrong value. It tells browsers that the redirect is permanent and therefore don't bother asking again. In many cases this means the browser isn't ever going back to the original URL even if the user types it in. It'll just autoredirect to the new URL. Especially when you're testing your redirect rules this will permanently mangle things as your redirect rule is no longer used. You should leave it as temporary (302). Temporary tells the browser to check again later. I suspect at this point that your browser is permanently going to the URL that you originally configured as permanent and that may not be what you're using now.
If you are in this state then here is a link to how to "reset" it in Chrome.
VS has no issues with HTTP to HTTPS redirects and debugging. It works just fine. To save some time ensure your app's startup URL is configured for the HTTPS protocol though. If you're running IISX then you should be able to bring up the properties window (F4) of VS, select the project in Solution Explorer and see the option to enable SSL.