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);
Related
Is there a way to inspect the stacktrace using the Firefox Developer Tools whenever an error occurs.
I know I can set breakpoints, but if it is an unexpected error, then the Firefox dev tools only show the place where the error occurred (usually somewhere deep in a lib like jQuery) and not the more application related stacktrace.
Something like Chrome does it:
If not yet supported, is there a bugreport for this somewhere? I search the web, but cannot find any...
In current Firefox (tested with Fx 44) this feature is now built in. See the toogle next to ReferenceError
I haven't tested it recently, but there's an experimental plugin to enable that: https://github.com/DavidBruant/usefulStackTrace
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.
Is there any way to check the current variables value and such using some sort of debugger? I have an error in my code, and I want to see if it is a variable causing it, and if not, I would like to figure out what is. What are some really good debuggers for JS anyone knows of?
You can take a look at Firebug http://getfirebug.com/
I agree with gpmattoo Firebug is great. Internet Explorer has a javascript debugger built in (hit F12) Chrome has one built in too but there is also a Firebug lite that should work if you like Firebug for Firefox
Visual Studio (and Visual Web Developer) has support for JS debugging.
More lightweight, however, you can probably find something that'll plug in to your browser. IE has a JS debugger built-in (as of IE8 I think), Firebug is probably the way to go in Firefox, and I'm pretty sure Chrome also has a built-in debugger.
You can use Firebug under Firefox or the chrome inspector (right click on the page and inspect...) under Chrome.
You will then need to use some logging if the variable is a local one (console.log())
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.
I need to debug JavaScript in Internet Explorer 7.
Unfortunately, its default debugger doesn't provide me with much information. It tells me the page that the error showed up on (not the specific script) and gives me a line number. I don't know if that is related to my problem.
It'd be nice if it could narrow down the error to a line number on a specific script (like Firebug can).
Is there an addon to debug JavaScript in IE7 like Firebug does in Firefox?
Thank you!
See also:
Does IE7 have a “developer mode” or plugin like Firefox/Chrome/Safari?
Web Development Helper is very good.
The IE Dev Toolbar is often helpful, but unfortunately doesn't do script debugging
The hard truth is: the only good debugger for IE is Visual Studio.
If you don't have money for the real deal, download free Visual Web Developer 2008 Express EditionVisual Web Developer 2010 Express Edition. While the former allows you to attach debugger to already running IE, the latter doesn't (at least previous versions I used didn't allow that). If this is still the case, the trick is to create a simple project with one empty web page, "run" it (it starts the browser), now navigate to whatever page you want to debug, and start debugging.
Microsoft gives away full Visual Studio on different events, usually with license restrictions, but they allow tinkering at home. Check their schedule and the list of freebies.
Another hint: try to debug your web application with other browsers first. I had a great success with Opera. Somehow Opera's emulation of IE and its bugs was pretty close, but the debugger is much better.
you might want to try
microsoft script debugger
it's pretty old but it's quite useful in the sense if you stumble on any javascript error, the debugger will popup to show you which line is messing up. it could get irrating sometimes when you do normal surfing, but you can turn if off.
here's a good startup on how to use this tool too.
HOW-TO: Debug JavaScript in Internet Explorer
I've found DebugBar.
Not as good as Firebug, but close.
In IE7, you can bring up firebug lite for the current page by pasting the following in the address bar:
javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);
See http://getfirebug.com/lite.html.
Microsoft Script Editor is indeed an option, and of the ones I've tried one of the more stable ones -- the debugger in IE8 is great but for some reason whenever I start the Developer Tools it takes IE8 a while, sometimes up to a minute, to inspect my page's DOM tree. And afterwards it seems to want to do it on every page refresh which is a torture.
You can inspect contents of variables in Microsoft Script editor: if you poke around under Debug > Window you can turn on local variable inspection, watching etc.
The other option, Visual Web Dev, while bulky, works reasonably well. To set it up, do this (stolen from here):
Debugging should be turned on in IE. Go into Tools > Internet Options > Advanced and check that Disable Script Debugging (Internet Explorer) is unchecked and Display a notification about every script error is checked
Create a new empty web project inside of VWD
Right-click on the site in the Solutions Explorer on the top right, go to Browse With and make sure your default browser is set to IE (it's reasonable to assume if you're a web developer IE is not your default browser in which case that won't be the default.. by default)
Hit F5, IE will open up. Browse to the page you want to debug.
VWD will now open up any time you have a script error or if you set a breakpoint in one of the JS files. Debug away!
UPDATE: By the way, if you experience the same slowdowns as me with IE8's otherwise decent debugger, there is a workaround -- if you encounter or make IE encounter an error so that it pops up the "Do you want to debug" dialogue and hit Yes, the debugger will come up pretty much instantly. It seems like if you go "straight" into debugging mode the Dev Tools never inspect the DOM. It's only when you hit F12 that it does.
IE8 has much improved developer tools. Until then it's best to write javascript for firefox first and then debug IE using alert() statements.
Microsoft Script Editor can be used to debug Javascript in IE. It's less buggy than Microsoft Script Debugger but has the same basic functionality, which unfortunately is pretty much limited to stepping through execution. I can't seem to inspect variables or any handy stuff like that. Also, it only shipped with Office XP/2003 for some bizarre reason. More info here if you're game.
I downloaded the Visual Web Developer 2008 Express Edition mentioned by Eugene Lazutkin but haven't had a chance to try it yet. I'd recommend trying that before Script Editor/Debugger.
It's not a full debugger, but my DP_DEBUG extensions provides some (I think) usful functionality and they work in IE, Firefox and Opera (9+).
You can "dump" visual representations of complex JavaScript objects (even system objects), do simplified logging and timing. The component provides simple methods to enable or disable it so that you can leave the debugger in place for production work if you like.
DP_Debug
The IE9 developer tools worked for me. Just set the "Browser Mode" menu item to IE7.
Hey I came across the same problem and found this the application IETESTER. It's pretty awesome, it's an app that has IE 5.5,6, and 7 bundled into it. It doesn't matter what IE version you currently have. This allows you to have multiple versions side by side.
If you enable javascript debugging in IE options and have Visual Studio installed you can even debug the javascript in VS with all the debug options available to you(watches, conditional breakpoints ,etc.)
If you want to start debugging before an error occurs you simply have to put the line
debugger;
into your JS code and this bring you into VS to begin debugging after this statement.
This is absolutely amazing to me for testing backward compatibility for JS code.
Use Internet Explorer 8. Then Try the developer tool.. You can debug based on IE 7 also in compatibility mode
FireBug Lite:
http://getfirebug.com/firebuglite
The answer is simple.
Get Internet Explorer 9
Press F12 to load up Developer Tools
Switch the browser mode to IE7
Running your code through a Javascript static analysis tool like JSLint can catch some common IE7 errors, such as trailing commas in object definitions.
IE8 Developer Tools are able to switch to IE7 mode
If you still need to Debug IE 7, the emulation mode of IE 11 is working pretty well.
Go to menu: Dev Tools, then to emulation and set it.
It also gives error line information.
The following tools works great for me:
1) http://www.debugbar.com/
Provide a convenience UI to with feature like source, style, DOM, Script, HTML check. It also show the actual error in your JS file (which line, which file).
2) http://www.my-debugbar.com/wiki/CompanionJS/Installing
Provide a console for IE6 or IE7 ( which originally does not support)
Screenshot