Debugging Javascript in IE
I just found a great post on how to debug Javascript in IE.
One of the commenters over at Bernie’s blog had a problem with the debugging session opening Firefox per default, he claimed he solved that by right clicking the project in the Solution Explorer and choosing Browse With…
Wouldn’t work for me with the version of Visual Web Developer that I’m using, it would simply browse normally without debugging when I chose IE as the browser.
However, I noticed I had the option of setting IE as the default browser in the very same browse with window, doing so and then going Debug -> Start Debugging took care of my problems.
The Debugging
First of all I had to remove all jQuery stuff and replace it with Prototype equivalents, it doesn’t matter what they say on the jQuery homepage, jQuery and Prototype will not play nicely with each other whatever you do, period.
The following will work in Firefox:
$('div_id').writeAttribute({class: 'new_class_name'});But not in IE7, you need a string as key instead:
$('div_id').writeAttribute({'class': 'new_class_name'});Never ever load Prototype after Scriptaculous, in this case I’m using the Symfony framework which loaded Prototype again a second time after the whole lightwindow stack was already loaded, that just completely screwed up everything and I had to spend 3 hours searching before I finally realized by trial and error what caused the problems.
Apparently ‘click‘ is not happening in IE, we need ‘mousedown‘ to capture the event correctly, here is the code in question:
Event.observe(child(newEl, '.dragger'), 'mousedown', function(event){
var toSelect = $(this.getOffsetParent());
selectCur(toSelect, sub_class);
sub_class == "txt_area_start" ? toggleRight('textMenu') : toggleRight('imageMenu');;
});Furthermore, the border style is handled differently, when fetched IE will return a string lacking the word ‘none’ in case we don’t have a border, Firefox will have it, this is how I ended up handling the differences:
var cBorder = cEl.getStyle('border');
if(cBorder.search(/none/) != -1 || (Prototype.Browser.IE && cBorder.match(/px$/))){
alert(cBorder);
cEl.setStyle({'border': ''});
cEl.writeAttribute({'class': 'default_border'});
}So the first one is easy, do we have none somewhere? If not we check if we have IE, if we have IE we we also check for px at the end of the string, if we would have had something else than none, say thin instead, it would’ve been there instead of the px.
The following works in Firefox:
window.open(url, "Paceville Gallery", "width=990,height=800,menubar=no,toolbar=no,titlebar=no,location=no,directories=no");But not in IE, then you can’t have a space in the window name, it has to look like this:
window.open(url, "PacevilleGallery", "width=990,height=800,menubar=no,toolbar=no,titlebar=no,location=no,directories=no");
Related Posts
Tags: debugging, ie, Javascript, visual web developer