Please suggest if we can use any static analysis tools for Javascript? Can parasoft tool be used? Any tutorial on parasoft would be helpful.
Are there any other debugger alternative to Opera dragonfly?
Thanks
Sneha
Static analysis:
JSLint
JSHint
Google Closure
Debuggers:
Chrome Inspector ( F12 in Chrome )
(FireFox) Firebug
(Many Browsers) Firebug Lite
(Mobile Webkit) weinre
The IEs have a few debuggers, some come with MS Office, some with Visual Studio, its sort of a mess, and I don't have great resources for that.
Static analyzers for JavaScript are fairly limited because of the linkage patterns and dynamically defined objects.
If you need to debug javascript for front-end web development, then the debugger that I find most useful is the IE9 debugger. I am aware that there is a lot of bias against internet explorer, but the debugger is really good and when an exception is thrown you would actually get a window for it.
Related
Firefox has recently released a new "Firefox Developer Edition" providing all development features natively.
I always use chrome for my developer needs and thought of giving it a try. Searched through but found no way to edit JavaScript live & re-compile the script like in Chrome.
Of course, there is scratchpad but it's not changing the existing script and IMHO is no different then executing a script in console.
Is Firefox still way behind Chrome developer tools ? Or I missed how to live-edit javascript in Firefox ?
References :
https://developer.mozilla.org/en/docs/Tools
https://developer.mozilla.org/en-US/Firefox/Developer_Edition
The Firefox devtools are actually in standard Firefox too.
Is Firefox still way behind Chrome developer tools ?
No, Firefox devtool is way ahead of Chrome in a few ways, it has web-audio tab, canvas tab, shader editor for webgl, a style editor that lets you easily click to show/disable stylesheets, etc.
I missed how to live-edit javascript in Firefox ?
Unfortunately the JS debugger is definitely way behind Chrome. Not only does it not have live editing, even basic handling of callbacks can be problematic at the moment and there are many reports of bugs (Chrome has devtools bugs too, but are not usually as noticeable).
Use the ScratchPad. For example:
References
Scratchpad - Firefox Developer Tools | MDN
Firefox Developer Tools - Scratchpad - YouTube
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.
Does anyone know if a browser-independent debugger exists...
For example I have been using Firebug in Firefox but if the web developers use other browsers - nothing.
I was wondering if there is some kind of "global" debugger that can attach to any browser and just debug?
Any ideas?
The makers of Firebug also make Firebug Lite, a JavaScript file that you can include in your webpage. They say that it works in IE, Opera, and Safari.
Steve
Since each browser has its own engine with its own quirks and such, it's more or less impossible to have a universal debugger.
Aptana, which is really just a rebranded Eclipse for web projects, has a debugger built in to the IDE, and comes closes to that ideal--in theory. It uses the Eclipse platform's debugging interface, but it still needs to be plugged into a browser. In Firefox, this works by plugging into...Firebug's JS debugger. But, it allows you to set breakpoints and step through code directly from the IDE (quite helpful for external JS files). For IE debugging, you need to purchase the Pro version, so I can't vouch for its quality. AFAIK, it doesn't support other browsers.
Nearly all the browsers have there own JavaScript debugger. Simply because they don't provide the same API (if they provide some) for accessing the JavaScript engine.
So, to complete your list, you have DragonFly for Opera, and WebInspector for the browsers based on WebKit (like Safari).
For IE you can also use Visual Studio to debug JavaScript - and it's better than the Microsoft Script Debugger. I'm not sure if the express editions are also capable of this.
Added: Both VS2005 and VS2008 are capable of JS debugging, although the newer product is better of course.
I run a Webservice that allows developers to "debug" their Javascript in the sense of finding bugs via a Javascript validator. See the HTML5 IDE guide for details to set it up with the "global" vim editor.
You can debug javascript with express edition of visual studio. Look here for details
Short answer: I don't believe so, but I hope you find one because I'd love to have one.
However, if you haven't been following IE development lately, IE's JScript debugging is alot less painful now with IE8; it includes, by default, some dev tools that do pretty much everything that Firebug does with the exception of AJAX debugging (but I prefer a protocol analyzer anyways for AJAX). It even implements an executable console, which includes several of the console.X methods from Firebug!
The profiler, I'm tempted to say, is nicer than Firebug's - simply because it lets you export the results directly to CSV. The actual debugger is as full-featured as JS debuggers get, with stepping/breakpoints/direct input.
Also, I haven't heard Venkman mentioned yet; its the grand-daddy of Firefox debugging (and other Mozilla Javascript). Not as popular as Firebug, but it definitely has its followers.
Lots of good information on this page as well: wikibooks.org/wiki/JavaScript/Debugging
javascript depends on the browser you are using (thus compatibility problems). To debug explorer you may use this: Microsoft Script debugger
you can use jsdt, you can get some information from https://code.google.com/p/jsdt/
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.
I have to do some JavaScript in the future, so it is time to update my toolbox. Right now I use Firefox with some addons:
JavaScript Shell from https://www.squarefree.com/bookmarklets/webdevel.html
Firefox Dom Inspector
Firebug
Greasemonkey
Stylish
I plan to use Venkman Javascript debugger as well as jsunit and js-lint.
For programming I'm stick with vim.
So what other tools do you use when developing JavaScript?
I use both Firefox and IE for Web Development and a few add-ons in each:
Firefox:
Firebug
Web Developer Toolbar
Internet Explorer:
IE Developer Toolbar
Fiddler
Visual Studio for JS Debugging
I sometimes use Emacs with Steve Yegge's js2-mode, evaluating code with Rhino & John Resig's env.js to load jQuery or Prototype in my standalone scripts.
This allows me to explore javascript, jQuery, and Prototype outside of a browser.
Example:
var window;
load("Library/env.js");
window.location = 'index.html'; // Load the page 'index.html'
print($('aForm').id); // Play with the Dom in a standalone script!
Web Developer Toolbar (Firefox Addon)
Nikhil's Web Development Helper (IE Toolbar)
Firefox:
Firebug - Invaluable for debugging markup and code while testing ideas directly in the browser
Rainbow for Firebug - JavaScript syntax highlighting
Pixel Perfect - Overlay images on any page, make it match the design on every pixel
Web Developer Toolbar - Just about any tool you can think of
Firecookie - Manage your cookies
YSlow - Suggests how to boost the download performance
Windows-only:
Fiddler - A great HTTP proxy with debugging capabilities
Internet Explorer:
- Web Developer Toolbar - Missing a few things but still very complete
Firebug on Firefox
IE Web Developer toolbar on IE
JS Lint
A couple more::
IE Explorer Toolbar
Firefox Developer Toolbar
Best way to debug JavaScript in Internet Explorer is to use Visual Web Developer Express.
If you like a cross browser logging solution check out Firebug Lite!