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.
Related
In IE, React.js javascript is not working in thin client but its working in localhost. why?
I am working on React.Js JavaScript code. In other browsers its working fine. But in IE browser, Its not working. But when we open developer tools, then its getting updated.
I tried to update values in IE. It didn't work. But after opening developer tools, It's getting updated.
Please help me out.
This commonly happens because console isn't available in older versions of IE unless the dev tools are open - the development build of React has lots of console logging with helpful warnings and errors.
You can use something like https://github.com/paulmillr/console-polyfill to make sure your apps won't die when console logging is present.
See also answers to 'console' is undefined error for Internet Explorer.
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
While developing a logging tool for websites, especially for javascript code I need to know if the Developement Tools (IE: Developer Tools, Chrome: F12, Firefox: Firebug etc.) are open.
Until know the only possibily I have found in my research was to get it in IE10 by asking for
window.__IE_DEVTOOLBAR_CONSOLE_COMMAND_LINE
Are there any variables or functions which can be called in Chrome, Firefox (and Opera) to get the status of the browsers Developent Tools.
I know there is the console object but this object does not tell me if the DevTools are open or closed.
You might find this other SO thread useful: Find out whether Chrome console is open
There is some good information about both Firefox and Chrome in there.
I want to gdb JS to see the change in Firefox while parsing JS, so I set --enable-debug while building Firefox, but it seems to be of no effect.
So, is there any other way to set the JS engine in Firefox in debug mode while buiding? And how?
use firebug, which is a very powerful develop tool for web app
You can use
console.log( 'Message ' or Object or Array or any data type )
It will work on most browsers in some way. For Chrome, it just works, for Firefox, you need Firebug. You can see it by opening the JavaScript Console.
You can debug your JavaScript, to use the developer console for your browser. Often times this is accessed by pressing F12 on your keyboard(If you have downloaded firebug already). Otherwise click on Tools>Add-ons and download firebug and check console or script to debug.
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.