i have web application in asp.net 2.0
i have following image in firebug
when i debug javascript using F10 whole line no 67 gets executed in one go, when i press F10 again line 68 gets executed
so in line no 67 there are more than one statements and they are executed in one go.
so how to debug statement by statement in firebug ??
thanks.
This is a common problem when debugging minified javascript code.
Ideally you should be debugging with non-minified javascript. If this is your site, you should swap out the JS code for the dev versions while you're testing.
If it's a library, a lot of third party tools provide a .min.js version and a plain .js version, so swap out the .min.js and use the .js` instead for now. If it's your own code, you should have the original code to hand anyway.
Having said that, if it's library code, the odds are you don't need to debug it anyway; the problem is likely to be in your own code, not in the library. Set the break point in your own code, and step over any library calls.
If you must test your site using minified code, then you need to use a technology called "Source Maps" to help you.
A Source Map keeps a set of links betweeen the original un-minified JS code and the minified version that is being run. This allows you to debug your site using the minified code, but to see the original un-minified code in the debugger.
This is relatively new technology. I know it's definitely available in the Chrome. I'm not sure whether it's available in Firebug yet though. You might want to investigate a bit further. If it isn't available yet, it will be very soon. (maybe take a look at the beta version or the nightlies)
Of course even if it is available, in order to actually use it you need to have the original source code and the source map so the debugger can do the mapping. Again, third party libs should provide these for you. For your own code, you'll need to generate the map as part of the minifying process.
Further reading about source maps: http://net.tutsplus.com/tutorials/tools-and-tips/source-maps-101/
Hope that helps.
F10 and F11 to step into and to step over
Related
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.
After having written large amounts of code in Intellij Idea Ultimate edition, I often want to test a method, or big pieces.
I often resort to having to paste the code in firebug in firefox, a small annoying cramping space, with no editor features. If the code needs adjusting I need to do it there, test again, copy and insert into Intellij Idea.
Is it possible to run firebug like console code, right in Intellij ? Similar to in Java debug mode with the Inspect tool ? It would have been really useful, even more useful just to highlight some code and press run.
Browser support is not important, any browser will do.
Is this possible already? Is there an Intellij plugin for this? Why not? :(
Thanks!
If the browser is not important, you could use the node.js plugin as a javascript repl / debugger. Keep in mind that it will not provide an HTML DOM so if your code makes jQuery calls, it will not run out of the box. Otherwise, if it's just plain javascript, it will run just fine.
Just stumbled over this. A bit late but anyway:
Debugging Javascript, editing values, etc. works fine using intelliJ with its Chrome Plugin.
See https://www.jetbrains.com/idea/webhelp/configuring-javascript-debugger.html or
http://blog.jetbrains.com/idea/2011/03/intellij-idea-debugging-javascript-in-google-chrome/
You can set breakpoints to stop where you want and can from there evaluate expressions and all the other stuff you would like to do.
Hope this is what you wanted to know.
Running a webapplication in an environment with IE 6 (please do not comment that...), I'm looking for a debugging tool for html/javascript in Eclipse Galileo. I'm not supposed to install any other software but I'm able to install a Eclipse Plugin.
Thank you for every hint. :)
PS. IE 6 drives me nuts. I usually use FF or Chrome but sometimes its not my decision.
Have you looked into the ATF plugin for eclipse? Includes a JS debugger that looks and works similarly to the Java debugger.
Alternatively, you could use the MS Script Editor. It' ain't pretty, but it's got all the basic debugging support you probably need. Here's a link that does a decent job of explaining basic use and setup: http://www.jonathanboutelle.com/how-to-debug-javascript-in-internet-explorer
My personal approach for using the MS debugger is to just insert a line into my code that says simply: x.x;
This will fire the debugger at exactly the spot I need, then I just change the value of x in the watchlist to be equal to document, thus correcting the error I forced. I can then step through the lines of my code and debug as usual.
Link to ATF for previous post: http://www.eclipse.org/atf/
Jquery.com provide 2 version of jquery library. I always use Minified version because i never edit anything in jquery base file. but what is the use and purpose of another Uncompressed Code version? Does people edit main library file to get something?
If yes then if we edit anything in main file then we can't use google ajax library link.
Production (19KB, Minified and Gzipped)
Development (120KB, Uncompressed Code)
If you're using the minified version during development, browsers will tell you there's an error on line X, but line X might consist of hundreds or even thousands of lines of uncompressed code. This makes it very, very difficult to figure out what exactly caused the problem.
Developing against uncompressed code thus allows you to see what's causing problems and fix. Minified jQuery should always be used in production, and the core functionality of jQuery shouldn't be tweaked - that's what plugins are for.
edit 5/2014: Source maps have been implemented in many browsers to allow debugging of minified code. https://developers.google.com/chrome-developer-tools/docs/javascript-debugging#source-maps
It just makes it much easier to read the source code of jQuery, especially during debugging to see what is happening with a problem in your application.
It's for Debugging (although I would argue that if you're using jQuery, you should be looking through the source to understand it).
In ASP.NET at least, when using the ScriptManager control, you can assign one script to use in Debug mode and another to use in Release mode, so using the uncompressed version in debug allows you to step through the source and figure out if an issue you're having is coming from there, but when you finally build the release, you'll use the minified and gzipped version.
Most of my javascript work is done with Firebug and I feel annoying most of the times having to switch between the HTML mode and console mode (which again I split into output mode and input mode). When I switch to a different page to see the HTML and come back, I lose the code that I write. What is the best way to go about developing javascript applications using firebug?
Something like a mini IDE would be awesome: It just has to let me insert some code, examine the current page and then let me execute it. Any suggestions?
I use a simple text editor (vim) to write Javascript and HTML, and I check the result every now and then in Firefox. I have always two windows open: one for my text editor, and one with the current page open in Firefox. After saving a change in the Javascript, I switch to the browser and refresh the page to observe results. That was my workflow until recently.
A couple of weeks ago, I discovered the Combiner tool by Nicholas C. Zakas. To release my Javascript code, I am now using a complete build process based on Apache Ant, similar to what I was using while doing Java development previously.
The first step is to check the Javascript code with the JSLint tool by Douglas Crockford. I used to painfully copy and paste my Javascript code in the online version of the tool, once in a while; being able to run it on all my Javascript files at once with this Ant script is a huge convenience.
The second step is to combine all my Javascript files into a single file using the Combiner tool. The third step is to minify the Javascript code using YUI Compressor by Yahoo!. These last two steps allow to optimize the delivery of Javascript code to reduce page loading.
You can find an example Ant build file that you may adapt to your own needs. I am currently using this file to build my own Javascript library, bezen.org.
The other answers so far have been correct: I've never heard of anyone actually developing inside Firefox/Firebug, because it's a tool designed for debugging, not coding. To do your coding, you should use a tool designed for it (either a text editor or a full-fledged IDE).
But that being said, you might want to check out FireEclipse (Link). It will allow you to integrate Firebug with the Eclipse IDE (which itself has at least three different JS plug-ins to choose from). Alternatively I think the main (aka Web Standard Toolkit, aka WST) JS editor for Eclipse has some functionality which is similar to Firebug, but I've never used it so I don't know the details.
Hope that helps.
Write your HTML in an editor/IDE
Save your changes
Preview it in your browser
Debug using Firebug
Make your code edits in your SOURCE CODE
Repeat
Firebug is for debugging and allows you to do some "what if" fiddling while the page is live. This is not a replacement for an IDE.