Friday, 3 June 2011

SOLVED: Firebug Inspect Element Keyboard Shortcut Clash

If you want to use the Ctrl-Shift-C shortcut to Inspect Element in Firebug but you also have the Web Developer plugin installed then read on to to find out how to stop them clashing!

Background

Its been a long running thought in the back of my mind that I must be wasting time having to press F12, then click the inspect button to use the invaluable Inspect Element feature of the Firebug toolbar. I remember having a casual look in the past for a keyboard shortcut and finding none.

I have always assumed that there wasn't one for it and thought it strange that it had never occurred to the developers to implement this feature.

I don't know how I missed this for so long but today as the auto-updater installed the latest version I had a poke around in the release notes and still not seeing a shortcut I made a mental note to pursue this later.

And lo and behold I found the elusive inspect element keyboard shortcut, pressed those holy keys that were destined to save my so much time and immediately hit by a keyboard shortcut clash between the Firebug and Web Developer plugins.

I turned to Google first and found nothing reporting this. I assume that is how you have arrived here today and you are expecting the solution which is forthcoming!

Problem

The problem is that when you have Firebug by Mozilla Corporation and Web Developer by Chris Pederick installed they both hog the Ctrl-Shift-C keyboard shortcut. Web Developer wins which breaks functionality in the Firebug plugin.

Solution

Now Web Developer toolbar has some amazing features and I rely on both of these plugins daily to do my job but the View CSS one is not an important feature for me. I voted to remove the keyboard shortcut all together giving free reign to the Firebug plugin to handle the Ctrl-Shift-C combination.

  1. Click the Options button in the Web Developer toolbar.
  2. Click Options…
  3. Click the Keys entry from the list down the left hand side
  4. Delete the letter C from the View CSS box leaving it blank
  5. Restart Firefox
  6. Press Ctrl-Shift-C and bask in the glory of your Firebug Inspect Element feature being initiated.

You also have the option of assigning it a different keyboard shortcut in step 4. As I never use this feature I didn't think it was worth potentially creating another shortcut clash so I just disabled it. If you do ever want to use this feature you just click the CSS toolbar item and then choose View CSS…

Summary

This may be obvious to a lot of readers and but then if you read this far then perhaps not. Either way this is a simple fix to the problem and I am very much looking forward to Ctrl-Shift-C becoming a staple of my daily diet.

kick it Shout it

No comments:


-->