How to debug javascript in asp .net MVC? - javascript

I am using Visual Web Developer 2008.I have debug my javascript at localhost by adding a breakpoint/debugger in js file.It works perfectly in IE8 before.
This nice debug function is broken, after I try a developer tools(Press F12 in IE8).

Firebug is my best tool for this.
I am talking of course for the firefox addon

Firebug is great (+1). However, the debugger in IE8 also works fine. I never use the VS debugger. If you're already using IE8 developer tools, just debug there instead of in VWD.

Related

Unable to debug javascript in VS2010 with SP1

I am using Asp.Net MVC project and using jQuery to code JavaScript. Problem is I am not able to debug JavaScript. I searched for this issue and found a few threads. Basically this one:
Visual Studio 2010 script debugger doesn't work for me
And
The breakpoint will not currently be hit. No symbols have been loaded for this document in a Silverlight application
None of these are currently working for me. I tried to launch my application in Chrome and IE9 but my breakpoint just doesn't get hit.
Can you tell me what is the issue?
Use IE9 with the F12 developer tools, FF5/FireBug and Chrome. They all have good javaScript debuggers. It's a good idea to use all of them.

How do you debug Javascript applications?

I work in an application that is JavaScript intense. So to debug , I end up using many alerts. Are there other better ways to debug ? What methods do you use ?
For JavaScript, debugging is a sinch in most browsers:
IE - Where you really need to debug, F12 is the console. You can call console.log, console.debug, console.error and a few others, and it will print out good data. When you call console.log on an object, good consoles will print out the property break-down of the object. There's also an active dom inspector so that you can see what's going on as the script is running.
Firefox - Get the Firebug addon. It is my favorite console of them all. Does everything I've ever dreamed of needing, and a few more features.
Chrome - Built-in console, inspect element on the page to see the breakdown of the DOM live.
Opera - Built-in console
Safari - Add Firebug Lite to the page, and you'll have a JS driven version of Firebug. Safari has built-in dev tools similar to Chrome, however they need to be enabled.
For all browsers, you can add Firebug Lite, but I really only use it for IE and Safari.
Most modern browsers include a console, which can help with displaying syntax errors and the like. Of course, there's Firebug.
Use Firefox as your main development platform and open the Web Console. Error messages are printed there.
Chrome also has a console, but it doesn't have Firebug, a Firefox add-on used for web development. While the Web Console that comes with Firefox will display errors in Javascript, Firebug will also help with inspecting the HTML for your page, and there are even extensions to Firebug like Flashbug for working with Flash components on your page.
Obviously you'll want to check your web apps in all browsers eventually, but do most of your developing in Firefox.

Is there a tool out there that makes debugging JavaScript and jQuery easier?

I'm fairly inexperienced with JavaScript and jQuery, but I need both for the ASP.Net website I'm working on. I am slowly figuring it out, but I've been relying heavily on StackOverFlow.
Does anyone know of any tool (preferably free) that makes debugging JavaScript and jQuery easier? I've been using Firebug which has been helpful, but I guess I'm just spoiled by Visual Studio's debugger and intellisense. Is there anything like that for JavaScript and jQuery? It would sure make my life easier if there were.
What do you use? Any recommendations?
Of course, use the Firebug plugin for Firefox
I don't like anything Microsoft, but last time I looked at Visual Studio it was providing IntelliSense for Javascript. You may be interested in this article.
You say you're already using Firebug, which is a good start. I'd recommend also debugging in a webkit browser, such as Safari or Google Chrome. Both options have a developer console built in and it behaves much like Firebug. The beauty of jQuery is it does the dirty work of browser DOM inconsistencies between browsers, so if you have pure jQuery working in one browser, it will more than likely work in IE as well. I always make my program work in a standards compliant browser first, and then worry about IE.
IE8 also has developer tools/console or whatever they call it.
My comment can be answer
for IE it is IE developer toolbar and for chrome it has Chrome Developer toolbar. You can even use Fiddler for IE which tells about ajax calls.
Please let me know if you need any other info
In addition to Firebug, using JSLint will check and help you write good JS code.
Firebug (Firefox). The awesome thing about FireBug is that you can use CSS selectors directly in the console (see here) to test some of your jQuery selectors. You can also find lots of logging functions to use with FireBug (check out the console API)
Firebug Lite (Not as powerful as the full-featured FireBug, but great in a pinch)
Chrome Developer tools (Chrome; Safari has nearly identical tools)
IE Developer Tools when you must open IE.
window.alert
JSFiddle, which is useful for quickly coding and testing JS.
Netbeans has a pretty stupendous system from what I've seen.
I like the Web Developer addon for Firefox and other browsers. It's got an error console which is pretty handy.

Dreamweaver JavaScript debugger

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.

Debug JavaScript in Eclipse

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

Categories