Visual Studio integrated Javascript debugging with Windows 10 Edge - javascript

Is there any way to enable Visual Studio integrated Javascript debugger with Windows 10 Edge? I mean the feature for stepping through the code, set breakpoints, etc. from inside the Visual Studio IDE. I am using Visual Studio 2012 and 2013, perhaps this can be achieved with 2015?

TLDR;
Once it is running in Edge, use Debug > Attach to Process from Visual Studio Community 2015.
Attach to: Script code
Available Processes: MicrosoftEdgeCP.exe
Steps
Optional: Set Edge as your default browser.
Open your project in Visual Studio.
Add breakpoints in your JavaScript.
In the Solution Explorer, select your project
Use Ctrl + Shift + W to "View in browser."
If you did step 1, it will open in Edge. Otherwise, copy the URL into Edge.
Once it is running in Edge, in Visual Studio, go to Debug > Attach to Process.
In the "Attach to" area, select "Script code".
From the "Available Processes" choose "MicrosoftEdgeCP.exe".
Click attach and refresh the page in Edge.
You will now be debugging from the Visual Studio IDE.
Set Default Browser
Attach Visual Studio to Edge Script
Debugging
The above works in Visual Studio Community 2015 and it might also work in previous versions. Hooray!

This feature has finally been added in Visual Studio 2017 15.7.
JavaScript debugging with Microsoft Edge
The Windows 10 April 2018 Update is also needed, as it contains the Microsoft Edge DevTools Protocol

Using: Microsoft EdgeHTML 18.17763 , MS Visual Studio 15.9.5
All I had to do was this:
In VS...click Debug -> Options. Under Debugging-General...check Enable JavaScript debugging for ASP.NET (Chrome, Edge and IE)
The next time you launch Edge from VS you will see the blue Developer Tools Server icon next to the address bar.

You need to have Script Debugging enabled.
And you need to install the debugger, otherwise it would prompt this,

Related

How to debug javascript in visual studio 2015 RC?

I want to debug javascript in visual studio 2015. I know how to do that in visual studio 2010 as explained in this video. It say that I should detach all processes first and run the application in Internet Explore. However, I can't find the option (detach all) in visual studio 2015. Is there any other method that can be used to debug javascript ?
When you run in VS 2015 Debug mode, you will see 'Detach All' under the Debug in the main menu
I can't find the option (detach all)
This option shows in debug menu after you attach debugger to any process first.
Client-Side Script Debugging
How to: Attach to Script
How to: Enable and Start Script Debugging from Internet Explorer

enable script debugging using Chrome in Visual Studio 11

I have a MVC 4 web Application with some javascript which is working fine with Internet Explorer and gives an issue with Chrome.
I was thinking to debug using Chrome as a browser in Visual Studio 11, which can be selected from the debug dropdown: the issue is that I cannot figure out how to enable script debugging :
when I debug the breakpoint are disabled with the usual warning
No symbols have been loaded for this document
I know I might debug scripts directly in Chrome, but I prefer going consistent using Visual Studio, since it involves stepping into several lenghty js libraries.
I can see from a previous post that with Visual Studio 2008 that was not possible: does anyone know a way to do that with Visual Studio 11?
PS: attaching the Chrome process does not help as the debugging mode is 'Native' instead of 'Script'
PSII: I also tried to attach Chrome using the Attach to: Script Code option in the Attach.. menu (this switches the Debugging mode to Script) but that does not help as well.
You simply can't do this. Visual Studio only connects with IE in this way.
Chrome does of course have its own debugging tools that you can use, but you won't be able to get your stops inside of Visual Studio as you may hope.
There is a whole load of answered / unanswered / incorrectly answered questions all over the web and SO on the matter.
Visual Studio 2010 debugging Javascript with IE works but not with firefox or chrome. Any solution?
how to enable script debugging in visual studio 2008 when using Firefox
Here are the steps that worked for me in Visual Studio 2015 (should work in earlier versions as well):
Start chrome in remote debug mode: chrome.exe --remote-debugging-port=9222
Attach Visual Studio: "Debug" -> "Attach to Process..." -> select the chrome instance
All credit goes to: http://lostindetails.com/blog/post/JavaScript-debugging-in-VisualStudio-with-Chrome
This has been enabled in Visual Studio 2017 https://blogs.msdn.microsoft.com/webdev/2016/11/21/client-side-debugging-of-asp-net-projects-in-google-chrome/

Debug JavaScript in Visual Studio 2010?

