Debugging Internet Explorer crashes - javascript

I am not interested in some program that I have to pay for, but I really need a way to debug my website in Internet Explorer.
The url is http://www.tombarrasso.com/final/
The issue with IE's built in debugger is that my webpage crashes IE if you open three scrollers and click the right arrow. In Safari and Firefox all is well, not terribly fast but not terribly slow. But IE completely freezes and crashes, which ruins my chance of using the built in profiler. It is getting to the point I am about to put a message for all IE users telling them to go elsewhere, but I would like to get the site to work because everything else even works in IE6 (crazy).

Try Firebug Lite
And on a side note I would recommend changing your color scheme, it isn't easy on the eyes. Here is another resource that could help you with that. Color Scheme Designer

Related

Is the Chrome mobile emulator broken?

It is either broken, or I don't really fully understand it. I have a Lumia 625 which has a 480x800 resolution. This is a screenshot from the Chrome Emulator with device set to 'Responsive' and res to 480x800:
I did attempt multiple refreshes, as I know it's sometimes bugged if not refreshed, however still the same result. Then I exited the emulator, and manually resized my browser window to 480x800 (Chrome shows the widthxheight when you resize) and it looks like this:
And finally, commited and published my website and tried it on my phone:
Now I have to say it's not pure HTML&CSS as I do use jQuery to style my page, but this really bugs me, as it seems to show very inconsistent results. How can I make sure the result I see is the one I'll see on the actual device? Also, if this is a known problem, I'd be very thankful to know if there's any other good emulator for mobiles/tablets out there? I really do love Chrome, but this emulator thing is just not doing it for me. :/

Internet Explorer 9 appearance conflict

