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
Related
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.
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
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.
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!