Firebug Lite on Chrome causes Footer Issue, is there a fix?

Question

I'm a Chrome user and would be lost without Firebug, but one issue has always annoyed me. Namely, the fact that the Firebug console doesn't appear below the site you're viewing (ie the way it behaves in Firefox). Instead, the console sits above the site, obscuring the footer and content. It's a little thing but annoying all the same.

I understand that this is because of the way Google restricts Chrome extensions but is there a way around this particular issue?

Answer 1

I haven't found a solution anywhere. So, with some help from other stack overflow threads, I came up with a very simple function and as I couldn't find much about this, I thought I'd post it here for anyone with the issue.

I'm not a JavaScript programmer, but I do use jQuery. As such, I run this inside jQuery's ready method. Once the site has loaded, it'll check to see if Fire bug is open, if so, it simply adds a 400px bottom margin to the body. Obviously, if your console is bigger/small than that, just change the size inside the jQuery code.

It won't however change anything if you open the site and then open Firebug. It's nothing major, just open Firebug then refresh the page an it'll work.

// add body margin if firebug is open
if (console.log.toString().indexOf('apply') != -1 && navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    $('body').css('margin-bottom', '400px');
}

Hopefully this will be of use to somebody.

EDIT:

WARNING: This can possibly cause your jQuery to stop working in Internet Explorer. So, just remove this if you find that your jQuery doesn't work.

Answer 2

Instead of modifying your webpage's CSS code which may have adverse effects, you should just detach Firebug Lite in Chrome, then position that popup window under the resized Chrome browser window.

To perform this, just press the center button in the Firebug Lite window located at the top right corner.

Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image

This way, you'll have two separate areas that don't overlap yet play nicely together.

---

Per Stan's comment above... about what does Firebug Lite provide extra when compared to native Chrome's Developer Tools, I would have to say it provides familiarity and a great DOM Tab that Chrome lacks.

More importantly thought, you can actually use BOTH consoles at the same time.

This allows easier monitoring of two different panes and with a multi-monitor setup this can be a useful scenario. Even with a large monitor things look good.

Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image