Currently I am debugging my JavaScript using Firebug for Firefox. Is there anyway to debug javascript in Visual Studio 2010? The JavaScript isn't part of any Visual Studio project, it's just a .js file that will be linked to a static HTML page (it's to debug school assignments).
I did try searching and the results weren't any more recent than around a year ago. I'm hoping something has changed or there is a better workflow than notepad++ for HTML/JavaScript and Firebug for debugging.
Use the JavaScript debugger keyword in IE.
function onClickRow(detailUrl) {
debugger;
}
When run your page in IE, a debug window will pop up, then select Visual Studio 11.
To use debug in Internet Explorer, you need perform these steps:
enable script debugging in IE (go to Internet options->advanced->browsing and uncheck 'Disable script debugging')
select view->external script debugger->break on next statement
When next javascript statement will be reached, IE will show standard windows debugger selection dialog, when you can select instance of visual studio.
Update:
With visual studio you can attach to browser process(e.g. iexplore.exe) and then debug
This question gets a lot of views so for the sake of completeness I just wanted to mention that I've been using Chrome Developer Tools for a while now. It's been working great for me and is what I recommend now when people ask me this same question.
Yes, but only in IE. Basically just create a web-page project and hit run. It'll launch IE in debugger mode.
disable option from Internet Options like here : http://www.mayanksrivastava.com/2010/02/debugging-java-script-in-visual-studio.html
If you installed VS 2012 and then uninstalled it, you may need to Re-Install Visual Studio 2010.
Error you may get when trying to debug JavaScript:
---------------------------
Microsoft Visual Studio
---------------------------
Unable to attach to the crashing process. The correct version of pdm.dll is not registered. Repair your Visual Studio 2010 installation, or run 'regsvr32.exe "%CommonProgramFiles%\Microsoft Shared\VS7Debug\pdm.dll"'.
---------------------------
OK
---------------------------
If you want to try giving it a shot in IE, I posted about using the js debugger here:
jQuery/Ajax content not appearing/loading in Explorer

Javascript debugging in Visual Studio

I have script debugging enabled in IE .. I have put the debugger keyword in the file and it gets caught too..
The debugger is already attached to the ie process and type is script ..
When ie prompted "Would you like to debug" I pressed yes and choose Visual Studio 2008 (With my project opened) . When Visual Studio opens up, i get an alert, "There is no source code available for the current location.".
When i put a breakpoint, an older version of the file opens.
I think its some problem related to Visual Studio cache.
Any help?
This might not be what you asked for, but my advice would be to dump VS for javascript debugging and to use Firebug for this purpose instead. I did so and would not want to go back.
Besides, Firebug can do so many more useful things than just Javascript Debugging, so if you are seious about AJAX developt you really want to install it anyway.
Its not VS cache its browser cache. F5 to get latest js into the browser.
This is such a frustrating issue. Here's how to address it in VS 2013 (hopefully you have upgraded).
Go into Internet Explorer>Internet Options>Advanced and uncheck Disable Script Debugging(Internet Explorer) and Disable Script Debugging(Other).
Now when you set a breakpoint in Visual Studio and run your solution in debug mode with internet explorer selected, it will hit your breakpoints. I'm not sure whether there's any possible way to do it for other browsers.

How do I debug JavaScript in Visual Studio 2005?

I just saw this mentioned in Stack Overflow question Best WYSIWYG CSS editor and didn't know it could be done. I'm a Visual Studio newbie, so how do you do it?
Is there a separate debugger for JavaScript? I know how to work the one for code-behind pages... I usually use Firebug to deal with debugging JavaScript code.
I'm using Visual Studio 2005.
I prefer using Firebug for projects I can't use Visual Studio 2008 on.
To debug in Visual Studio 2005, make sure that "disable script debugging" is unchecked. Then load your webpage in Internet Explorer. From the debug menu inside of Visual Studio 2005, select "Attach to process" and pick the instance of Internet Explorer that has your web page loaded.
Alternatively, the Firebug team has been working on a "lite" version that you can include either as a script in your page or by launching it via a bookmarklet from your browser. It doesn't provide the full debugger that Firebug does, but it gives you a console and a command line from which you can inspect variables and log things to the console.
Visual Studio 2008 ASP.NET projects has debugging enabled by default. You can set breakpoints within your .js file while the website/web app project is run in the ASP.NET debug server.
TechRepublic has a good walk through - see Visual Studio 2008 simplifies JavaScript debugging.
Just make sure you have 'Disable Script Debugging' unchecked, and just hit F5 to start debugging in VS2005 or 2008.
I would also note that if you have your JavaScript inside the .aspx page you will have to find it via the script explore. However if you have it in a separate .js file you can just put a break point on it like you would any .cs file.
In Internet Explorer, select View -> Script Debugger -> Open. That should do it.
Usually you know where you are having problems, so you can set a breakpoint in your JavaScript code by placing the keyword "debugger;" on a line in your JavaScript code (obviously without the quotes) to set a breakpoint.
When you get to it in Internet Explorer, it will ask you if you want to debug and prompt you to choose a debugger from a list, hopefully you will see Visual Studio in that list (both a new instance as well as your currently-running instance) - if you are using Firefox with Firebug, it will automatically stop execution on that line and you will be within the Firebug debugger, not Visual Studio.
You will want to do the following to setup Internet Explorer for doing this - from within Internet Explorer, follow this menu path: Tools > Internet Options > Advanced Tab > Uncheck the "Disable Script Debugging" options.
You can set a breakpoint within JavaScript in Visual Studio 2005, but in addition to debugging needing to be enabled in Internet Explorer, you can only set the breakpoint in a .js file. You cannot debug any inline JavaScript code.
I also sometimes have problems when trying to debug my JavaScript code when using the attach process method to go into debugging. I will normally use the "Start debugging" green arrow. You will know that your code will stop at the breakpoint in your .js file if the breakpoint icon (Burgandy Circle by default) is filled in. If it's not filled in, you will never stop there.
Finally, make sure you have debugging enabled in your ASP.NET configuration settings.
Debugging client JavaScript code in Visual Studio 2005:
Add the following code to the start of the JavaScript code:
debugger
See Debugging client JavaScript in Visual Studio 2005.
Yeah using Microsoft Script Editor is a an option if you have Office XP or Office 2003 installed. In IE uncheck Disable Script debugging (Internet Explorer) and Disable Script debugging (Other).
Restart IE. In View menu you will have a new item, "script debugging", choose open. You will be given a choice of VS2005 or New instance of Microsoft Script Editor, choose that and give it a go.
Edit: try this link for a tutorial
I usually use Firebug to deal with debugging JS.
Unless you need to debug in IE, there's no need to stop using Firebug. It works with JavaScript in ASP.NET pages just as well as it does with any other type of page.
Visual Studio's JavaScript debugging is alright, but really cannot compete with the full range of client-side information that Firebug aggregates.

Categories