{"id":1584,"date":"2013-06-28T14:25:02","date_gmt":"2013-06-28T14:25:02","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/webdev\/2013\/06\/28\/browser-link-feature-in-visual-studio-preview-2013\/"},"modified":"2022-08-09T07:33:28","modified_gmt":"2022-08-09T14:33:28","slug":"browser-link-feature-in-visual-studio-preview-2013","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/browser-link-feature-in-visual-studio-preview-2013\/","title":{"rendered":"Browser Link feature in Visual Studio Preview 2013"},"content":{"rendered":"<p>Browser Link is just a channel between your Visual Studio IDE and any open browser. This will allow dynamic data exchange between your web application and Visual Studio.<\/p>\n<p>This feature is enabled by default in Visual Studio 2013 Preview. When Browser Link is enabled we register an HTTPModule with ASP.NET, which will then inject a &lt;script&gt; reference to every page request from the server. It is this JavaScript that does the magic of connecting the browser to Visual Studio. For Preview, we have a feature called the \u201cRefresh Linked Browsers\u201d that makes use of this channel between browsers and IDE.<\/p>\n<p>Because the browser-side code is all JavaScript, it should work on all browsers, without requiring any other browser plug-in. It also works on iPad\/ iPhone emulators. The connection between the browser and Visual Studio uses SignalR, an ASP.NET technology for bi-directional communication over HTTP. When Browser link is enabled, Visual Studio acts as a SignalR server, to which multiple clients (the browsers) can connect.<\/p>\n<p>&#160;<a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/4477.image_thumb_2C877D6C.png\"><img decoding=\"async\" title=\"image\" style=\"margin: 0px\" border=\"0\" alt=\"image\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/4477.image_thumb_2C877D6C.png\" width=\"503\" height=\"140\" \/><\/a> <\/p>\n<p> Let me try to walk you through the feature with a few questions:<\/p>\n<p><strong>1. What does the Browser Link feature look like?<\/strong><\/p>\n<p>As mentioned earlier, \u201cRefresh Linked Browser\u201d is the only feature that we have for Preview. This shows up with a little Refresh icon <a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/3480.image_thumb_535593AC.png\"><img decoding=\"async\" title=\"image\" border=\"0\" alt=\"image\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/3480.image_thumb_535593AC.png\" width=\"34\" height=\"27\" \/><\/a>&#160; in your toolbar next to debug drop down .<\/p>\n<p>This feature becomes active as soon as you navigate to a page in your current project. You could do F5, Ctrl+F5, \u201cView in Browser\u201d or open any browser and paste your requested url to get this started.<\/p>\n<p>In the image below you can see that:<\/p>\n<blockquote>\n<p>1.&#160; \u201cRefresh Linked Browsers\u201d is active as you may have browsers opened at this point.<\/p>\n<p>2.&#160; Brower Link feature is ON by default.<\/p>\n<p>3.&#160; \u201cRefresh Linked Browsers\u201d has a keyboard shortcut (Ctrl+Alt+Enter).<\/p>\n<p>&#160; <a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/8688.image_thumb_4C365734.png\"><img decoding=\"async\" title=\"image\" border=\"0\" alt=\"image\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/8688.image_thumb_4C365734.png\" width=\"236\" height=\"65\" \/><\/a> <\/p>\n<\/blockquote>\n<p><strong>2. How will I know which browsers are connected to VS?<\/strong><\/p>\n<p>Once you navigate to your page using various browsers, they will be listed in a tooltip as you hover over the Refresh icon <a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/3480.image_thumb_535593AC.png\"><img decoding=\"async\" title=\"image\" border=\"0\" alt=\"image\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/3480.image_thumb_535593AC.png\" width=\"34\" height=\"27\" \/><\/a> <\/p>\n<p>The tooltip will look like the image below. Note that the tooltip shows how many browsers are connected. It also lists the connections with their respective urls.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/6545.image_thumb_2C1B4A77.png\"><img decoding=\"async\" title=\"image\" border=\"0\" alt=\"image\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/6545.image_thumb_2C1B4A77.png\" width=\"207\" height=\"87\" \/><\/a> <\/p>\n<p> If there are no browsers open for the project currently open in Visual studio, the tool tip will look like the image below. At this point you can do a View in Browser of a page to start the connection.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/4401.image_thumb_0C003DBA.png\"><img decoding=\"async\" title=\"image\" border=\"0\" alt=\"image\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/4401.image_thumb_0C003DBA.png\" width=\"237\" height=\"40\" \/><\/a> <\/p>\n<p>&#160;<strong>3. How does \u201cRefresh Linked Browsers\u201d work?<\/strong><\/p>\n<p>Let us assume that you want to quickly see how \u201cDefault.aspx\u201d renders in various browsers.<\/p>\n<p>Start off with launching \u201cBrowse with\u201d and select multiple browsers(IE, Firefox, Chrome etc). At this point, VS will show you that there are 3 browsers connected.<\/p>\n<p>Make an edit to Default.aspx&#160; file <em>. <\/em>Change text in &lt;h1&gt; ASP.net &lt;\/h1&gt; to ASP.NET 4.5. Now click on the refresh button or do Ctrl+Alt+Enter to save and refresh the page. This will update all the browsers at once. Note that, this will only refresh the browser. It will not navigate to the page for you.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/2251.image_thumb_32CE53FA.png\"><img decoding=\"async\" title=\"image\" border=\"0\" alt=\"image\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/2251.image_thumb_32CE53FA.png\" width=\"709\" height=\"359\" \/><\/a> <\/p>\n<p><strong>4. How do I know if Browser Link is turned ON?<\/strong><\/p>\n<p>Go to \u201cView Source\u201d of your rendered page and you will see a script tag at the very bottom. See image below. The presence of this script indicated that Browser Link feature is enabled.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/7450.image_thumb_6B78FE07.png\"><img decoding=\"async\" title=\"image\" border=\"0\" alt=\"image\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/7450.image_thumb_6B78FE07.png\" width=\"719\" height=\"44\" \/><\/a> <\/p>\n<p><strong>4. How do I turn off Browser Link?<\/strong><\/p>\n<p>You can uncheck \u201cEnable Browser Link\u201d and it will be turned off \u201c Browser Link\u201d for all future requests made.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/8130.image_thumb_4B5DF14A.png\"><img decoding=\"async\" title=\"image\" border=\"0\" alt=\"image\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/8130.image_thumb_4B5DF14A.png\" width=\"242\" height=\"63\" \/><\/a> <\/p>\n<p>You can also use the following appsettings in your web.config file.<\/p>\n<blockquote>\n<p>1. Set appSetting \u201cvs:EnableBrowserLink\u201d to \u201cfalse \u201c\u201c. This will&#160; disable Browser Link.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/6076.image_thumb_59303745.png\"><img decoding=\"async\" title=\"image\" border=\"0\" alt=\"image\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/6076.image_thumb_59303745.png\" width=\"237\" height=\"30\" \/><\/a> <\/p>\n<p>2. Set debug= false in web.config file. This will&#160; also disable Browser Link. Note that debug= true is required for Browser Link feature to work.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/3833.image_thumb_39152A88.png\"><img decoding=\"async\" title=\"image\" border=\"0\" alt=\"image\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/3833.image_thumb_39152A88.png\" width=\"242\" height=\"14\" \/><\/a> <\/p>\n<\/blockquote>\n<p><strong>5. What is coming up for RTM?<\/strong><\/p>\n<p>For RTM we will have Browser Link available as an extensible API for users to write extensions that can talk to various browsers and VS. Stay tuned and we will be posting details of this soon.<\/p>\n<p>&#160;<strong>Known Browser Link issues for Preview:<\/strong><\/p>\n<blockquote>\n<p>1. The Browser Link script tag is injected after the body tag. This will be moved inside the body tag for the next release.<\/p>\n<p>2. \u201cRefresh Linked Browsers\u201d will not work for HTML pages. This can be fixed by enabling&#160; Run All Managed Modules in&#160; your web.config settings.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/7178.image_thumb_16F042C9.png\"><img decoding=\"async\" title=\"image\" border=\"0\" alt=\"image\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2013\/06\/7178.image_thumb_16F042C9.png\" width=\"242\" height=\"14\" \/><\/a> <\/p>\n<p>3. Browser Link does not work for sites that aren\u2019t hosted on localhost.<\/p>\n<p>4. We do not work on default Website Templates. This is because&#160; debug flag is set to false in web.config. You will have to set the debug flag to true for Browser Link to start working.<\/p>\n<\/blockquote>\n<p>&#160;<\/p>\n<p><strong>Thanks,<\/strong><\/p>\n<p> <strong><\/strong>  <\/p>\n<p><strong>Reshmi Mangalore<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Browser Link is just a channel between your Visual Studio IDE and any open browser. This will allow dynamic data exchange between your web application and Visual Studio. This feature is enabled by default in Visual Studio 2013 Preview. When Browser Link is enabled we register an HTTPModule with ASP.NET, which will then inject a [&hellip;]<\/p>\n","protected":false},"author":432,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197],"tags":[7437,7350,7436],"class_list":["post-1584","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet","tag-browser-link","tag-reshmi-mangalore","tag-visual-studio-2013"],"acf":[],"blog_post_summary":"<p>Browser Link is just a channel between your Visual Studio IDE and any open browser. This will allow dynamic data exchange between your web application and Visual Studio. This feature is enabled by default in Visual Studio 2013 Preview. When Browser Link is enabled we register an HTTPModule with ASP.NET, which will then inject a [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/1584","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/432"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=1584"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/1584\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/58792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=1584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=1584"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=1584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}