We are searching for an HTML/JS debugger specifically suited for IE that can handle popup windows as well. We tested Firebug Lite which is good but it has its restrictions when compared to Firebug. We also tried IE Companion but there are some problems when it comes to in-place editing and popups.
Do you recommend a good debugger?
Internet Explorer Developer Toolbar. It is best for IE as of i know so far :)
alt text http://upload.wikimedia.org/wikipedia/en/d/d1/Devtoolbar.PNG
IE8 has one built in, it can run as IE7 also. Hit f12
Is this what you are looking for? It's called the Internet Explorer Developer Toolbar, it's like FireBug... but it's not that good :D
If (like me) you can make do with logging as a debugging tool, log4javascript works well.
Related
PLEASE NOTE THAT I HAVE NOW REBUILT MY MACHINE TO REMOVE THIS BUG, SO I CANNOT ANY LONGER VERIFY ANY ANSWERS.
I'm experiencing a problem when attempting to debug javascript using Visual Studio 2008. I've recently installed IE9, but that may not be the cause.
My javascript is in its own separate (.js) file, but whenever I put a breakpoint on a line, it just becomes hollow and says it will not be hit. Then sure enough, it isn't.
I've been into the IE internet options>advanced menu and unchecked the following:
disable script debugging (IE)
disable script debugging (Other)
I've also rebooted my PC. But still the breakpoints are not hit.
Edit: I've just noticed that there are two iexplore.exe entries in the "attach to process" window. That's surely not right! But how do I fix it.
Update:
Other things I've now tried:
Uninstalling IE9 and using IE8 instead.
Unchecking "enable third-party browser extensions" in IE tools>options menu
Try using the javascript key word "debugger;" in the line you want to set the breakpoint. It never fails me. =P
Try disabling third-party browser extensions as per this article.
In IE, go to Tools > Internet Options > Advanced and uncheck Enable third-party browser extensions (requires restart).
Make sure you restart IE.
Well IE has a debugger turned off by default, so try to hit F12 and go to "Script" tab and click "Start Debugging" which will turn the brakepoins on
And the
debugger;
will work only in the "debugging" mode
I know this is old, but try this
http://weblogs.asp.net/abdullaabdelhaq/archive/2009/06/01/VS-Debug-Problem-with-IE8.aspx
It worked for me.
Use a proper browser
I do most of my javascript dev in Firefox with Firebug plugin and Chrome with developer tools (F12).
Firebug particularly is awesome for stepping through code, once you've tried it you wont ever want to use anything else.
You can use Firefox/Firebug in combination with Visual Studio, while this will not let you debug inside your IDE the alternative of using IE is pretty unreliable. You can then debug your JavaScript easily inside the Firefox Browser which provides much better step-by-step debugging support and colour coding for easily identifying javascript objects (arrays, strings, dates, numbers etc).
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
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())
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.
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