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/
Related
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.
Forgive me if this has been asked elsewhere. I was not able to find a good answer yet. I have some Javascript code that works perfect in the latest release of Firefox. However, there is some odd behavior on an older browser that is used on our site. For reasons beyond my control, I need to support this hacked up version of a browser that is actually embedded into another piece of software.
I am stabbing in the dark as to the cause of the issues. I see no error console and of course tools like Firebug are a pipe dream. How do I effectively debug browser-specific issues? The old guess-and-check method will cost way too much time.
You can use Firebug Lite in IE6+ and older versions of FF/Opera/Webkit. The most useful feature of Firebug Lite in my opinion is probably the logging capabilities (console.log).
Checking the JavaScript for syntax errors before you even load the page with a tool like JSLint can save you some headaches. As a last resort, the reliable window.alert is always there.
It depends on the browser.
You may want to look at Firebug Lite for Firebug-like features in older and non-Mozilla browsers.
If the browser is weird enough that you really have to guess and check on the client side, I'd recommend writing a pretty good set of tests to run on every browser.
good luck with alert()'s
but you can try :
1) IE8 has the developer tools, that works fine in compatibility mode.
2) Firebug lite http://getfirebug.com/firebuglite#Stable
3) charge more from your damn clients that wants the thing to work in IE6
If you can make do with logging, my own logging library log4javascript works in every major browser released since 1999.
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
firebug is quite useful tool that I can't think myself living without it. I also downloaded the js file that helps you get similar functionality when using IE6 hoping it would help me resolve some issues, however, the messages I receive are not quite friendly such as:
"Expected ':' (default2.aspx,16)" - on line 16 there is nothing that can possibly expect a ":"
or
"Object doesn't support this property or method (default2.aspx,198)" on line 198 nothing interesting that can require any support for anything.
my site looks like a different web site in IE6.. most of the css doesnt work, some of the jquery functions doesnt work and I need to get this site work in IE6. Any help would be appreciated in terms of;
how to know what the messages (like the ones above) mean in IE6 and how to effectively debug js in IE6?
where to start for css compatibility.. e.g. shall I create different css files for different browsers and load them by detecting the browser? or are there any common issues and hacks?
I am lost so please give me any direction to start..
You debug javascript in IE6 with:-
Microsoft Script Debugger
The QuirksMode website is useful site to determine which bits of CSS is implemented in what way by which browser. Note IE6 "standards" mode rendering is notoriously buggy.
You can try Companion JS. It is pretty good with respect to debugging. It requires Microsoft Script Debugger as well.
Companion JS thankfully supports "console.log" (via firebug). It is free tool. Debug-bar is a good CSS-DOM-Javascript debugger, but it is not free for commercial purposes.
The two tools I use are:
Web Development Helper
IE Developer Toolbar
They somewhat duplicate each other's functionality, but each one can be useful for different tasks. The Web Development Helper has a built in JavaScript console, it's not as good as Firebug but it's better than nothing and easier than the MS Script Debugger.
"Expected ':' (default2.aspx,16)" - on line 16 there is nothing that can possibly expect a ":"
The error won't be on line 16 of your .aspx file, probably not even on line 16 of the HTML source the aspx file produces. It'll be near line 16 of one of your linked .js files. Which one? IE won't tell you.
You could find out by adding extra lines at the start of each .js file and seeing what happens to the error line number, but it's probably better just to install Script Debugger already.
IE8 finally fixes this.
shall I create different css files for different browsers and load them by detecting the browser? or are there any common issues and hacks?
Start with standards-compliant CSS, and a Standards Mode doctype, and test in Firefox 3, or Opera, Safari, Chrome. Mostly they'll give you more or less the same results. Now test in IE7 and hopefully it'll just work.
The troublesome browser today is IE6. You may well need to add hacks for it. You can do this in a separate stylesheet if there's a lot of them, or just use the "* html" hack for the occasional rule.
All the older hacks, your Box Model Hacks and so on, you can forget about. They're only of use for IE5, which is dead, and IE6 Quirks Mode, which you shouldn't be using.
or have an AJAX call to send debug variables/messages to ASP (PHP) script that will log it. this will help if the problem is with variables undefined or having similar issues.
For what it's worth, I've found the line number errors are much more accurate when using a separate js file.
I still use IE6 as my primary browser when developing. It saves a lot of headaches later, since you will often find CSS issues much earlier in the process.
I also find it helpful to use a JavaScript logger to send debug messages. This being an alternative to a bunch of alert messages. Personally, I use the yahoo UI logger
I use one of two things for js debugging: Microsoft Script Editor or Firebug Lite. Go here for more info.
As for the CSS, I recommend a CSS Reset. And for the little differences in IE6, consider using conditional comments.
When making an an application to be used in multiple browsers, quirksmode is a lifesaver.
EDIT: blackbird is a nice cross-browser tool for tracking state.
I've used MS Script Debugger with some success, also IE Developer Toolbar and Firebug Lite. I recently learned about MS Visual Web Developer Express Edition, which has been a big improvement so far.