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!
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
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.
I am less than satisfied in my HTML/CSS/JS debugging of pages with IE6 and 7 specific bugs.
I am aware that IE8 has a Firebug clone, called 'Developer Tools' installed.
Is it possible to have IE8 installed (maybe on a VM, i don't mind), set it to compatibility mode (is there one for IE6?), then perform JS debugging and live HTML changes, using the IE8 Developer Tools, just like we can in Firebug?
many many thanks
mieze
There are differences between native IE6/7 and the IE8 compatibility mode:
http://blogs.msdn.com/ie/archive/2009/03/12/site-compatibility-and-ie8.aspx
The best option I've found to debug in IE6/7 is to install the Microsoft Script Editor (not Debugger), that is bundled with Microsoft Office. It's an optional install, so you probably have to open Add remove programs in Control panel and go through setup again. Here's a guide to configure IE after you've installed the Microsoft Script Editor.
http://www.jonathanboutelle.com/mt/archives/2006/01/howto_debug_jav.html
The default view doesn't have breakpoints and such, so take a look at the menu to add the views you like. It's not as good as Firebug, but it's a lot better than alert-debugging ;)
I've said it before, and I'll say it again:
Firebug Lite
That'll let you use Firebug features in whatever browser you feel like using that day...
The most satisfying IE6/7/8 javascript debugging experience I've had is with Visual Studio. And you don't have to shell out the beaucoup bucks to get it either since the Express edition has the same debugger as the higher SKUs.
Install Visual Studio Express Edition (Download)
Create a new project
Click debug to start the empty project
You now have an instance of IE running in a world class debugger!
Just point the browser at your test URL and set breakpoints to your hearts content!
You might want to try MS javascript debugger http://www.microsoft.com/downloads/details.aspx?FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99&displaylang=en
Not without its share of problems though
The IE8 dev tools is an upgrade of the IE Developer Toolbar, which is available for 6 & 7. It doesn't do debugging, but will let you inspect the DOM, etc. Combining it with the JS debugger (as in other answers) is as good as you can get, afaik
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