Friday 4 September 2009

Useful Bookmarks to overcome IE 8 / Firebug

Two useful bookmarks to aid web development

Over the last month I have been moaning a lot about IE 8 and Firebug and have started working without these two developer tools that have had started causing me problems such as:

-Very slow load times on certain sites or pages (IE 8 dev toolbar / Firebug)
-Hanging of the browser and maxing out CPU (50% on a dual core) (IE 8 / Firebug)
-Errors related to other scripts or add-ons (Firebug)

I have just found another issue to add to the list which is that when Firebug is enabled my Google Adverts are not loading on the following site: www.hattrickheaven.com with the following errors being reported (copied from firebugs console)

cannot access optimized closure

gadgets is undefined

IG_EmbedCachedFlash is not a function

Which are coming from a file that is referenced by Googles Adsense http://ads.gmodules.com/gadgets/ifr.

I do know that there have been bugs in Googles Adsense code latley as I regularly get errors from ads.modules.com/gadgets/ifr. There were some errors the other day that prevented adverts from showing as well as any content loaded through Googles AJAX API in IE. If I view the same page in IE I do get a Invalid argument error (line 603, char 7) however the google adsense advert loads correctly.

However if I disable Firebug the adverts appear correctly in Firefox so I can only assume its a clash between Firebug and Googles code just like the error I reported the other month with the highlighter code I use on my blog.

The problems with both of these add-ons has meant that I have disabled both the IE developer toolbar and Firebug from appearing automatically on all pages. With Firebug I know that if I need it I can turn it on with ease and deal with the errors knowing that they are most likely caused by the tool itself rather than any other script. However with IE's developer toolbar its not so easy due to it causing my PC to hang the majority of the time its used.

I have found that going to Control Panel > Internet Options > Advanced > Reset does resolve the issue for a while until the problems slowly build up again over time and the browser with the developer toolbar becomes unusable.

Until IE resolve this issue I have resorted to using the following two bookmarklets to accomplish the two main tasks I use the developer toolbar and Firebug for.

The first is a bookmarklet that allows me to view the generated source code for a particular page:

javascript:(function()%7b%20function%20htmlEscape(s)%7bs=s.replace(/&/g,'&');s=s.replace(/%3e/g,'>');s=s.replace(/%3c/g,'<');return%20s;%7d%20x=window.open();%20x.document.write('%3cpre%3e'%20+%20htmlEscape('%3chtml%3e\n'%20+%20document.documentElement.innerHTML%20+%20'\n%3c/html%3e'));%20x.document.close();%20%7d)();
Which if you unpack it breaks down as the following code:
javascript: (function () {
function htmlEscape(s) {
s = s.replace(/&/g, '&');
s = s.replace(/>/g, '>');
s = s.replace(/</g, '&lt;');
return s;
}
x = window.open();
x.document.write('<pre>' + htmlEscape('<html>\n' + document.documentElement.innerHTML + '\n</html>'));
x.document.close();
})();


And the following code which will generate a DOM inspector allowing you to highlight elements on your page and view its properties and child elements.


javascript:prefFile='';void(z=document.body.appendChild(document.createElement('script')));void(z.language='javascript');void(z.type='text/javascript');void(z.src='http://slayeroffice.com/tools/modi/v2.0/modi_v2.0.js');void(z.id='modi');

You can get these and other bookmarklets from the following site which is tailored for adding missing functionality to Google Chrome: http://www.nogeekyname.com/blog/google-chrome/extensions-for-google-chrome-bookmarklet-for-chrome/

No comments: