What tools exist for tracking down IE7 javascript problems? - asp.net

I am trying to debug a large and complex webapp that makes heavy use of DIVs, AJAX, dynamic HTML and server-side code to do its job.
Under normal operation we do not have problems. However, when we put the webapp into an IFRAME, certain functions trigger a crash in IE7 that renders the browser inoperable (all CPU used).
What tools exist to help track down what could be happening? Loading the IE process into the debugger gives me all sorts of fascinating info about the registers, but I think the issue is in javascript.
We have tracked down one problem with the app already that involved incorrect reparenting of an element (something attached itself to window. instead of document.)
I wrote a test IFRAME page that dumps the innerHTML of the iframe into a textarea, so it can be compared during various states, but that only shows me static attributes, I can't tell what sort of javascript events are associated with elements or determine if a handler is firing out of turn.
IE8, Firefox, Chrome etc do not have the same behaviour.
Ideally I'd like something that would let me snapshot the DOM (or the javascript VM?) during a known good state, then "just before it happens" so we can figure out what's added / removed / missing / different. What is out there?
Update: I'm now trying to use the IE Developer Toolbar to track it down.
Update 2: The IE7 crash occurs following this AJAX code:
function Sys$UI$Control$get_element() {
/// <value domElement="true" locid="P:J#Sys.UI.Control.element"></value>
if (arguments.length !== 0) throw Error.parameterCount();
return this._element;
}
The return this._element; line is the last thing that happens before I lose IE.

IE Developer's Toolbar. Download it here (IEDevToolBarSetup.msi).
For JavaScript debugging refer this blog.

Some guy made a bundle that's called Internet Explorer Collection. It includes some 6 different IE browsers ranging from IE6 to IE8 in different builds. All those include Firebug (really, it sort of works) and Internet Explorer Developer Toolbar.
It was really helpful for me to debug IE7 issues.
see this link.

By placing 'debugger' in the javascript files in places where you'd like to start debugging you can debug the javascript in visual studio as well complete with trace, call stacks, etcetera.

The IE developer toolbar definitely helps alot. Visual Studios's debugger is also very good if you can get a machine with VS and IE7 on it.

DynaTrace is a profiling tool for IE7. However, it provides a great deal of information (including JS stacks), so it can also be very helpful for debugging.

IE 7 and IE 8 has built in debugging tools. Press F12 and you are ready to debug. Also firebug-firefox and chrome's inspect element options are useful/

Related

Browser issues : How do I check what is being sent to page (IE version 10)

I have an ASP.net website that was working fine with IE9, Mozilla, chrome but with IE 10 users have lot issues. The UI and even the functionality (like clicking on button, login/logout do not work) doesn't work well with IE10.
The IE version I have is 10.0.9200.16519.
I see few differences between the view source from IE10 and google-chrome (or even IE9) but can't understand much of it.
Where actually in the site can I check why pages sent to IE 10 browser is different from others browser or IE9?
Please suggest how can I debug further?
PS: The site works fine with IE9 and below versions of IE.
ASP.NET fails to identify IE10's user-agent string, and as a result can send back broken code. This has been discussed in various places, but probably most notably on Scott Hanselman's blog. See the post titled Bug and Fix: ASP.NET fails to detect IE10 causing _doPostBack is undefined JavaScript error or maintain FF5 scrollbar position.
check if there is any js error, use IE developer toolbar (F12) to debug script

Is there an easy way to force the user to use Internet Explorer, ideally without installing anything new?

I am working on 4 internal websites, everyone should be using IE but not everyone is.
Is there an easy way to force the user to use IE, ideally without installing anything new like JQuery?
Cheers,
Kohan
Addendum
I really shouldn't have to justify why i'm wanting to do this, but here goes.
This site is totally internal and 98% of the users do not have the rights to install a new browser... however there are a select few that do. This is fine for most of our sites, but since these sites are very old, they do not work in anything but IE. I could fix it for all browsers... but it is a better use of my time to just put a "hot-fix" in for now as it will likely all get rewritten next year. The site itself is also only used once a year. It's simply not worth the time investment in this case.
Thanks
Kohan.
If you really wanted to do this you could check the user agent of each request and if it's not IE redirect to a holding page explaining that they need to change browsers.
var userAgent = HttpContext.Current.Request.UserAgent;
Alternatively use the Request.Browser property.
if(HttpContext.Current.Request.Browser.Browser != "IE")
{
// do stuff...
}
You could find the browser type, and if its not IE, then do a Response.Redirect() to a generic "Use IE" page.
if (!(Request.Browser=="IE")){
Response.Redirect("UseIE.aspx");
}
You'll have to check the return values of Request.Browser though as I'm not certain without testing
I'll suggest something eretical: instead of fighting against Internet Explorer, force the users to use the Google Chrome Frame It's a "plugin" for Internet Explorer that make the page work as if they were in Chrome.
I'll quote from that page:
Google Chrome Frame is an open source plug-in that seamlessly brings
Google Chrome's open web technologies and speedy JavaScript engine to
Internet Explorer. With Google Chrome Frame, you can:
Start using open
web technologies - like the HTML5 canvas tag - right away, even
technologies that aren't yet supported in Internet Explorer 6, 7, 8,
or 9.
Take advantage of JavaScript performance improvements to make
your apps faster and more responsive.
Now your users can have IE 6.0 to work with their obsolete internal web applications AND you can work against a "unified" (you are programming only against Chrome) "modern" web browser.

