33

Visual Studio 2012 comes with the very nice Page Inspector. I like it! Problem though, I haven't found how (if?) I can turn on JavaScript debugging. Could someone point me in the right direction?

Martijn
  • 11,964
  • 12
  • 50
  • 96

2 Answers2

28

  1. In IE9 (only one time): Tools > Internet Options > Advanced tab > In Browsing category > Clear "Disable script debugging" check boxes (both) > restart IE.

  2. In VS 2012: Run the Page Inspector ( when javascript error box opens, click No ! )

  3. Choose from VS menu: DEBUG > Attach to process...

  4. Select "WebBrowserServer.exe" and click Attach

  5. In Page Inspector window click the Refresh icon.

Debugging works pretty well, but it's one condition. Don't insert any breakpoints in your code (or clear them before - DEBUG > Delete All Breakpoints). There can cause a lot of problems - from hanging and frozing to entirely crashing your VS.

Mariusz
  • 296
  • 3
  • 3
  • 8
    Wow seriously this is how complicated it is to do js debugging with page inspector?!!? ::cries:: – felickz Oct 02 '12 at 23:45
  • When you want to debugging directly in VS window, in the page inspector - it figures. Maybe MS don't really like JS developers ;) – Mariusz Oct 03 '12 at 05:49
  • 1
    I tried this but couldn't figure out how to actually debug the script. The Page inspector highlights where I am in the HTML but doesn't display any information at all when it hits my scripts. You said not to have breakpoints in the code, I deleted all of them. But how does it know where to break for the javascript? – anyeone Oct 19 '12 at 16:49
  • 3
    @Riz the proper answer should probably be "there is no integration. The workaround is the following" – Martijn Feb 18 '13 at 13:00
  • newer Internet Explorers have outstanding javascript debugging built right in via developer tools (F12)... While there may be plenty of reasons to prefer Chrome, and there may be plenty of reasons to want to debug javascript via Page Inspector in VS; those still leave the comment "... back to chrome" in this context rather pointless and flame-y – Jason Mar 08 '13 at 01:55
  • @Jason the killer feature here would be to step through the code in your JS files or cshtml files in your project, seeing the live effects on the web page. (like the awesome CSS tooling in the PageInspector). That's unfortunately not there. – Martijn Mar 08 '13 at 11:10
  • I've just been trying to figure this out... after reading this, my solution will be to go back to NetBeans. Too bad, because I love the VS2012 IDE so far. Just install NetBeans and the NetBeans Connector extension in Chrome, you can then set breakpoints and they work as expected. – EJA Mar 31 '13 at 21:05
  • I just debug my Javascript in chrome. I actually like it better that way. I handle all my C# debugging in VS, and I do all of my js debugging in chrome. – Jordan May 16 '13 at 13:34
  • 2
    This method causes my VS instance to lock immediately until I kill the WebBrowserServer.exe process. The annoying thing about this whole thing is that I'm trying to debug a JS issue that ONLY occurs in Page Inspector. – Aejay May 29 '13 at 15:34
  • I've submitted a connect bug for the hang. https://connect.microsoft.com/VisualStudio/feedback/details/799856/ide-hangs-after-attaching-debugger-to-webbrowserserver-exe-for-js-stepping-in-page-inspector – Luke Puplett Sep 06 '13 at 13:24
  • Also added a UserVoice for this http://visualstudio.uservoice.com/forums/121579-visual-studio/suggestions/4397221-enabled-automatic-javascript-debugging-via-page-in – Luke Puplett Sep 06 '13 at 13:31
  • the last comment of locking/crashing due to break points would have been nice to see on the top ;) – devHead Nov 12 '13 at 15:22
0

Until this week, I was able to carry debugging of JavaScript in Visual Studio 2012 merely by entering "debugger" in the JavaScript function which acted as a breakpoint, and was able to step through the JavaScript code in the Visual Studio window just the same as the C# code. I did this for the past 11 months until 1 week ago. I made no changes to the default installed settings.

This was the solution suggested in the Asp.Net Forums by Rion Williams. http://forums.asp.net/t/1984115.aspx?Debugging+Javascript+in+MVC And as stated it has allowed me to properly step through my code for the last 11 months.

user1161391
  • 121
  • 2
  • 9
  • When running your asp.net MVC site in Visual Studio, the "debugger" statement in javascript files will not work if you are bundling your javascript and have BundleTable.EnableOptimizations set to true. If you use the default bundler (the RegisterBundles method in BundleConfig.cs in the App_Start folder) look for "BundleTable.EnableOptimizations" and set it to "false." – Tom Regan Jan 30 '15 at 21:04