I'm developing in Javascript for quite a long time now. Usually when I hit an error in IE I know roughly where it originated even if the message received from IE is useless bunch of text. When I don't know where the error originated, I usually try to "delete" parts of my code, until the error doesn't repeat itself, and that start manually checking line by line until I find the error.
I'm sure that it's far from the best approach, so I'd like to ask you how you debug error like these:
If you are using IE8+, you can press F12 on a page to open the Developers Tools.
This contains a JavaScript debugger, much like Firebug & Chrome Dev Tools
EDIT:
In response to the comment under the question, if IE is throwing a cryptic error that you are unsure of, there is a couple of steps I would do.
Is it an IE only error? Does the same error occur in Firefox? Chrome?
Is the error occurring in a 3rd party library. If you believe it is, use an un-minified version of the library.
Can you replicate the error outside of your website? Can you make the error occur in a http://jsfiddle.net/ for instance?
If you still can't narrow down the issue, post a question on SO with your code, any error messages, and expectations of the result.
HTH
Try using non-minified version of jQuery - it will give you a better idea where exactly the error is. Also, if you use VS 2010 to debug your js code in IE, it will break at the error line. This always works fine for me.
IE is the only browser that I've managed to successfully use the fantastic Visual Studio script debugger with - in my experience Visual Studio is hands down the best script debugger out there, so quite often I find myself in the reverse situation to you (running broken scripts in IE just so I can use the script debugger)
See How to debug JavaScript in Internet Explorer for instructions on how to use Visual Studio Express to debug scripts in IE - if you own a full edition of Visual Studio then its much simpler (just attach to IE as normal).
I'm trying to get noVNC working with Internet Explorer 9 (platform preview 7). The developer tools window (F12) is greatly improved over previous version of IE. However, the tools don't report script file name or line number when exceptions are thrown.
Is there a straight forward way to match exceptions messages in the developer tools to the location in the Javascript where it occurred? (Other than brute force search by adding console messages to the code).
Update:
I discovered that the code causing the exception is within a try/catch block. If I don't catch the exception the behavior is worse: I never seen anything reported at all. But I can tell it has stopped executing based on console.log debug messages before and after (the ones after never fire). So I guess the question still remains, how do I get IE9 dev tools to show the location where console message (especially console.error) came from in the script the same way that Chrome dev tools and firefox firebug?
Which PPB version are you using?
Did you click the "Start Debugging" button on the SCRIPT tab in the F12 tools? If so, it should be breaking into your code at the exact point of the exception.
I solved this by selecting and adding a break-point to an arbitrary entry point in the JavaScript and using step into indiscriminately.
When there is a JS error in IE7, the text displayed is not helpful mainly because it says "error at line X" but the line doesn't really correspond to anything if you start including multiple javascript files.
Is there an option or add-on that could maybe improve this?
I haven't found anything in IE7. However, if you have the option, IE8 + web developer toolbar makes it a lot easier, as the web dev toolbar includes a javascript debugger. Most of the time I see the same errors in IE 7 and 8, so debugging them in 8 usually leads to fixing it in 7 as well.
The only extra detail you can get is by turning on the script debugging. You can do this through Internet Options - Advanced - uncheck Disable Script Debugging (Internet Explorer). This will pop up an alert whenever you get an error and you can see the line of code that created it as well as step through the code's execution.
All that I have found helpful is turning on the debugging. You can then sometimes step through the code to the problem. It seems to be hit or miss though, as to whether it actually works or not.
I have a big (probably) javascript problem.
i have a long and complex script on the page based on mootools framework,
in FF and other browser everything works fine, but in ie 6 and 7 i got "error:153 (sometimes 84) Unspecified error" and the strange thing is in IE8 that show me the error "Object doesn't support this property or method".
someone know the possible cause of the problem? o maybe someone know a list of IE's unsupported property or method?
In IE8 you can get the line number of the error, then right-click -> view source. IE8 has a proper source, which includes script lines, so you should quickly be able to find the source of your error.
If the script you're using isn't obfuscated or all on one line, you could use the JavaScript debugger in IE8 to pinpoint the object which is causing the error. Press F12 to open the Developer Tools, go to the Script tab, and click the "Start Debugging" option. If there's an error it may well break on the relevant line. If not you can set some breakpoints and step through the code.
You can also use IE8 developer tools http://blogs.msdn.com/ie/archive/2008/09/03/developer-tools-in-internet-explorer-8-beta-2.aspx to debug.
For other version I suggest you use Web developer tool bar which is similar to web developer tool bar for firefox.
Its near impossible to tell what the problem is with this information (at least for me).
For IE6/7 I suggest adding a few alerts to the javascript in intervals to find out exactly what line of code is causing your problem. If you know which object is causing the error, it is usually quite simple to find out what the exact problem is.
IE8 provides nice debugging tools, so that is a good place to start.
In my case the error was due to a $ mapping conflict.
Using jQuery instead of $ solved the issue.
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