{"id":16166,"date":"2023-11-08T13:00:56","date_gmt":"2023-11-08T21:00:56","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=16166"},"modified":"2023-11-08T10:59:14","modified_gmt":"2023-11-08T18:59:14","slug":"test-and-debug-securely-with-dev-tunnels","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/test-and-debug-securely-with-dev-tunnels\/","title":{"rendered":"Test and debug securely with Dev Tunnels"},"content":{"rendered":"<p><span data-contrast=\"auto\">Dev Tunnels is a security-first, developer-optimized tunneling service designed to allow you to securely expose your local endpoint to the internet. This is helpful for sharing in-progress work, testing, and debugging web APIs and webhooks, experimenting on other devices, and testing integrations with cloud services. Dev Tunnels is cross-platform and available through:<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"3\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Symbol&quot;,&quot;469769242&quot;:[8226],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;\uf0b7&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"1\" data-aria-level=\"1\"><a href=\"https:\/\/aka.ms\/devtunnels\/docs\"><span data-contrast=\"none\">The devtunnel CLI<\/span><\/a><span data-ccp-props=\"{}\">\u00a0<\/span><\/li>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"3\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Symbol&quot;,&quot;469769242&quot;:[8226],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;\uf0b7&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"2\" data-aria-level=\"1\"><a href=\"https:\/\/aka.ms\/devtunnels\/vs\"><span data-contrast=\"none\">Dev Tunnels in Visual Studio<\/span><\/a><span data-ccp-props=\"{}\">\u00a0<\/span><\/li>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"3\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Symbol&quot;,&quot;469769242&quot;:[8226],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;\uf0b7&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"3\" data-aria-level=\"1\"><a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/port-forwarding\"><span data-contrast=\"none\">Local port forwarding in VS Code<\/span><\/a><span data-ccp-props=\"{}\">\u00a0<\/span><\/li>\n<\/ul>\n<p><span data-contrast=\"auto\">Today, we\u2019re excited to walk you through the advantages of Dev Tunnels and provide a step-by-step guide on how to use the <\/span><code><span data-contrast=\"auto\">devtunnel<\/span><\/code><span data-contrast=\"auto\"> CLI. You can either follow along with our Dev Tunnels engineer, Utsa, in the video below, or continue reading for the detailed walkthrough with some bonus tips at the end.\u00a0<\/span><span data-ccp-props=\"{&quot;335559739&quot;:0}\">\u00a0<\/span><\/p>\n<p style=\"text-align: center;\"><iframe src=\"\/\/www.youtube.com\/embed\/Jg926wKDt3g\" width=\"560\" height=\"314\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2 aria-level=\"1\"><span data-contrast=\"none\">Benefits<\/span><span data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:240,&quot;335559739&quot;:0}\">\u00a0<\/span><\/h2>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"2\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Symbol&quot;,&quot;469769242&quot;:[8226],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;\uf0b7&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"4\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">Secure by default<\/span><\/b><span data-contrast=\"auto\">: All connections to a tunnel are encrypted and authenticated, ensuring that only you can access the tunnel you create.\u00a0<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/li>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"2\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Symbol&quot;,&quot;469769242&quot;:[8226],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;\uf0b7&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"5\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">Persistent URLs<\/span><\/b><span data-contrast=\"auto\">: Keep the same URL for as long as you need. Please note, they will be automatically deleted after 30 days of inactivity though, or you can set a custom expiration.\u00a0<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/li>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"2\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Symbol&quot;,&quot;469769242&quot;:[8226],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;\uf0b7&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"6\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">Multi-port hosting: <\/span><\/b><span data-contrast=\"auto\">Host multiple ports on a single dev tunnel simultaneously.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/li>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"2\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Symbol&quot;,&quot;469769242&quot;:[8226],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;\uf0b7&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"7\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">Global availability<\/span><\/b><span data-contrast=\"auto\">: The Dev Tunnels service is available globally and your tunnels are automatically created in the nearest available region.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/li>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"2\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Symbol&quot;,&quot;469769242&quot;:[8226],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;\uf0b7&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"8\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">Traffic inspection: <\/span><\/b><span data-contrast=\"auto\">Inspect your tunnel\u2019s traffic using the familiar interface of browser DevTools to aid in your debugging process.<\/span><b><span data-contrast=\"auto\">\u00a0<\/span><\/b><span data-ccp-props=\"{}\">\u00a0<\/span><\/li>\n<\/ul>\n<h2>Step 1: Download and install the devtunnel CLI and login<\/h2>\n<p><span data-contrast=\"auto\">Begin by <\/span><a href=\"https:\/\/learn.microsoft.com\/azure\/developer\/dev-tunnels\/get-started?tabs=windows#install\"><span data-contrast=\"none\">downloading and installing the devtunnel CLI<\/span><\/a><span data-contrast=\"auto\"> that corresponds with your operating system. Then, log in using either your Entra ID, Microsoft, or GitHub account. Dev Tunnels doesn\u2019t support anonymous tunnel hosting.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><code><span data-contrast=\"auto\">devtunnel user login<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/code><\/p>\n<p><span data-contrast=\"auto\">Tip: Alternatively, you can log in using a device code login flow by running <\/span><code><span data-contrast=\"auto\">devtunnel login \u2013d<\/span><\/code><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<h2>Step 2: Launch a local server and host or create a tunnel<\/h2>\n<p><span data-contrast=\"auto\">Once logged in, you can start hosting a dev tunnel using the <\/span><span data-contrast=\"auto\">host<\/span><span data-contrast=\"auto\"> command. The command should be run on the host system running the server you want accessible through the dev tunnel.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><code><span data-contrast=\"auto\">devtunnel host \u2013p PORT<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/code><\/p>\n<p><span data-contrast=\"auto\">Note: This will generate a <\/span><i><span data-contrast=\"auto\">temporary <\/span><\/i><span data-contrast=\"auto\">dev tunnel unless a dev tunnel ID is specified. For a persistent tunnel, run <\/span><code><span data-contrast=\"auto\">devtunnel create<\/span><\/code><span data-contrast=\"auto\">.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">A successful host or create command will print out your tunnel ID, the Dev Tunnel URL, and the inspection URL in the console. Congratulations, you\u2019ve just created your first Dev Tunnel! You can now connect to your tunnel by visiting this URL in a web browser and logging in with the same account as you used to host the tunnel.\u00a0<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<h2>Step 3: Learn authentication and access control tips<\/h2>\n<p style=\"text-align: left;\"><span data-contrast=\"auto\">For the following bonus tips, you can either follow along with our Dev Tunnels engineer, Jason, in the video below, or continue reading ahead.\u00a0<\/span><span data-ccp-props=\"{&quot;335559685&quot;:0}\">\u00a0<\/span><\/p>\n<p style=\"text-align: center;\"><iframe src=\"\/\/www.youtube.com\/embed\/yCYLurylgj8?si=N-2_ICxP315EQx7j\" width=\"560\" height=\"314\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2>Grant access to your organization<\/h2>\n<p><span data-contrast=\"auto\">By default, tunnels are only accessible to you. Optionally, you can grant access to your organization. If you\u2019re logged in with your AAD account, you can grant access to everyone in your AAD tenant by running:<\/span><span data-ccp-props=\"{&quot;335559685&quot;:0}\">\u00a0<\/span><\/p>\n<p><code><span data-contrast=\"auto\">devtunnel create<\/span><span data-ccp-props=\"{&quot;335559685&quot;:0}\">\u00a0<\/span><\/code><\/p>\n<p><code><span data-contrast=\"auto\">devtunnel access add --tenant\u00a0<\/span><span data-ccp-props=\"{&quot;335559685&quot;:0}\">\u00a0<\/span><\/code><\/p>\n<p><span data-contrast=\"auto\">If you\u2019re logged in with your GitHub account, you can grant access to everyone in your org by running:<\/span><span data-ccp-props=\"{&quot;335559685&quot;:0}\">\u00a0<\/span><\/p>\n<p><code><span data-contrast=\"auto\">devtunnel create<\/span><span data-ccp-props=\"{&quot;335559685&quot;:0}\">\u00a0<\/span><\/code><\/p>\n<p><code><span data-contrast=\"auto\">devtunnel access add \u2013org &lt;org-name&gt;\u00a0<\/span><span data-ccp-props=\"{&quot;335559685&quot;:0}\">\u00a0<\/span><\/code><\/p>\n<h2>Working with app authentication<\/h2>\n<p><span data-contrast=\"auto\">If the application already has integrated authentication, you might not need that additional layer of access control. In this case, configure the tunnel to allow anonymous connections by appending <\/span><code><span data-contrast=\"auto\">--anonymous<\/span><\/code><span data-contrast=\"auto\"> to the create command. Then the application can be in full control of the client authentication and login flow as needed. Depending on the type of login performed by the application, two additional configuration steps might be necessary. Normally the dev tunnel relay will rewrite the http host header to be localhost because that works better for most applications, but for auth redirection you would need to change that option, so that it will preserve the tunnel DNS name. You can do this by running:<\/span><span data-ccp-props=\"{&quot;335559685&quot;:0}\">\u00a0<\/span><\/p>\n<p><code><span data-contrast=\"auto\">devtunnel update \u2013host-header unchanged<\/span><span data-ccp-props=\"{&quot;335559685&quot;:0}\">\u00a0<\/span><\/code><\/p>\n<p><span data-contrast=\"auto\">This command ensures that the host header remains unchanged, allowing the application to redirect to the tunnel. You have one more step to after this. You will have to configure the <\/span><a href=\"https:\/\/learn.microsoft.com\/azure\/active-directory\/develop\/quickstart-register-app#add-a-redirect-uri\"><span data-contrast=\"none\">redirect URI<\/span><\/a><span data-contrast=\"auto\"> as a valid URI in your application. You can see a demo of this <\/span><a href=\"https:\/\/youtu.be\/yCYLurylgj8?si=R9DrY18_52ab9-8C&amp;t=300\"><span data-contrast=\"none\">here<\/span><\/a><span data-contrast=\"auto\">.<\/span><span data-ccp-props=\"{&quot;335559685&quot;:0}\">\u00a0<\/span><\/p>\n<h2>Use a client access token<\/h2>\n<p><span data-contrast=\"auto\">For web API clients, it\u2019s more convenient to connect and authenticate with a tunnel access token. Obtain the dev tunnel access token by creating a tunnel and then using the dev tunnel token command:<\/span><span data-ccp-props=\"{&quot;335559685&quot;:0}\">\u00a0<\/span><\/p>\n<p><code><span data-contrast=\"auto\">devtunnel create<\/span><span data-ccp-props=\"{&quot;335559685&quot;:0}\">\u00a0<\/span><\/code><\/p>\n<p><code><span data-contrast=\"auto\">devtunnel token --scope connect<\/span><span data-ccp-props=\"{&quot;335559685&quot;:0}\">\u00a0<\/span><\/code><\/p>\n<p><span data-contrast=\"auto\">You can now utilize this token in command-line tools like curl or web API testing tools like Postman. The header name `x-tunnel-authorization` is distinct from the standard authorization header to avoid potential conflicts with any application auth. You can see a demo of this <\/span><a href=\"https:\/\/youtu.be\/yCYLurylgj8?si=mm1gOo8PPeynqbS1&amp;t=682\"><span data-contrast=\"none\">here<\/span><\/a><span data-contrast=\"auto\">.<\/span><span data-ccp-props=\"{&quot;335559685&quot;:0}\">\u00a0<\/span><\/p>\n<h2>Pre-auth a client connection<\/h2>\n<p><span data-contrast=\"auto\">Instead of having each client authenticate tunnel connections with a login or an access token, it\u2019s possible to forward tunnel ports to a client\u2019s localhost. The <\/span><code><span data-contrast=\"auto\">devtunnel connect<\/span><\/code><span data-contrast=\"auto\"> command establishes a secure authenticated connection to the tunnel relay, allowing client apps to connect to forwarded ports from the tunnel on their localhost. You can see a demo of this <\/span><a href=\"https:\/\/youtu.be\/yCYLurylgj8?si=VVfCQzxDlSlQzAwq&amp;t=889\"><span data-contrast=\"none\">here<\/span><\/a><span data-contrast=\"auto\">.<\/span><span data-ccp-props=\"{&quot;335559685&quot;:0}\">\u00a0<\/span><\/p>\n<h2><span data-contrast=\"auto\">Wrapping up\u00a0<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/h2>\n<p><span data-contrast=\"auto\">Now that you know the main benefits of Dev Tunnels, how to create and host a tunnel, and authentication and access control tips, you\u2019re ready to boost your productivity when testing and debugging! We\u2019re eager to hear how Dev Tunnels enhances your development process.\u00a0<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">We appreciate the time you\u2019ve spent reporting issues\/suggestions and hope you continue to give us feedback when using dev tunnels on what you like and what we can improve. Your feedback is critical to help us make dev tunnels the best tool it can be! You can share feedback with us on our GitHub repo <\/span><a href=\"https:\/\/aka.ms\/devtunnels\/issues\"><span data-contrast=\"none\">here<\/span><\/a><span data-contrast=\"auto\">.\u00a0<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p style=\"text-align: left;\"><span data-contrast=\"auto\">Happy tunneling!\u00a0<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dev Tunnels is a security-first, developer-optimized tunneling service designed to allow you to securely expose your local endpoint to the internet. This is helpful for sharing in-progress work, testing, and debugging web APIs and webhooks, experimenting on other devices, and testing integrations with cloud services. Dev Tunnels is cross-platform and available through:\u00a0 The devtunnel CLI\u00a0 [&hellip;]<\/p>\n","protected":false},"author":135064,"featured_media":16207,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[275],"class_list":["post-16166","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-365-developer","tag-dev-tunnels"],"acf":[],"blog_post_summary":"<p>Dev Tunnels is a security-first, developer-optimized tunneling service designed to allow you to securely expose your local endpoint to the internet. This is helpful for sharing in-progress work, testing, and debugging web APIs and webhooks, experimenting on other devices, and testing integrations with cloud services. Dev Tunnels is cross-platform and available through:\u00a0 The devtunnel CLI\u00a0 [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/16166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/135064"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=16166"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/16166\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/16207"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=16166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=16166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=16166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}