I just installed VS 2010 Beta 2 and wanted to play with an ASP.NET MVC 2 project. I simply added some script (alert('hello');) into the Home controller's index.aspx view, and I can see it executing. When I try to set a breakpoint, however, it never gets hit. I also tried to use the "debugger" keyword, and when I do, I get a disappointing "there is no source code available for the current location" message. I also get this message when I try to independently attach to an IE process where my app is running.
What do I need to do to get a friendly script debugging experience? (I have successfully used Firebug to debug this, but for some reason I prefer the VS debugger.)
Here are some details of my configuration:
I am launching my stuff in VS 2010 Beta 2.
IE8 version 8.0.7600.16385 is my default browser.
The "Disable script debugging (Internet Explorer)" advanced option is unchecked.
The "Disable script debugging (Other)" option is unchecked.
In my ASP.NET MVC 2 project's "web" properties tab, the ASP.NET debugger is checked. All others are unchecked.
Visual Studio 2008 script debugging seems to work just fine.
The debugger cannot debug both Silverlight code and Script code at the same time, if the Silverlight debugger is selected JavaScript debugging is switched off.
Go to the Project's Properties (Alt+Enter).
For a Web Site Project: Select "Start Options". Or for a Web Appliction: Go to the Web tab and at the bottom you will see the Debuggers option.
Check that the Silverlight checkbox is NOT ticked if you want to be able to debug JavaScript. (It is unfortunate that the UI here is not clear about this side effect.)
I was having the same issues. I was not able to get the IDE to even break at a breakpoint set inside a script tag. However when I added "debugger;" as the first line in the script tag was able to get the IDE to respond but then only to say that the disassebly was not availble.
However, I was able to click on the debug tools like "step into" and "step over". When I did this the IDE did progress into some of the external scripts that I am using (JQuery and Google Maps). So I took the JavaScript code block out of the view and put it into a separate .js file in the "Content" folder. Then I added a script tag to reference this new .js file (url = "/Content/Test.js").
It worked... a little bothersome that you have to go through this effort but maybe there is something to be said for JavaScript not being included directly in a view. I hope this is a bug they intend to fix.
When debugging on IE, VS seems to add a folder called 'Script Documents' to the Solution Explorer. Inside this folder there is another folder called 'Windows Internet Explorer', and inside of it I see all the loaded js scripts and the (compiled) HTML file currently being displayed on IE. Setting breakpoints on the script tags in this HTML file does work for me.
To resolve this go to the Project's Properties and select "Start Options". Then Check the Native Code Check Box. and Uncheck the Silverlight Checkbox because both options not works together.
CTRL+Alt+P (Attach to Process), select IE, select 'script' for the debugging type.
As Ryan noted above, I moved my script to a seperate file under the Scripts folder.
I also added debug into the name of the script so it became MyTestScript.debug.js. I included the script via a script tag and could set break points in the script file which the debugger hit.
I have found that the Google Chrome devloper tool shows the JavaScript perfectly. In my case, I'm normally loading the script with jQuery's getScript function and execution of the code is typically by way of a jQuery callback upon loading a page or handling an event. With Visual Studio 2010, I frequently encountered the "No source" bug. Sad I need Chrome to debug JavaScript that is part of my Visual Studio project.
Using a separate js file has its drawbacks. For instance, you can't use MVC helpers. Microsoft really needs to figure this one out.
Intellisense also does not work properly in script blocks on a view, even if you include the reference comments like this:
/// <reference path="/Scripts/jquery-1.6-vsdoc.js" />
/// <reference path="/Scripts/jquery-1.6.js" />
Intellisense works fine in the js file with this approach though.
Related
I recently upgraded from VS 2017 to VS 2019.
In VS 2017, when running an asp.net application locally, using Chrome, I could put a breakpoint in javascript code and the debugger would stop on the breakpoint. This no longer works in Visual Studio 2019.
What do I need to do to enable javascript debugging in Visual Studio 2019 using Chrome? I would like to be able to put breakpoints in javascript files and have them hit.
Here is my setup.
I've enabled Javascript debugging.
I put a breakpoint in my Javscript code. This breakpoint is in a *.js file (not inside a Razor view).
The breakpoint is ignored. Visual Studio very courteously shows me a tooltip telling me the breakpoint will be ignored.
It should work in VS2019+Chrome.(I just checked this in several machines)
This is not one issue can be resolved directly since many factors can cause this behavior, you can follow suggestions below to check if it helps:
1.Update your VS2019 to latest 16.3.7, update your chrome browser to latest 78.0.3904.87
2.Delete the bin and obj folders in your project directory => then close and restart VS => open that project and do a clean rebuild
3.Make sure you're in debug project mode, right-click your web project=>Set as StartUp project
Also, sometimes we need to wait for several seconds before the debug session starts successfully.(I once met same popup, then after several seconds it disappeared and everything worked)
Hope it helps :)
Besides enabling JavaScript debugging in Visual Studio, please ensure that minification is off. (Turn off bundling/minification while debugging in WebForms)
If your page contains Razor syntax, the breakpoints won't work.
Instead add the debugger; statement into the script as a breakpoint.
Then again, the debugger statement had failed to work earlier this year. It only works at top level, means before the page is completely rendered. It will not work if I put the debugger statement into $(document).ready()
So my work around now is to put my javascript in a separate .js file without any Razor syntax.
The good old console.log works for me as nothing suggested as above answers are working at all. Anyway it is what it is amidst the frustration for VS, nothing new about that.
If your Javascript is in a Razor file it will not work.
I have been struggling with this for ages and getting by with console.log.
But just now I moved the js into an external file and bingo it works.
I am using latest VS 16.11.5 and Chrome in a .Net 5 project with Razor pages.
Possible to set a breakpoint for the code block of javascript like the screenshot below.
How can we use them? VS always ignores.
If Internet Explorer is set as the browser when debugging, Visual Studio is, in theory, able to stop at breakpoints set at client side script. To use the feature, you will need to make sure that "Disable script debugging" is checked in your IE Internet Options, Advanced tab.
However, I have found VS script debugging to be a bit flaky; the breakpoint is not always hit, especially with VS2010 or earlier. My personal experience is that it works best in VS2012 or later.
That being said, if you're using VS as the client-side script debugger and you find that your client-side breakpoints are not getting hit, it is best to insert a "debugger;" line prior to the line you would like to break at to ensure that it is picked up by the VS script debugger.
pennstatephil posted a link above that indeed provides more information on the subject: http://msdn.microsoft.com/en-us/library/7seh8d72.aspx
Edit: I'm not able to add comments, but in response to sb9's comment about why one would use IE, I find debugging in Visual Studio a lot more convenient when investigating script behavior before postbacks occur and server-side behaviors occurring immediately after postbacks. Also, sometimes the VS/IE combination will catch errors that Chrome and Firefox/Firebug reports with a nonsensical error message.
In Visual Studio 2017 there is an option to enable/disable script debugging
Just enable it and you should be good to go.
There are seemingly infinite possibilities to why this happens. I just solved this problem after hours of searching.
My particular issue is that my breakpoints were disabled immediately after my coworker enabled bundling (see description here). I had to go into our BundleConfig.cs file and comment out the line that said:
BundleTable.EnableOptimizations = true;
After I did that, they were hit. You'd want to add that line back in for deployments.
Another scenario for the inability of the debugger to stop at the break point is if one uses bundling.
To debug JavaScript files, we need to remove bundling.
I hope this will help someone.
Yes you can put the break-point on client side page in Visual studio
First Put the debugger in java-script code and run the page in browser
debugger
After that open your page in browser and view the inspect element you see the following view
I am not experienced in developing web apps with NetBeans.
I created an HTML5 project with existing sources (some HTML, JS and CSS files), the import seems to be OK, but I didn't manage to debug JavaScript code, because the "Debug project", "Debug file" and "Debug test file" menu items are always disabled.
What have I missed?
PS.: I downloaded a fresh version in November 2013.
HTML5 project is always debugging and running at the same time if you run it in any browser with NetBeans connector (check the browser switcher in toolbar). So once you run project/file, if some breakpoint should be hit, it will be. Therefore debug action is not enabled for HTML5 project, because it is the same as Run action.
Basically it means you can debug JS in Chrome with NetBeans Connector, Embedded browser in IDE, Chrome on Android, Safari on iOS...
I also ran into issues when trying to debug JavaScript in a PHP project. I was using Chrome as my browser and had confirmed that the Netbeans Connector extension was installed and working in Chrome.
I could debug PHP without any issues. I could create a separate HTML5/JavaScript project and debug JavaScript without any problem. However, when I tried to set breakpoints on JavaScript code that was embedded in tags within the PHP file, I would get the little 'broken' breakpoints that everyone else references. When I selected the option to debug project, I could debug the PHP code, but the JavaScript breakpoints were never hit.
The change that I made that finally (for me) caused the JavaScript breakpoints to be hit so I could step through code using the Netbeans debugger was to remove the Javascript from the file containing the PHP/HTML code and place the JavaScript in a separate file that only contained JavaScript via a within the PHP file. Magically, I could debug both JavaScript and PHP within the same debugging session without any extra setup.
Of course, one alternative is to use the debugger within the browser, such as Chrome developer tools, but I really wanted to be able to debug everything from within the same Netbeans environment. Works like a charm now.
Never used the JavaScript debugger myself but you find here a tutorial if it has to be the Netbeans debugger. As an alternative I can recommend the JavaScript debugger from Firebug.
Use the Chrome debugger once the page is loaded in the browser.
When you end up solving cross browser compatibility you'll have to use particular browser console/debugger implementation (which may not be fancy). Before that enjoy in ChromeDevTools or FireBug :)
I have a web page which includes insane amount of minified JS files. The web page works perfectly fine on my local network but throws some JS error on staging. There is an issue in JS and I wan't to debug it. When I load the JS in Firebug's script tag it appears in one long horizontal line. Is there a way out in Firebug that expands or beautifies the script for debugging? I know I can use jsbeautifier but they wont help me. I can not upload an expanded file to CDN, defeats the purpose of using CDN.
Points to be noted,
a) I can not control the box which serves JS, its on CDN, I mentioned it.
b) I can use beautifiers etc but would that help me in debugging the script in run time? IMHO, no
c) Being bound by NDA and other legal things I can not share the script but its a generic problem, you can encounter it with a minified jQuery
Beautify your script
Add the CDN host in /etc/hosts or your local DNS to resolve it to your own web server
Host the beautified version and everything that you need on said web server
Both Firefox and Chrome (versions as of this edit) support beautifying script with the {} button available in the inspector.
Just load the minified file and press the {} button at the bottom and it instantly beautifies, making breakpoints and other debugging possible. (True for Chrome too)
This is a common problem and the Chrome dev team have recently come up with an elegant solution, which they've called Source Maps - see http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ for more info, I think you'll find it's exactly what you (and the rest of us) have been crying out for! :)
This is more a workaround, but it can help. The idea is that we will replace files coming from the server by files on your machine.
This will work with any browser.
It takes a bit of setup the first time (15 minutes maybe), but then it can be very convenient.
It can also helps testing your bug-fixes in a live/prod environment.
Get Fiddler (it's a web debugging proxy), install it, run it.
http://www.fiddler2.com/fiddler2/
(Restart browser after install to get the Fiddler extension)
If you debug an HTTPS website, check this first:
http://www.fiddler2.com/Fiddler/help/httpsdecryption.asp
From now on, you should see in Fiddler ("Web Sessions" pane on the left) all downloads made by your browser, including JS files.
If not, check this : Fiddler not displaying sessions
Find the file you want to debug in the list (Ctrl+F works)
Click on the file. Then either:
get the file content from the inspectors pane (textView tab), beautify it, save to a file on your local computer
or have access to a file which contains the source code (ex: from your source control)
Go to AutoResponder tab (top left pane).
Select "Enable automatic responses" checkbox.
Select "Unmatched requests passthrough" checkbox.
Drag your file from left pane to right pane (prefills rule editor at the bottom)
Set the other field with the path of your local file
Click the Save button
Reload the page and enjoy your debugging session.
Fiddler can do many more things, but this use-case answers the initial question.
Consider a Change!
Firefox w/ Firebug was my favorite JavaScript debugging method for almost a year, but I've recently moved to Google-Chrome's Developer-Tools which is far more superior.
Chrome supports an On-The-Fly (built-in feature) beautification of JavaScript resources
Once beautified, you are free to debug the JavaScript resource file, as it was "natively" downloaded beautified from the web-server. Breaking-points are set by clicking the line number.
One of the most extremely powerful feature,
Is once You've Stopped In A Breaking-point, You Are Free To Execute Commands (using console) In The Same Scope You ARE In The Breaking-point. In Firefox you can't do that.
Its so easy to debug (even anonymous functions), You'll never be back to Firefox.
Try It!
Pretty-print your JavaScript. Google this and you'll find multiple on-line JS beautifiers.
I happen to use http://jsbeautifier.org/ myself and it works fine, but search for others and use one that suits your needs.
Caveat: You still won't be able to get meaningful local variable names (which are usually renamed by a minifier). If the code was compiled by the Closure Compiler, then you absoutely won't get any useful information back at all, even when beutified, because then all variables and functions and properties are mangled (not only local ones).
Now, if your problem is with debugging code that comes from outside (e.g. a CDN), obviously that code would be minified, and you can't save your beautified version back there. In this case, you can replace the tags that load code from a CDN with a url pointing to your local version, then you can beautify the code (downloaded from the CDN) into your own server and you can then debug with FireBug.
Now, if you don't even control the HTML that contains those tags (e.g. they reside on a outside server), then unfortunately there is no way for you to do what you want without physically downloading the entire site to your own server. Even if you downloaded the entire site (with all the files), it may not work since the site may be driven by a back-end processing language or accesses a back-end database. In such case you'll also need to simulate all those data. It can be done, however -- you just have to go through a lot of pain. My recommendation is to save a version of the web page and run it on your own server, serving beautified code from your own server to debug.
Placing breakpoints on JavaScript makes debugging much easier, but if your code has already made it to production then it's probably been minified. How can you debug minified code? Helpfully, some of the browsers have an option to un-minify your JavaScript.
In Chrome and Safari, simply select the 'Scripts' tab, find the relevant file and then press the "{ }" (pretty print) icon located in the bottom panel.
In Internet Explorer, click the tool icon by the script selection drop down to find the option to format the JavaScript.
Opera will automatically prettify minified JavaScript. Source
I encountered a strange problem today. Whenever i put a breakpoint in one of my js files, the breakpoint is not hit.
I use Visual Studio 2005 in combination with TFS.
In ie the disable script options are both disabled.
The only thing that changed is that I installed Visual Basic 6 for an old project, but I don't see how that would impact debugging via Visual Studio 2005.
Did anyone had this problem before, or better does anyone know a solution?
thx.
In order for Javascript debugging to work the Visual Studio needs to be attached as a debugger to the IE process and it needs to be able to resolve the phyiscal path of the javascript file with the URL of the same script loaded in IE.
Have you checked that when you start debugging in VS that it actually attaches to the IE process that gets spun up?
Customizer your toolbar, on the commands tab select the debug category then find the "Script Explorer" command, drag it to a tool bar. Close the dialog.
Using script explorer you should be able to find the script that ought to have the break point on. Ordinarily VS is able to combine the root path it specifies for the developer web server with the physical JS file path in order to determine what its URL would look like from the browsers perspective, it can then novate the break point from the physical file to the script loaded in the browser.
you can also use a debugger; statement in your js. IE will then prompt you to debug the script file and should give you the option to debug in Visual studio 2005/2008 if you have them.
Explained here
A collegue found the issue: the Just in time debugger was only set to handle Managed and native code, and no scripting.
I just had to re-set it in the visual studio options pane.