I have been researching all over the internet about this, and unfortunately cannot find out why this is happening. It seems to only be happening in internet explorer 9, on certain computers.
The entire page looks like a mess only in IE 9 (some computers):
The URL of the website is Here
Can anyone tell me why this is happening in IE9?
(NOTE: Compatibility view cleans it, but then the Js/jQuery doesn't work right).
For some reason, IE thought that the site was in my intranet, and rendered it in Compatibility Mode (there's a setting in IE to automatically render intranet sites in CM).
When I unchecked the box to "automatically detect intranet network", the site rendered correctly.
So your real question is how does IE determine the intranet network, and how can you force your page to NOT render in Compatibility Mode... something like this.
I noticed that you have blank space above your doctype. IE hates this. The doctype needs to be the very first thing in the file.
You also have over 2300 HTML validation errors that should be investigated and rectified. Again, IE is very sensitive to invalid HTML.
Going on a whim here, but I think it's the usage of inline-block. I don't have IE9 installed to a point where I can use it's developer console to further inspect, but IE is known to be very bad about displaying inline-block elements.
In Google Chrome's console, I am able to replicate the same appearance using float:left as opposed to display:inline-block, so that should solve that piece of the issue.
Edit: The only syntax issue I see with the HTML is the placement of the </head> tag, which is not adjacent to the <body> tag.
Edit 2: As far as the outlining issue goes, try using this answer to another question.
Edited yet again to fix the display of the tags.

Weird flickering bug in the latest version of Chrome browser

After updating Google Chrome browser to the latest 15.0.874.106 version (under Windows 7), my site is experiencing some weird flickering bug.
The text shadows are displaying completely wrong, the text itself is fuzzy and unclear, some parts of code don't work anymore (e.g. right floating, fixed menu)... etc.
For a couple of seconds the site is displayed fine, then it flickers all of the sudden (while still loading) and then the rendering gets messed up. (I think it has maybe some problems with loading of Google Maps v3)
The funny thing is that the old version of Chrome (before updating, on my other computer) is still displaying the site without any problems, and there haven't been any changes in the code in the meanwhile.
In other browsers (as i said, even in the old chrome) everything is OK. Firebug and Chrome's code inspector (CTRL+SHIFT+J) don't show any errors in the code. I have been doing some digging on the Internet and here as well, and I havent't found anything useful.
You can check it out by yourself by clicking here
Thanks in advance.
I have done same settings changes as mentioned above post and now, that weird flicker got stopped, below are the details....
Open Chrome Browser
Click on Settings menu option
Click on Advance setting link in Settings page
Un-Check "Use Hardware acceleration when available" checkbox
Restart you chrome browser
Happy Browsing....... :)
Also make sure to disable not only accelerated-compositing, but also accelerated-2d-canvas.
This is how I start google-chrome on Linux:
/opt/google/chrome/google-chrome %U --user-data-dir=/root --disable-accelerated-compositing --disable-accelerated-2d-canvas
On Windows, you might want to omit
--user-data-dir=/root
Josip Filipović apology where to do that (in Win7 by entering -disable-accelerated-compositing in properties > target field) that part disables hardware acceleration.

'Firebug' for iPad

I have a site that uses javascript to launch a css overlay of a google map (see [link deleted because I can only have one at a time] and click the 'Enlarge' button under the map).
This doesn't work on the ipad. I believe it has something to do with this not being a link, but using the jquery live('click',.. approach. I need to fix this but I'm new to using the ipad and I don't even know how to step through the javascript to see what the problem is.
What kind of development tools are available for testing on the ipad?
Edit: My mistake. The link above works fine in the iPad - no problem bringing up the larger map. However the sister site http://lowes-realty.com/Stateline-Plaza_Enfield_CT-11.aspx is not working. What I need is a development system that will let me look at them both on the ipad (I really want to avoid emulating or spoofing).
Have you tried firebug lite?
http://getfirebug.com/firebuglite#Install
Have you tested this in google chrome? As google chrome is a webkit browser, you may be able to do the majority of your debugging in chrome, and iron out smaller issues on the iPad itself.
Edit:
Removed unnecessary comment about iPad.
The problem ended up being that I had a javascript error that aborted the script before I ever got to the jQuery code. Once I fixed that, I was able to use jQuery without making any special modifications for the ipad - awesome! I did not have to do anything with the swipe or tap events (sweet!).
However I was not able to get any kind of javascript debugger; I had to work this one out for myself. As of Nov '09 firebug lite crashed the ipad for me and there don't seem to be any developer tools build for testing the ipad. I tried several sites that claimed to perform the same way the ipad does in your browser and not one of them held water.
I have no reason to believe that there is a good option for debugging a site on an ipad (yet).
Edit A Year Later... I'm still looking for a good way to develop on an iPad. I just got Adobe Shadow up and running - it's not actually a useful tool, but there is potential (http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow). Right now (3-29-12) the code inspector is essentially non-functional (cannot view inherited styles, can't view elements without expanding the DOM from the body element, no javascript debugging, and much more).
I know that sounds hopeless, but it has one thing going for it that nothing else I'm aware of does: Shadow works with all existing mobile devices and its code inspector is independent of device and browser. So although the inspector sucks spectacularly right now, once they build some functionality into it Shadow could be a good solution. From their site:
Shadow will be updated regularly to stay ahead of web standards, web
browser updates and support for new mobile devices entering the
market, while incorporating user feedback to provide the best
functionality and experience possible.
~ http://labs.adobe.com/technologies/shadow/
I think the problem is that on the iPhone / iPad there are no clicks events generated but instead touch events (swipe, tap).
You can use something like jQTouch (you can start reading here Getting started and then proceed to callback events hint: tap==click).
If you have more to adapt you can also look at (and wait for a stable release) of jQuery Mobile
weinre lets you remotely attach a WebKit inspector (the built-in Dev Tools you use on desktop browsers) to a page running on your mobile device (iPad/iPhone/iPod/Android/BlackBerry 6/webOS) over WiFi.
http://phonegap.github.com/weinre/images/weinre-demo.jpg
JavaScript debugging is limited to console.logs, but it's better than nothing.
If you have an ICS device, Chrome Mobile lets you remotely attach a full-featured Inspector (with full JS debugging/breakpoints) over USB. I've been thoroughly thrilled using this tool with my Galaxy Nexus.
(source: google.com)

SlideShare Does not Load on Internet Explorer 8

I have made a simple embed of slideshare on my site. However, on Internet Explorer, it keeps saying "Loading" and nothing appears. However, in Firefox its almost instant. Please try here using internet explorer.
Or is it just me? It makes use of Flash and Javascript.
What can the problem be?
Thanks all for any hellp
This page works fine in IE9 at least, and the content you say is broken was written in Flash. You might want to watch your HTTP traffic using Fiddler (www.fiddler2.com) and check for script errors using IE's developer tools (hit F12).
I've check it in Chrome, Firefox, IE6/7/8 and they all seem fine. I haven't checked it in Opera or Safari though.

Categories