I have an ASP.NET Web Application created with Visual Studio 2013. I am attempting to debug JavaScript in a CSHTML file. However, whenever I launch the webpage, any breakpoint turns into a red circle arrow and states, "The breakpoint will not currently be hit. No executable code of the debugger's target code type is associated with this line. Possible causes include: conditional compiliation, compilier optimizations, or the target architecture of this line is not supported by the current debugger code type."
Recently, the project was switched over to support MVC and RAZR, neither of which I know well, and this is exactly when this issue began. However, searching those have yielded results that don't fix my issue.
Web.config:
<compilation debug="true"...>
I know I can debug JavaScript with Firebug or some other browser tool, but I would much rather stick with Visual Studio's debug as that is what I am used to.
So, apparently this is a "known issue" that will be fixed as soon as possible. A temporary work around that works for "some" people is making sure any Javascript is in a separate file.
It is caused by having RAZR and Javascript in the same file and Visual Studio 2013 not being able to handle debugging in that instance.
I don't know what your particular problem is, but if you want to force a debug breakpoint to always happen, add debugger; to the line that you want it to stop on, and it will stop. This is regardless of where the JS is located (in a .js file, .html, cshtml, etc.)
Here is a blog post about it:
http://sumitmaitra.wordpress.com/2013/12/11/quickbytes-visual-studio-2013-and-javascript-debugging/
I also agree that JS should go in a .js file (which I've never had a problem adding a break point in a .js file), but for quick prototyping, this is a solution you can use.
If that still doesn't work, you can always you the F12 tools
The only browser that allows debugging a javascript file from Visual Studio is Internet Explorer. (this is what I found out after testing my application on different browsers)
I put my javascript in a separate file and debug with IE otherwise it will not work.
For some reason chrome doesnt allow you to step into the javascript.
One additional thing to check. If you have a App_Start|BundleConfig.cs (which came with MVC 4 - or maybe 3), set BundleTable.EnableOptimizations to false (or, like I did, wrap it in an #if !DEBUG #endif and take the default setting).
I tried and failed to use Chrome and then IE and ended up using the Firebug addon in Firefox, and I was able to debug and set breakpoints in my JS with no problems (in an MVC6 app on Visual Studio 2015 where this is apparently still an issue?!)...
FYI - When I tried to debug my JS in Chrome using the F12 Developer Tools, it told me it was not an option as the Debugger was already attached to another process...
For people coming here in 2017, I want to share that I had this same issue with VS2017 Enterprise RC, and with VS 2015 Community with any browser but Internet Explorer. Using IE did the trick for me.
Also, in VS2017, I had to add a debugger statement to get VS start looking at debug points.
Finally, I'd like to ask at least a comment from people voting down.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
When I find that I have a problematic code snippet, how should I go about debugging it?
Firebug is one of the most popular tools for this purpose.
All modern browsers come with some form of a built-in JavaScript debugging application. The details of these will be covered on the relevant technologies web pages. My personal preference for debugging JavaScript is Firebug in Firefox. I'm not saying Firebug is better than any other; it depends on your personal preference and you should probably test your site in all browsers anyway (my personal first choice is always Firebug).
I'll cover some of the high-level solutions below, using Firebug as an example:
Firefox
Firefox comes with with its own inbuilt JavaScript debugging tool, but I would recommend you install the Firebug add on. This provides several additional features based on the basic version that are handy. I'm going to only talk about Firebug here.
Once Firebug is installed you can access it like below:
Firstly if you right click on any element you can Inspect Element with Firebug:
Clicking this will open up the Firebug pane at the bottom of the browser:
Firebug provides several features but the one we're interested in is the script tab. Clicking the script tab opens this window:
Obviously, to debug you need to click reload:
You can now add breakpoints by clicking the line to the left of the piece of JavaScript code you want to add the breakpoint to:
When your breakpoint is hit, it will look like below:
You can also add watch variables and generally do everything that you would expect in a modern debugging tool.
For more information on the various options offered in Firebug, check out the Firebug FAQ.
Chrome
Chrome also has its own in built JavaScript debugging option, which works in a very similar way, right click, inspect element, etc.. Have a look at Chrome Developer Tools. I generally find the stack traces in Chrome better than Firebug.
Internet Explorer
If you're developing in .NET and using Visual Studio using the web development environment you can debug JavaScript code directly by placing breakpoints, etc. Your JavaScript code looks exactly the same as if you were debugging your C# or VB.NET code.
If you don't have this, Internet Explorer also provides all of the tools shown above. Annoyingly, instead of having the right click inspect element features of Chrome or Firefox, you access the developer tools by pressing F12. This question covers most of the points.
Internet Explorer 8 (Developer Tools - F12). Anything else is second rate in Internet Explorer land
Firefox and Firebug. Hit F12 to display.
Safari (Show Menu Bar, Preferences -> Advanced -> Show Develop menu bar)
Google Chrome JavaScript Console (F12 or (Ctrl + Shift + J)). Mostly the same browser as Safari, but Safari is better IMHO.
Opera (Tools -> Advanced -> Developer Tools)
There is a debugger keyword in JavaScript to debug the JavaScript code. Put debugger; snippet in your JavaScript code. It will automatically start debugging the JavaScript code at that point.
For example:
Suppose this is your test.js file
function func(){
//Some stuff
debugger; //Debugging is automatically started from here
//Some stuff
}
func();
When the browser runs the web page in developer option with enabled debugger, then it automatically starts debugging from the debugger; point.
There should be opened the developer window the browser.
I use old good printf approach (an ancient technique which will work well in any time).
Look to magic %o:
console.log("this is %o, event is %o, host is %s", this, e, location.host);
%o dump clickable and deep-browsable, pretty-printed content of JS object. %s was shown just for a record.
And this:
console.log("%s", new Error().stack);
gives you Java-like stack trace to point of new Error() invocation (including path to file and line number!!).
Both %o and new Error().stack available in Chrome and Firefox.
With such powerful tools you make assumption whats going wrong in your JS, put debug output (don't forget wrap in if statement to reduce amount of data) and verify your assumption. Fix issue or make new assumption or put more debug output to bit problem.
Also for stack traces use:
console.trace();
as say Console
Happy hacking!
Start with Firebug and IE Debugger.
Be careful with debuggers in JavaScript though. Every once in a while they will affect the environment just enough to cause some of the errors you are trying to debug.
Examples:
For Internet Explorer, it's generally a gradual slowdown and is some kind of memory leak type deal. After a half hour or so I need to restart. It seems to be fairly regular.
For Firebug, it's probably been more than a year so it may have been an older version. As a result, I don't remember the specifics, but basically the code was not running correctly and after trying to debug it for a while I disabled Firebug and the code worked fine.
Although alert(msg); works in those "I just want to find out whats going on" scenarios... every developer has encountered that case where you end up in a (very large or endless) loop that you can't break out of.
I'd recommend that during development if you want a very in-your-face debug option, use a debug option that lets you break out. (PS Opera, Safari? and Chrome? all have this available in their native dialogs)
//global flag
_debug = true;
function debug(msg){
if(_debug){
if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
_debug = false;
}
}
}
With the above you can get your self into a large loop of popup debugging, where pressing Enter/Ok lets you jump through each message, but pressing Escape/Cancel lets you break out nicely.
I use WebKit's developer menu/console (Safari 4). It is almost identical to Firebug.
console.log() is the new black -- far better than alert().
My first step is always to validate the HTML and to check syntax with JSLint. If you have clean markup and valid JavaScript code then it is time for Firebug or another debugger.
Visual Studio 2008 has some very good JavaScript debugging tools. You can drop a breakpoint in your client side JavaScript code and step through it using the exact same tools as you would the server side code. There is no need to attach to a process or do anything tricky to enable it.
I use a few tools: Fiddler, Firebug, and Visual Studio. I hear Internet Explorer 8 has a good built-in debugger.
I used to use Firebug, until Internet Explorer 8 came out. I'm not a huge fan of Internet Explorer, but after spending some time with the built-in developer tools, which includes a really nice debugger, it seems pointless to use anything else. I have to tip my hat to Microsoft they did a fantastic job on this tool.
You might also check out YUI Logger. All you have to do to use it is include a couple of tags in your HTML. It is a helpful addition to Firebug, which is more or less a must.
I found the new version of Internet Explorer 8 (press F12) is very good to debug JavaScript code.
Of course, Firebug is good if you use Firefox.
Besides using Visual Studio's JavaScript debugger, I wrote my own simple panel that I include to a page. It's simply like the Immediate window of Visual Studio. I can change my variables' values, call my functions, and see variables' values. It simply evaluates the code written in the text field.
I'm using Venkman, a JavaScript debugger for XUL applications.
In addition to Firebug and browser-native developer extensions JetBrains WebStorm IDE comes with remote debug support for Firefox and Chrome (Extension required) built in.
Also supports:
coffescript: how to debug coffeescript in node.js with webstorm 6 source maps
node.js
Options to test this for free are the 30 trial or using an Early Access Version.
If you are using Visual Studio, just put debugger; above the code you want to debug. During execution the control will pause at that place, and you can debug step by step from there on.
As with most answers, it really depends: What are you trying to achieve with your debugging? Basic development, fixing performance issues? For basic development, all the previous answers are more than adequate.
For performance testing specifically, I recommend Firebug. Being able to profile which methods are the most expensive in terms of time has been invaluable for a number of projects I have worked on. As client-side libraries become more and more robust, and more responsibility is placed client-side in general, this type of debugging and profiling will only become more useful.
Firebug Console API:
http://getfirebug.com/console.html
By pressing F12 web developers can quickly debug JavaScript code without leaving the browser. It is built into every installation of Windows.
In Internet Explorer 11, F12 tools provides debugging tools such as breakpoints, watch and local variable viewing, and a console
for messages and immediate code execution.
I am struggling with breakPoint issue in VS 2012 for more than hours. I am from eclipse background, there I never heard about such issues.
Problem :
The breakpoint will not currently be hit. No symbols have been loaded
for this document.
I have placed the break point in click action of Jquery.
I found the issue using the IE script debugging., The file loaded was old file., i.e I have modified a lot, but I can see no changes in the one which is loaded in IE. How to fix the bug
What I have Tried :
I know this question is duplicate, but being a newbie to VS and C#., I could not understand the older answers. For example, in this answer, he told to choose Debug -> Windows -> Modules. But I doesn't have Modules under windows in VS 2012. Also even though I read, I could not understand the explanation.
Also I am quite new to term Assemblies and PDB. Though, I located PDB files as he said. But how to open the .pdb file?
Need :
Could anyone explain me the same answer in easier term (with more explanation).
I found this out by accident with my VS2012 and ASP.NET MVC, maybe it can help somebody. I noticed that breakpoints in javascript that's inline in the *.cshtml file like this won't get hit (note that this file is a cshtml file):
But breakpoints in external *.js files will get hit:
Try to add debugger; key word before $.getJSON
Also make sure if you use IE to un-check the disable script debugging
Internet Options> Advanced tab> Under Browsing.
As I think this issue is related to Javascript debugging not C#
This results for me:
In your web application make sure Silverlight and ASP.NET debugger are enabled.
How to get there?
=> Right click on the Web Application => Properties => Web tab. Under Debuggers section make sure Silverlight and ASP.NET are enabled.
Running Visual Studio 2013 or Visual Studio 2015 RC, I've found that to get a breakpoint to work in a .js file I need two things to be true:
I need to start Visual Studio by right-clicking the VS shortcut and select "Run as administrator". (If right-clicking on the Taskbar icon, select the application shortcut icon from the pop-up menu and right-click on that to get a context menu that includes "Run as administrator".)
I need to set Internet Explorer as the default browser that will be opened for the web debugging session. If I choose Chrome or Firefox, the breakpoint doesn't work for me.
After opening and closing VS, rebooting the PC with all with no chance, this workaround worked for me in VS 2012 ( Ver 11.0.50727.1 RTMREL ):
In Project Property Pages, under Start Options, in Debugger section, only ASP.NET was enabled. As soon as I enabled Native Code and SQL Server, that red circle with plus sign inside, enabled again.
No idea why this worked! No active connection in Server Explorer nor using any native code in the project!
I had the same problem. You can use VS2017 to debug JS code this way.
When you set VS to launch the browser (Chrome in my case), it opens a new Chrome window. I was trying to debug the specific code (different URL from the window that opened) in a new tab. So I had the 'The breakpoint will not currently be hit. Breakpoint set but not yet bound' in VS.
I found out that if I opened the new URL in the original tab it suddenly worked. Seems that VS is tied to that particular tab.
Hope this helps.
These are the particulars of my situation: VS 2017 - Mainly C# code with some embedded HTML/JS which I needed to debug, Chrome (Version 68.0.3440), Windows 10
As this is Javascript code, so you need to use a javascript debugger. Generally internet browsers come with a debugger/inspector menu, which allows you to inspect/debug your javascript easily. Such debuggers come with a lot of useful features such as HTTP request/response inspection, browser session/local storage, etc.
Actually there is "Modules" option, but it's enabled only when you are in debug mode.
You can just press Ctrl+D,M combination when you're in debug.
In few words, PDB is a file that contains all debug information about your assebmly, you can not debug an assembly without this file. Assembly is a file that contains precompiled code for exetuion via CLR.
Could you provide a bit more information about your problem. What kind of application you are trying to debug for example?
Also, if you have located you pdb files made EXACTLY for your assembly, you can load it by right-clicking your assembly in modules window and selecting Load Symbols From > Symbol Path
Try deleting all breakpoints and restarting debugging in Visual Studio.
Does Dreamweaver CS 3 have a JavaScript debugger?
The only information on anything close is that it says I need to click on the
'preview/debug in browser' button which does open the page, but no debugging ever happens when the page has an error. I also see no way to set breakpoints or walk through the code.
MS Visual Web Developer (Visual Studio Express - which is free) has a debugger that you can attach to a process. So even if you are not developing in it, you can debug the JavaScript in any browser. It also has a very rich variable watch that allows you to drill down through all the decendants of an object for its respective values. I was hoping that Dreamweaver could at least match Visual Web Developer...
What is the experience using the Visual Studio debugger tools with non-Internet Explorer browsers?
Dreamweaver has no effective built-in debugger.
Firebug works great with non-Internet Explorer browsers
Visual Studio tools work great with ID browsers
What is the one that works well across the board?
Debuggers are specific to a particular interpreter/compiler, not to a language. The same language - in this case, JavaScript - can have more than one interpreter/compiler. In particular, each browser has their own.
So to debug JavaScript in Internet Explorer, you need an Internet Explorer debugger - either the one built into Internet Explorer, or one of the Visual Studio flavours. To debug JavaScript in Chrome, use Chrome's debugger. To debug JavaScript in Firefox, use Firebug. (And so on.)
There is nothing native to Dreamweaver that handles debugging JavaScript, but there are several other options out there for free.
The Firebug add-on for Firefox allows you to set breakpoints and step through JavaScript. Download and play with that, and you should find what you need. Here is a brief tutorial hitting on your points: Debug Javascript with Firebug
I solved most JavaScript problems using the Error Console in FireFox. I never got Dreamweaver's to work.
I agree with CheGueVerra, defenitively the best debugger is the "error console" in Firefox. If you want to make it even better, just download the Firefox Add-on Console². All you need to debug JavaScript code is there.
You can also use Firebug, which is in my opinion the best JavaScript debugger for Firefox even if there are still some issues sometimes (refer to my post a few days ago, Stack Overflow question Firebug debugger not working in Firefox 3.x?).
I assume you're looking for something where you can attach breakpoints and such... Well, without echoing the others (this can be done in Firebug), do try Aptana Studio. It can be run like a plugin on Eclipse and can be used to debug JavaScript.
How can I debug JavaScript in Eclipse. I am using Eclipse 3.2.1. Everytime I click on the side it gives the option for adding bookmark but no break point.
Could anyone assist me on this?
In 2015, there are at least six choices for JavaScript debugging in Eclipse:
New since Eclipse 3.7: JavaScript Development Tools debugging support. The incubation part lists CrossFire support. That means, one can use Firefox + Firebug as page viewer without any Java code changes.
New since October 2012: VJET JavaScript IDE
Ajax Tools Framework
Aptana provides JavaScript debugging capabilities.
The commercial MyEclipse IDE also has JavaScript debugging support
From the same stable as MyEclipse, the Webclipse plug-in has the same JavaScript debugging technology.
Adding to the above, here are a couple of videos which focus on "debugging JavaScript using eclipse"
Debugging JavaScript using Eclipse and Chrome Tools
Debugging JavaScript using Eclipse and CrossFire (with FB)
Outdated
The Google Chrome Developer Tools for Java allow debugging using Chrome.
I don't believe Eclipse has a JavaScript debugger - those breakpoints are for Java code (I'm guessing you are editing a JSP file?)
Use Firebug to debug Javascript code, it's an excellent add-on that all web developers should have in their toolbox.
I'm not a 100% sure but I think Aptana let's you do that.
I tried to get aptana running on my ubuntu 10.4. Unfortunately I didn't succeed. Chrome on the other hand, has an eclipse plugin that lets you debug javascript that's running in a chrome instance. Works very well.
YOu'll have to install the eclipse plugin you'll find here:
http://code.google.com/p/chromedevtools/
Set Breakpoints in the javascript sources you edit in eclipse and browser your page in chrome. As soon as a javascript breakpoint is hit, the eclipse debugger halts and lets you step into, step over, browse the variables etc. Very nice!
JavaScript is executed in the browser, which is pretty far removed from Eclipse. Eclipse would have to somehow hook into the browser's JavaScript engine to debug it. Therefore there's no built-in debugging of JavaScript via Eclipse, since JS isn't really its main focus anyways.
However, there are plug-ins which you can install to do JavaScript debugging. I believe the main one is the AJAX Toolkit Framework (ATF). It embeds a Mozilla browser in Eclipse in order to do its debugging, so it won't be able to handle cross-browser complications that typically arise when writing JavaScript, but it will certainly help.
Use the debugging tools supported by the browser. As mentioned above
Firebug for Firefox
Chrome Developer Tools from Chrome
IE Developer for IE.
That way you can detect cross-browser issues. To help reduce the cross-browser issues, use a javascript framework ie jQuery, YUI, moo tools, etc.
Below is a screenshot (javascript-debug.png) of what it looks lime in Firebug.
1) hit 'F12'
2) click the 'Script' tab and 'enable it' (if you are already on your page - hit 'F5' to re-load)
3) next to the 'All' drop down, there will be another dropdown to the right. Select your javascript file from that dropdown.
In the screenshot, I've set a break-point at line 42 by 'left-mouse-click'. This will enable you to break, inspect, watch, etc.
It's possible to debug JavaScript by setting breakpoints in Eclipse using the AJAX Tools Framework.
MyEclipse (eclipse based, subscription required) and Webclipse (an eclipse plug-in, currently free), from my company, Genuitec, have newly engineered (as of 2015) JavaScript debugging built in:
You can debug both generic web applications and Node.js files.
For Node.js there is Nodeclipse 0.2 with some bug fixes for chromedevtools
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.