This question has been asked before but that was three years ago and Microsoft Script Debugger is no longer supported.
Are there any more recent tools out there to help me debug Javascript for IE6/7?
You can use Visual Studio for that: http://www.codeproject.com/Articles/18921/Using-Visual-Studio-to-Debug-JavaScript-in-IE
Btw, Microsoft Script Debugger is still available for download : http://www.microsoft.com/download/en/details.aspx?id=22185 and it should still work fine for debugging script in Microsoft browsers.
Interestingly, for IE7 you should be able to use IE9 on Windows 7 or Vista. In IE9, open the developer tools (F12) on the page and switch "browser mode" to "IE7 standard" and "document mode" to "IE7 standard". Now your IE9 displays pages and runs JS just like an IE7 would - and for all purposes and checks it will be seen as IE7 - yet you have all the IE9 debugging tools available to you. This was a god-send for me debugging issues on my site.
Unfortunately though, this doesn't work for IE6, because that mode is not available.
DebugBar is the most actively maintained plugin. There are also a few bookmarklets:
JavaScript Shell
Eval and Dump
Mouseover DOM Inspector
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 don't get any error in firefox or firebug, but yet in IE I get invalid argument for some reason, and I can't figure out what is the invalid argument, the javascript halts when "error" is discovered .. what can I do to debug it ?
Firebug Lite is awesome.
If you're running IE8, you can use the developer tools by pressing F12. You can also download them for IE7.
If you have Visual Studio you can use it directly to debug javascript.
First uncheck the advanced IE settings "Disable script debugging" then attach VS to the IExplorer process (Tools => Attach To Process then find the process).
Clearly this is not the easiest option here but can work in a pinch. If you are already using VS to do your development just disabling script debugging and launching your website with IE will allow the JS debugger to work automatically.
Enable the script debugger in IE.
Note that with jquery or mootools 90% of the IE bugs (when it works fine in FF) is because I didn't explicitly extend an element I was working with.
In firefox you can just say element.jquery_function(), however with IE the element must be explicitly extended with element = $(element), or just get in the habit of writing $(element).jquery_function().
You didn't give enough info to debug your problem, but i'd guess that is a good place to start.
note: I use mootools but i'm assuming this also applies to jquery
get internet explorer 8, or the internet explorer developer toolbar
I prefer DebugBar over Firebug Lite.
I would use a cross-browser logging library such as my own log4javascript.
If you're on IE 8, that comes bundled with developer tools.
If you're on IE 7 or 6, there's the free IE Developer Toolbar from Microsoft.
There's also Companion.JS for IE 6/7.
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.
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!