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.