css fix for chrome, and other web browsers

I am looking for a fix for styling a webpage that so that a webpage on google chrome, will look the same as it does on firefox, meaning, is there some syntax in css to make all of the web browsers look the same. does this exist (I would also like one for I.E., and any other web browser if it exists if it exists)
Google Chrome uses a different rendering engine than Internet Explorer/Firefox, so may display web pages differently. Apple Safari uses the same rendering engine as Google Chrome (WebKit) and should display pages the same way.
If your site isn't rendering properly in any browser, make sure your HTML and CSS are valid by testing them at http://validator.w3.org/.
If your site doesn't render properly in Google Chrome or Apple Safari, file a bug at webkit.org as described at http://webkit.org/quality/reporting.html.
If your site renders properly in Apple Safari but not in Google Chrome, please file a bug against Google Chrome at http://code.google.com/p/chromium/issues/list.
How can I test my website in Google Chrome?
There are several tools to help you test your website in Google Chrome:
Web Inspector
Right-click on any component on a web page to launch the web inspector. You'll be able to see the elements and resources associated with the component on which you clicked, including a hierarchy view of the DOM and a JavaScript console.
Task Manager
Select the Page menu icon, then Developer > Task Manager (or press Shift+Esc). The task manager shows all running Google Chrome processes, and the resources that they're using (memory, CPU, and network).
JavaScript Debugger
Select the Page menu icon, then Developer > Debug JavaScript. This launches a JavaScript debugger that can be used to attach to existing processes.
I found the Answer. Being that I am using drupal, there is a built in IE fix for the theme that I am using (fusion) that creates separate css files (ie7.css, ie8.css, etc). using these, I can adjust what I need for IE specifically.
Most layout problems with decent browsers are cause by invalid HTML, invalid CSS, or misunderstanding what a particular piece of CSS is actually supposed to do.
In general, when I see a difference between FF and Chrome, it is because Chrome is doing the proper thing and FF just happens to be rendering some invalid CSS fine. 99% of the time, I can fix the CSS and get FF and Chrome to render the same.
The remaining times, I typically browser sniff and use jQuery to fix the problem.

Why does the following flash not initially load in firefox, but works in chrome and IE

The following flash does not initially load in firefox, but if I click the second tab on the right, and then go back to the first, it loads. This works in Chrome and IE. Here is the webpage.
This is odd, normally things dont work in IE but do in Chrome and Firefox. Upgrade your Flash Player is my advice
Have you ruled out the possibility of it being a browser problem and not related to the site?
Does Firefox do this for any other sites?
Try clearing you cache and upgrading your Flash plugin to rule out the browser.
At a guess, a timing issue. Flash doesn't keep a network stack, it merely passes network calls to the browser, so any kind of logic that is sensitive to the timing or order of loads, load events, etc., can function differently from browser to browser.
But it's impossible to say more without seeing some code.

PopUp window in IE 6 SSL

I have a weird issue. I am opening a popup window in IE6 with SSL enabled on the server.
When the following executes it seems to lock the browser up. I know this is vague. This is the JScript that appears to be the problem. Gotta love your IE6!
function PopoffWindow(url) {
var features = "height=400,width=550,top=60,left=100,"
+ "toolbar=no,location=no,menubar=no,status=no,"
+ "scrollbars=yes,resizable=yes";
var win = window.open(url, "DSRocks", features);
win.focus();
return win;
}
This is not a problem in IE7 or Firefox. And the problem seems to be isolated to this server (with SSL). Anyone have any insight on this?
Thanks,
Nick
Is it possible that the window.open call does not return quickly enough to allow you to perform a .focus() on it, in the next line?
What happens if you throw an alert() between those two lines?
have you tried assign the window a name? IE6 sometimes does funny things when you open an unnamed window. just add a "windowName", before the url
With a problem like this, it is usually best to get back to basics. A few things to check:
How are you testing IE6? Are you using the Microsoft Internet Explorer Application Compatibility VPC Image or some workstation install where you've managed to get IE6 and IE7 working on the same PC? Having both IE6 and IE7 on the same PC may appear to work, but lead to issues like you are seeing. Even if you are using an existing VPC Image, you may want to download (or extract from an existing download) a fresh copy and see if it happens on that copy of IE6.
Have you cleared the Temporary Internet Files, Cookies and History of the IE6 install? I know it sounds obvious and stupid, but perhaps a resource that is being loaded in the PopUp window is corrupt in cache, causing the problem.
Have you disabled every Add-on in IE6?
I think the first thing to determine is whether the problem is with every copy of IE6, or just your copy of IE6 (covered by the first bullet point).
Grant,
Thanks. But the problem is with all IE6 instances that are viewing the hosted site. I will try to add an alert before the focus() to see if this is the issue. As for the windowname.. that is the second parameter I am passing, "DSRocks".
The problem was with a JSON webservice call. Please see this link for details:
http://codeclimber.net.nz/archive/2006/12/22/How-to-enable-an-ASP.NET-WebService-to-listen-to-HTTP.aspx

Resources