{"id":41,"date":"2012-09-17T08:26:00","date_gmt":"2012-09-17T08:26:00","guid":{"rendered":"http:\/\/tpodolak.com.hostingasp.pl\/blog\/2012\/09\/17\/asp-net-mvc-javascript-debugging-using-webstorm\/"},"modified":"2016-01-31T00:06:31","modified_gmt":"2016-01-31T00:06:31","slug":"asp-net-mvc-javascript-debugging-using-webstorm","status":"publish","type":"post","link":"https:\/\/tpodolak.com\/blog\/2012\/09\/17\/asp-net-mvc-javascript-debugging-using-webstorm\/","title":{"rendered":"ASP.NET MVC javascript debugging using WebStorm"},"content":{"rendered":"<p>I&#8217;ve been working with ASP .NET combined with Extjs for about half a year. All this time for debugging I&#8217;ve been using Firebug in Firefox, or Developer Tools in Chrome. Although both of these tools are great, I decided to try to use build in WebStorm debugger. According to documentation this debugger should work with Firefox as well as with Chrome. However I&#8217;ve only managed to run it correctly with Firefox. In order to start debugging session, we have to make some preparation. Let&#8217;s choose option <i>Debug&#8230;<\/i> from <i>Run<\/i> menu<br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/rundebug.png\" rel=\"attachment wp-att-387\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/rundebug.png\" alt=\"rundebug\" width=\"800\" class=\"aligncenter size-full wp-image-387\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/rundebug.png 929w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/rundebug-150x54.png 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/rundebug-300x107.png 300w\" sizes=\"(max-width: 929px) 100vw, 929px\" \/><\/a><br \/>\nIn opened small window, we have to choose first option &#8211; <i>Edit configurations&#8230;<\/i><br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/editconfigurationsmall.png\" rel=\"attachment wp-att-392\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/editconfigurationsmall.png\" alt=\"editconfigurationsmall\" width=\"196\" class=\"aligncenter size-full wp-image-392\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/editconfigurationsmall.png 196w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/editconfigurationsmall-150x90.png 150w\" sizes=\"(max-width: 196px) 100vw, 196px\" \/><\/a><br \/>\nIn the next window we can create new debugging profile. In order to do that, click on + sign in the left upper corner of window, then choose <i>JavascriptDebug<\/i> and <i>Remote<\/i> option.<br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/runremotedebug.png\" rel=\"attachment wp-att-388\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/runremotedebug.png\" alt=\"runremotedebug\" width=\"800\" class=\"aligncenter size-full wp-image-388\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/runremotedebug.png 837w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/runremotedebug-150x49.png 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/runremotedebug-300x99.png 300w\" sizes=\"(max-width: 837px) 100vw, 837px\" \/><\/a><br \/>\nThis is the final step of the configuration. The most important fields in configuration window is <i>URL to open<\/i> field, in which we specify adress of our site. In my case it is localhost on port 8142. We also have to specify mapping from remote host direcotry structure to our directory structure. Sample configuration is presented below<br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/sampleconfig.png\" rel=\"attachment wp-att-389\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/sampleconfig.png\" alt=\"sampleconfig\" width=\"800\" class=\"aligncenter size-full wp-image-389\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/sampleconfig.png 994w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/sampleconfig-150x105.png 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/sampleconfig-300x209.png 300w\" sizes=\"(max-width: 994px) 100vw, 994px\" \/><\/a><br \/>\nWe also have a possibility to choose browser in which our site will be displayed. I decided to choose Firefox because of the fact, that WebStorm debugger had some problems with Chrome. Now we can try to run debugging session by pressing <i>ALT+F9<\/i>. If we choose Firefox, in the very first time we run debugger, we will see this window<br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/installExtension.png\" rel=\"attachment wp-att-385\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/installExtension.png\" alt=\"installExtension\" width=\"600\" class=\"aligncenter size-full wp-image-385\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/installExtension.png 615w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/installExtension-150x31.png 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/installExtension-300x62.png 300w\" sizes=\"(max-width: 615px) 100vw, 615px\" \/><\/a><br \/>\nwhich informs us that WebStorm must install extension to Firefox. Clicking <i>OK <\/i>button starts Firefox<br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/AddOnInstalation.jpg\" rel=\"attachment wp-att-380\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/AddOnInstalation.jpg\" alt=\"AddOnInstalation\" width=\"800\" class=\"aligncenter size-full wp-image-380\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/AddOnInstalation.jpg 1381w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/AddOnInstalation-150x63.jpg 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/AddOnInstalation-300x126.jpg 300w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/AddOnInstalation-1024x432.jpg 1024w\" sizes=\"(max-width: 1381px) 100vw, 1381px\" \/><\/a><br \/>\nwhich warns us that external program is trying to install extension. Clicking <i>continue<\/i> button will finish configuration process, and WebStorm will successfully attach debugger.<br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/debuggerattached.png\" rel=\"attachment wp-att-383\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/debuggerattached.png\" alt=\"debugging\" width=\"800\" class=\"aligncenter size-large wp-image-383\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/debuggerattached.png 1117w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/debuggerattached-150x99.png 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/debuggerattached-300x197.png 300w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/asp-net-mvc-javascript-debugging-using-webstorm\/debuggerattached-1024x674.png 1024w\" sizes=\"(max-width: 1117px) 100vw, 1117px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve been working with ASP .NET combined with Extjs for about half a year. All this time for debugging I&#8217;ve been using Firebug in Firefox, or Developer Tools in Chrome. Although both of these tools are great, I decided to try to use build in WebStorm debugger. According to documentation this debugger should work with [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[83,90,92,91,70],"tags":[223,230,231,232,213],"class_list":["post-41","post","type-post","status-publish","format-standard","hentry","category-asp-net-mvc","category-chrom","category-debugger","category-debugging","category-webstorm","tag-asp-net-mvc","tag-chrom","tag-debugger","tag-debugging","tag-webstorm"],"_links":{"self":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/41","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/comments?post=41"}],"version-history":[{"count":4,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/41\/revisions"}],"predecessor-version":[{"id":547,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/41\/revisions\/547"}],"wp:attachment":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/media?parent=41"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/categories?post=41"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/tags?post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}