What techniques (other than alert(message);) do you use to debug JavaScript/jQuery? Give particular attention to browser specific techniques.
Tools
console.log(message) - alternative to alert(message); (Nirmal)
browser-safe call (soslo)
jsFiddle - demonstrations (Craver)
BlackBird - writing messages to the screen (Oli)
FireFox
FireBug (Lite)
Venkman's JS Debugger Add-in (Zeus)
Chrome
Built-in development tools (tutorial)
Firebug Lite (extension)
Safari
Built-in tools (overview - jsummers) (more information)
Opera
Dragonfly
Internet Explorer (I had to put it last)
Developer Toolbar
Firebug Lite
Adobe BrowserLab (Mickel)
IETester (Mickel)
MS Expression Web SuperPreview (Rijpstra)
console is your friend, available by default in newer browsers, and you can add a whole lot of debugging to IE with FireBug Lite.
For other browsers:
Chrome has developer tools
Firefox has the excellent Firebug addon
For demonstration/test cases, jsFiddle is also an excellent tool.
If you're concerned about using console.log because not all browsers support this, it's easy to workaround with a couple lines of javascript:
console = console || {};
console.log = console.log || function(){}; //you can change this to do whatever you want, or leave it to just keep js errors from being thrown
I love Blackbird. It's a cross-browser JS logging framework, with support for debug/info/warning/error.
You can display the console at any time with the F2 func key.
http://www.gscottolson.com/blackbirdjs/
If you are looking for an alternative for alert(message);, it is console.log(message);
The requirement is that you need any modern browser or a browser with developer tools installed.
More in testing than debugging domain.
Selenium - for GUI tests
JSUnit - for unit testing
The Chrome Developer Tools are a direct descendant of the Safari (WebKit) Developer Tools.
Refer to question for roundup of all answers.
Related
I have some Javascript code.
I want to trace errors and debug it.
how to do it ?
It used to be that debugging in javascript was quite limited. You could post alerts to indicate variable states or print information to the web page. In the case of syntax error, it would simply not execute all the code (meaning you had to place alerts prior to the error to know where it was).
Thankfully, browsers have caught up. Firebug is very useful as well as Chrome's developer tools which both use breakpoints, expression evaluation, as well as a series of other useful tools for debugging in-browser. I would suggest you look into these. I believe also internet explorer has a developer tools section, but I've found that it isn't to my liking, however you're free to use whatever you need/require.
It depends on the browser:
Firefox: Download the Firebug Extension
Opera: User the built-in Opera Dragonfly
Webkit-based (Chrome, Safari, Rockmelt...): Press F12 to open the built-in Webkit debugger
Internet Explorer 9+: Press F12 to open the built-in Developer Tools
IE <=8: Install DebugBar
Most of these tools are accessible via these keyboard shortcuts:
CTRL+SHIFT+I
F12
Look for the "Console" Tab. There the browser prints various errors like JavaScript errors, resource not loaded errors etc. To manually write to the console, most browsers offer the console object which hosts functions for the console. Most commonly used is console.log('text').
Google Chrome
F12 -> console.
in code use: console.log(variables);
Is it presently possible to programatically debug Javascript from within a browser window? I wish to be able to breakpoint/inspect Javascript from an in-browser window panel.
EDIT:
I should have been more specific: I'm loogking for an api to be used from within the page context, i.e. JS code in browser can add it's own breakpoints.
It's already built-in in Chrome and Safari and, to an extent, in Firefox. There exists multiple plugins for this. Look at Firebug for Firefox, and F12 Developer Tools for IE.
Utilize your browser's developer tools:
Use browser-specific developer tools, which allow you to identify runt-time errors, set up breakpoints, and run performance diagnostics. To make debugging much easier, don’t minify the JavaScript during development deployment.
In IE: IE Developer Tools
Or install the Google Chrome Frame which allows IE to process JavaScript with Google Chrome’s V8 engine and allows the user to debug with the Chrome Developer Tools
In FF: Firebug extension
In Chrome: Chrome Developer Tools
Use a static code checker, like JSLint, to verify that JavaScript code complies with generally accepted coding rules.
Use JsFiddle to easily test and improve JavaScript/jQuery functions (http://jsfiddle.net/)
This has a JSLint option for parsing the JavaScript
If you're using Firefox, try FireBug.
If you're using Chrome, it has an in-built debugger.
For IE there's something called DebugBar and F12 Developer Tools.
just go for firebug.
http://getfirebug.com
you can also have breakpoints
http://getfirebug.com/doc/breakpoints/demo.html
In Google Chrome -> Right Click -> Inspect Element
or
Firebug for Firefox
F12 in almost any modern browser.
Yes there are possiblities to do that.
For Chrome for example you can use the
the chrome.debugger extension to attach your own debugger-implementation to a website, that runs in another tab/window. Once you are attached, you control the debugger vie a JSON based remote debugging protocol. The biggest problem I would say is, that you have to pipe all your communication through an HTML-Element. This is the case because the extension can only communicate with a content script and the content script can only access DOM-specified attributes.
John Bartons chrome extension crx2app tries to simplify the access to the extension API. I don't know how much it actually supports, but it might also be helpful for developing a Debugger that runs from within the browser itself.
As far as I know Firefox also provides access to its internal JavaScript-Engine Spidermonkey and by extension to its debugging mechanism. But that might in fact collide with a FireBug plug-in, because you can usually only attach one listener to the Debugger. But with the recent release of the new Firefox built-in JavaScript-Debugger, which provides remote-access, this might be no longer a problem.
I am using Visual Studio 2010 Express Developer edition. Developing a Website. I'm using JavaScript in my .aspx pages. How to put breakpoints in Javascript.
Any help is highly appreciated.
Thank You
If you are using Web Developer Express you can do this within Visual Studio - here are the instructions.
If you are using a different Express edition, you will have to use a browser tool for client side debugging - for example Firebug. IE and Chrome have built in developer tools that have this kind of functionality.
You can use your browser's debugger :
For Firefox, you can use Firebug (http://getfirebug.com).
Chrome contains an embedded debugger.
From memory you will need to do the following to get JS debugging in Visual Studio:
Ensure that Internet Explorer has script debugging enabled (somewhere in tools -> options) - this is the bit most people don't know about.
Then go into the .aspx and add a breakpoint by clicking in the left margin of the line of Javascript you want to debug.
Launch the website project in debug mode (F5) and hit the page using IE - your breakpoint should then hit.
As noted by other people you can use a host of other (usually better) tools that come with other browsers.
If you're debugging IE, use the following links:
http://aspnetlive.blogspot.com/2010/02/debugging-java-script-in-visual-studio.html
http://msdn.microsoft.com/en-us/library/7seh8d72.aspx
For Firefox, I recommend Firebug.
http://getfirebug.com/
For Chrome, you can use the Developer's Tools debugger.
Update
Here's a comprehensive list of debugging JavaScript in each browser:
http://siliconforks.com/doc/debugging-javascript/
I like Firebug, plugin for Firefox.
I think the idea is to use the Attach to process option of the Debug menu; but to be honest, I've never had much luck getting VS to do this fluidly (though I remember it working at times, success is spasmodic at best), maybe tabbed browsing has made this an issue - I'm unsure.
One thing I can recommend, however, and we might get a few hecklers, are the Developer Tools of IE9. If nothing else, IE9 has become an invaluable tool for me recently simply because of its Javascript debugging capabilities. Here's an MSDN article to get you started with this.
Using FireBug & Internet Explorer Debuging tool let you debug and put breakpoint on your javascript files
I sometimes need to debug JS in other browsers, and it would be really nice if they all had Firebug - failing that, what's the closest they have?
Firebug Lite
IE8 - Developer Tools (F12)
IE6,7,8 - Visual Studio/Microsoft Script Debugger/DynaTrace (for tracing JS, not debugging)
Chrome, Safari - Developer Tools.
Firebug Lite - any up-to-date browser, but limited
IE - number of options depending of IE version and do you have Visual Studio
Opera - Dragonfly
Webkit based browsers have inspector and debugger in menu
IMHO Firebug is the best tool but could be used only on Firefox
Opera has the excellent dragonfly developer console, which can profile your code (to find bottlenecks and redundent code) as well as step through breakpoints.
For Safari and Google Chrome, the Developer Tools.
Just right-click anywhere and select "Inspect Element", or use the Ctrl + Shift + J shortcut:
Developer Tools http://img79.imageshack.us/img79/426/devtools.png
Fiddler is the one I use: http://www.fiddler2.com/fiddler2/
There is Charles: http://www.charlesproxy.com/
Also WireShark: http://www.wireshark.org/
How about Firebug Lite? It claims to work in IE, Opera and Safari by simply being a Javascript file.
Firebug can be used in other browser with it's javascript version : hhttp://getfirebug.com/firebuglite
Anyway, in Safari there is Web Inspector which is brilliant.
IE has the developer toolbar.
Is there a better way to debug JavaScript than MS Script Editor? I am searching for something like Firebug. Firebug Lite doesn't offer this functionality, though.
Use Visual Studio 2008.
The Web Development Helper from Nikhilk is useful as is the Internet Explorer Developer Toolbar (http://www.microsoft.com/en-us/download/details.aspx?id=18359). They are not as good as FireBug though :-(
Though not strictly debuggers, these are useful tools for your arsenal
http://www.debugbar.com/
http://projects.nikhilk.net/WebDevHelper/
I've used IE WebDeveloper. It's not free and not as nice as Firebug, but got the job done for me. http://www.ieinspector.com/dominspector/index.html
I would try and go for DebugBar. It's not as nice as Firebug, but it's very useful for javascript debugging...
There is a blog post that goes over most of the known ways to debug javascript in IE, with pros and cons.
Great article mkoryak
I used visual studio web developer as in this linked article
http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/
The only other debugger for JavaScript in the IE context is Visual Studio, but it'll cost you. What problems are you having with the script debugger that leads to think you need a better debugger?
I suspect that what you are after are the additional features that aren't specifically about debugging JavaScript but analysing the HTML DOM that has been modified by the JavaScript and the monitoring of the conversation with the server.
The IE developer toolbar I find particularly invaluable for debugging web apps as is Fiddler.
You can download the Microsoft Visual Web Developer 2008 Express Edition for free.
In newer versions of Internet Explorer (10.0+ I guess) the developer tools are integrated.
The debugger panel there allows you to debug your JavaScript like in Firebug, the Firefox DevTools or the Chrome DevTools.