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.
Related
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.
Before you mark this as duplicate, please note that the other questions are all over a year old. We are in 2011, and we still don't have half a decent I.E. debugger like Firebug. The only few solutions are paid.
Are there any tools I am missing? How do you go about debugging JS in IE?
IE has the IE Developer toolbar. It's been available since IE7. It's not as good as Firebug but it's better than nothing and it's getting better with each version
Forgot to include the link : http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535
The Developer Tools of IE8. You even got a console object to log with. And in IE8 you can switch to IE7 engine.
There's also Firebug Lite.
Also, IE9 comes with a full fledged JS debugger.
If you can deal with using just logging rather than a full-on debugger, you could use a cross-browser logging library such as my own log4javascript.
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.
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.