{"id":36865,"date":"2016-11-21T12:00:04","date_gmt":"2016-11-21T19:00:04","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/webdev\/?p=8035"},"modified":"2016-11-21T12:00:04","modified_gmt":"2016-11-21T19:00:04","slug":"client-side-debugging-of-asp-net-projects-in-google-chrome","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/client-side-debugging-of-asp-net-projects-in-google-chrome\/","title":{"rendered":"Client-side debugging of ASP.NET projects in Google Chrome"},"content":{"rendered":"

Updated 2017\/1\/3<\/strong> – Setting to control script debugging added. See below. Visual Studio 2017 RC<\/a> now supports client-side debugging of both JavaScript and TypeScript in Google Chrome. For years, it has been possible to debug both the backend .NET code and the client-side JavaScript code running in Internet Explorer at the same time. Unfortunately, the capability was limited solely to Internet Explorer. In Visual Studio 2017 RC that changes. You can now debug both JavaScript and TypeScript directly in Visual Studio when using Google Chrome as your browser of choice. All you should do is to select Chrome as your browser in Visual Studio and hit F5 to debug. If you\u2019re interested in giving us feedback on future features and ideas before we ship them, join our community<\/a>. \"browser-selector\"<\/a> The first thing you\u2019ll notice when launching Chrome by hitting F5 in Visual Studio is a page that says, \u201cPlease wait while we attach\u2026\u201d. \"debugger-attach\"<\/a> What happens is that Visual Studio is attaching to Chrome using the remote debugging protocol<\/a> and then redirects to the ASP.NET project URL (something like http:\/\/localhost:12345) after it attaches. After the attach is complete, the “Please wait while we attach…” message remains visible while the ASP.NET site starts up where normally you’d see a blank browser during this time. Once the debugger is attached, script debugging is now enabled for all JavaScript files in the project as well as all TypeScript files if there is source map information available. Here\u2019s a screen shot of a breakpoint being hit in a TypeScript file. \"breakpoint-hit\"<\/a> For TypeScript debugging you need to instruct the compiler to produce a .map file. You can do that by placing a tsconfig.json file in the root of your project and specify the a few properties, like so:<\/p>\n

{\n  \"compileOnSave\": true,\n  \"compilerOptions\": {\n    \"sourceMap\": true\n  }\n}\n<\/pre>\n
If you\u00a0prefer to use Chrome\u2019s or IE\u2019s own dev tools to do client-side debugging,\u00a0the<\/p>\n
recent update to Visual Studio 2017 RC<\/a>\u00a0introduced a setting to disable the IE and Chrome script debugger (this will also prevent Chrome\/IE from closing after a debugging session ends). Go to Tools -> Options -> Debugging -> General<\/em> and turn off the setting Enable JavaScript Debugging for ASP.NET (Chrome and IE)<\/em>. \"debugger We hope you\u2019ll enjoy this feature and we would love to hear your feedback in the comments section below, or via Twitter<\/a>. Download Visual Studio 2017 RC<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Updated 2017\/1\/3 – Setting to control script debugging added. See below. Visual Studio 2017 RC now supports client-side debugging of both JavaScript and TypeScript in Google Chrome. For years, it has been possible to debug both the backend .NET code and the client-side JavaScript code running in Internet Explorer at the same time. Unfortunately, the […]<\/p>\n","protected":false},"author":398,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197],"tags":[322,7524],"class_list":["post-36865","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet","tag-debugging","tag-visual-studio-2017"],"acf":[],"blog_post_summary":"
Updated 2017\/1\/3 – Setting to control script debugging added. See below. Visual Studio 2017 RC now supports client-side debugging of both JavaScript and TypeScript in Google Chrome. For years, it has been possible to debug both the backend .NET code and the client-side JavaScript code running in Internet Explorer at the same time. Unfortunately, the […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/36865","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\/398"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=36865"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/36865\/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=36865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=36865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=36865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}