Debugging a site for IE9 (jquery isotope) - javascript

I'm asking if someone could help me debug a site for IE9. The site uses jquery isotope to filter some list elements. Although it uses combination filters, it's nothing too complicated and it works in all browsers I tested, even IE. But it does not work in my clients' browser, which is IE9 and under the advanced internet options "deactivate script debugging" is checked, so the IE debugger doesn't run on default.
Ok, now my concrete questions:
Is there really some script error I didn't find yet or is it some special IE9 bug which is why script debugging should always be active?
There are no errors that have anything to do with isotope, but there still seems to be a problem with #font-face – could this cause the whole site to stop working?
Here's the link: http://www.goethe.de/ins/gr/lp/prj/lef/lre/deindex.htm
Problem: Using the filter dropdowns doesn't work in IE9 when built-in script debugging is not active. Also the developer console has to be closed, because when opening the console, script debugging get's activated. That's why for me it's impossible to reproduce the error, because I have IE11 installed and the only way to emulate IE9 is using the console. But I tested and got the error on several PCs from my client.
Any help would be highly appreciated!
-- Alani

You are blowing up on calls to console.log which IE does not support unless dev tools are open!.
As a quick hack/fix add this to your JS:
if (!window.console) {
window.console = {log: function() {}};
}
This should put a dummy console.log method in place to avoid the crash. Alternatively just don't call it!

Related

IE9: Script only works in debugger, but not when NOT debugging

I have some trouble with Internet Explorer's compatibility. I'm building an online tool with massive usage of HTML5 canvas, CSS3 and JavaScript. The program works fine in all major browsers, except for Internet Explorer.
IE9 switched into compatibility mode, so I set
<meta http-equiv="x-ua-compatible" content="IE=9"/>
to force IE to process the page with IE9 standards. IE does no longer fall into compatibility mode, but the script does still not work properly. Some basic functionality as drawing or dragging objects works, but only "half".
What does a programmer do in this case: He starts the debugger. And that's where the magic happens. As soon as I start the IE9 developer tools (with IE9 browser and document mode as well), the script works properly. But how should I debug a script which works fine under debugging conditions, and has errors when not debugging.
Currently, I have no clue what to do. Maybe someone can give me a hint? Thanks a lot!
IE9 doesn't like console calls, and without showing us any code we can only guess what the issue is. You can either remove any console.log messages or use this snippet before any code is called:
(!window.console) console = {log: function() {}};

Not hitting javascript breakpoints

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).

how to debug javascript errors on IE8

I am getting an error, when running a webpage on IE8. When I click on the error found, it says:
How can I go to this line to see where the error is happening?
I can't see this error on any other browser.
Also, it says:
line 109213803.
I don't understand this, as obviously I don't have so many lines of code.
Can someone explain what IE8 is telling me here?
Make sure script debugging is not disabled for IE, otherwise it should allow you to debug the script directly:
IE8 has a default built-in IE Developer tool, you can use that to debug that. Hit F12 it will open the Dev Toolbar then click the Script Tab and Start Debugging, then refresh your page. That's it!
Try using the Developer tools found under the tools menu. There is a script tab that will allow you to debug. You can also get there by hitting the F12 key.
In case you want to hide all js errors in IE the use this code
window.onerror = function(){return true;}
You may want to try using the Javascript Debugger that is built in to IE8. You can access it by going to Tools > Developer Tools and click script and start to debug.
To see more, check this out.
Microsoft has also made available a free toolkit called Visual Web Developer Express that's a pretty comprehensive IDE for web development.

Debugging JavaScript in IE7

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

Cross-browser JavaScript debugging

I have a few scripts on a site I recently started maintaining. I get those Object Not Found errors in IE6 (which Firefox fails to report in its Error Console?). What's the best way to debug these- any good cross-browser-compatible IDEs, or javascript debugging libraries of some sort?
There's no cross-browser JS debugger that I know of (because most browsers use different JS engines).
For firefox, I'd definitely recommend firebug (http://www.getfirebug.com)
For IE, the best I've found is Microsoft Script Debugger (http://www.microsoft.com/downloads/details.aspx?familyid=2f465be0-94fd-4569-b3c4-dffdf19ccd99&displaylang=en). If you have Office installed, you may also have Microsoft Script Editor installed. To use either of these, you need to turn on script debugging in IE. (uncheck Tools -> Internet Options -> Advanced -> Disable Script debugging).
You could also use Firebug Lite - which will work in IE & Opera. It's an external lib that will help you track down problems. It's sometimes more convenient than dealing with the MS Script Debugger.
Firebug
It's only for firefox but it should let you figure out what's happening on IE especially once you have the script line numbers.
You can use Visual Studio and enable debugging in browser
You can install FireBug plugin for Firefox, it's really good!
You can try to install IE8 beta 2 and use it in compatibility mode with built-in debugger.
Also in any line of your JS code you can write
debugger;
and this will be threated as breakpoint for any of the debug tools you use.
Cheers!
Aptana Studio provides JavaScript debugging for Firefox and IE
Firebug is the best all around client-side debugger. I frequently use it to debug CSS code as well as javascript. It allows you to easily find offending areas of code. I especially like the ability to modify tag attributes in the firebug pane and see the effects immediately before committing. Very useful for anyone designing websites.
You could use this tool apparently - Microsoft Script Debugger
Personally I try to go through the code and figure out what's going on - it gives you the line number where it goes wrong right?
To make the Microsoft Script Debugger more user friendly (and to add javascript error messages that actually are helpful to IE), I highly recommend Companion.JS.
Firebug seems to be the most useful so far. When a page is running on firebug, it can be very handy to log messages into firebug via javascript calls to console.log('your log message'); but don't execute that code in IE since the console object is only in scope when firebug is running.
For IE, other folks have mentioned the Script Debugger. Although it is not primarily for javascript debugging, it can be useful to also add the IE developer toolbar, which allows you to easily and dynamically inspect the style and other properties of your page's DOM.
In response to mopoke, for IE6 you definitely want to use Visual Studio for debugging if you can get it. For all intents and purposes, the MS script debugger is useless. You're better off using some form of tracing (not alerts) than using the MS script debugger. Dojo Toolkit, for instance, provides a debug console for tracing, but you can write your own by dumping messages to a secondary window or div.
The script debugger needlessly prompts you on each error in IE6 and even then doesn't give you enough state context to make it useful in a sufficiently complex JS app. Visual Studio is more tightly integrated and much friendlier. Just my experience.

Categories

Resources