25

So we have reached that stage in a web dev project where we need to see how things look in IE.

Sigh.

So the fabulous Firebug is not available for IE. But a lite version is - as a bookmarklet, and is apparently compatible with IE6+. But how the how the hell do I add a bookmarklet to IE8?

I am unable to drag and drop to the Favourites bar (is this the same as bookmarks?). I can't add it through the Favourites add option as it contains "illegal" characters.

So how do I do this? All I want to do is inspect the DOM.

Thanks

6
  • 4
    Why not use the debugger built into IE8? It's actually pretty good. Commented Jan 17, 2011 at 17:54
  • 1
    IE7 you can use the developer toolbar microsoft.com/downloads/en/… Commented Jan 17, 2011 at 17:57
  • 1
    I think it's new in IE8. But you can always run IE8 in compatibility mode. In theory it would work like IE7. Commented Jan 17, 2011 at 17:58
  • 2
    I wouldn't recommend the developer toolbar in IE8. It never worked well for me. Firebug is updated regularly and allows you to edit settings quickly and intuitively. The built in toolbar is very different and kludgy and has never been updated. Did I mention it never worked well for me. It never did. I work on the front end A LOT. Commented Nov 5, 2013 at 15:38
  • 1
    The link for a visual step by step: youtu.be/vLJ2RaNZ22E Commented Jan 6, 2014 at 9:39

2 Answers 2

36

this is how I did it (IE 8.0.7600.16385 on Win7):

  • Go to some Firebug Lite page (http://getfirebug.com/firebuglite).
  • Click the "add to Favorites Bar" button on the Favorites Bar.
  • This will give you a bookmark to http://getfirebug.com/firebuglite.
  • click on the "Firebug Lite" link in Firebug Lite page (http://getfirebug.com/firebuglite).
    • properties poup will be open. Copy the URL within the popup
    • Right click on your new bookmark and choose Properties.
  • Paste the URL into the URL box and close.
  • If you hover over the new bookmark, it should show javascript:(function(F,i,r,e,b,u,g,L,I,T,E)... etc instead of the link.
Sign up to request clarification or add additional context in comments.

4 Comments

this also has the nice side effect of attaching the firebug faveicon to the bookmark
note that there is a bug with Firebug lite 1.4 on IE8: stackoverflow.com/questions/7532909/…
To question editor: you cannot simply paste the code for Firebug lite into an answer here due the license: github.com/firebug/firebug/blob/master/extension/license.txt
If you have trouble getting the source from the firebug site, this question has the source with the required license included: stackoverflow.com/questions/6203640/…
2

Please use this in your jsp

<script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script> 

and you are done.

1 Comment

Thank you, this was what I was looking for. The website shows firebug-lite.js.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.