How to dock Firebug in browser window after I opened in a new window? With Firefox 3.0.8 and Firebug 1.3 on Mac OS X 10.5 I can't get it docked in the browser window back. :(
How to fix the problem
Background: firefox 10.0.10
Steps:
Close Firebug if you have it open -> Go to Firefox menu -> select the "Web developer" option -> select "Firebug" from all the options listed -> Select "Firebug UI location" from all the options -> Choose Top, Button, Left or Right depending on your preference.
This should fix your problem. The "Firebug UI location" in the detached Firebug window doesn't work.
Normally you just close the window. When you open Firebug again, it will be docked.
While I was trying to figure this out, I clicked on the bug in the top left corner, while Firebug was open and docked, and selected "Always Open In New Window." Then I had the same problem.
To disable that option while Firebug is open as a Window, select View (in the OS X menu at the top of the screen while the Firebug window is in the foreground) > Options > Always Open In New Window.
Click on the Firebug icon , Choose Firebug UI Location and then choose bottom , it worked for me
I had the same problem. Resolved by following this:
Right click firebug icon in status bar. Select "On for all web pages"
I Couldn’t dock the firebug window back to the Browser-window. Neither via buttons, nor via menu.
Reseting the firebug-settings solved the problem for me. Luckily, I didn’t changed them ever.
Just close the firebug window and click the firebug icon again. It will once again be "docked".
None of these solutions worked for me. Somehow, one of my firebug settings was being stored in my Firefox profile, and I couldn't figure out how to revert it. So, I took the nuclear option and deleted and then recreated my Firebug profile, following these instructions from Mozilla: http://kb.mozillazine.org/Profile_Manager#Creating_a_new_profile
WARNING: This should only be a last resort, as it will remove all of your previous saved settings, add-ons etc. This was not a big deal for me, because I use Chrome as my default browser and only user Firefox for debugging websites using Firebug. But for others, I suspect this might be throwing the baby out with the bathwater, so just wanted to make it clear that there are tradeoffs.
You can click on the small superimposed double rectangle icon on the far right of the firebug window, and dock and undock the firebug widget.
You can click on the small superimposed double rectangle icon on the far right of the firebug window, and dock and undock the firebug widget.
It worked for me in Windows
Related
According to Google this can be accomplished by visiting "chrome-devtools://devtools/devtools.html" in Chrome but now visiting that page in the stable version of Chrome (or Canary), just shows a 99% stripped version of the inspector.
To reiterate my "title" this is in reference to "inspecting" the inspector. Not just inspecting a normal webpage.
And while I don't think it's necessary to know to resolve the issue, I"m inspecting the inspector so I can style it as discussed by Paul Irish and here: https://darcyclarke.me/articles/development/skin-your-chrome-inspector/
Follow these easy steps!
Press Command+Option+i (Ctrl+Shift+i on Windows) to open DevTools.
Make sure that the developer tools are undocked into a new window. You may have to undock from the menu:
Press Command+Option+i again on this new window.
That will open the DevTools on the DevTools.
You can redock the page's DevTools if you want.
If it's not already, select Elements — it's the first icon at the top of the inspector.
A little beyond the scope of your question, but still valid in understanding why you're experiencing your problem can be found by understanding how Chrome Developer Tools: Remote Debugging works.
Open chrome://inspect
Open the inspector on that page (cmd + alt + i)
Scroll to the bottom of the page, under the Other section click the inspect link
The URL in the Other section should look something like this:
chrome-devtools://devtools/devtools.html?docked=true&dockSide=bottom&toolbarColor=rgba(230,230,230,1…
EDIT: they've fancied up the chrome:inspect page so you have to click the Other header on the left to get this to work now.
I just got this to work. The key is that you have to start up chrome in 'Remote Debugging' mode.
on OSX, open an terminal window and execute the following:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
On windows, Its
chrome.exe --remote-debugging-port=9222
(better windows instructions can be found here: https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote)
This will start up an instance of chrome, that will send debugging messages to a local webserver on port 9222.
If you access that web service, it will give you the ability to use the inspector to inspect any chrome window that is running. Since we want to inspect the inspector, we need to start an inspector window first (As above Use the shortcut keys; for Mac it's Command+option+i.)
Now, go ahead and navigate to
http://localhost:9222
It will present you with a list of windows to display in the debugger. Select the window that starts with "Developer Tools" and you'll be able to inspect the css for the inspector.
Its hard to see in the image below, but on the left I have my chrome window pointing at the remote debugger, highlighting one of the toolbar labels. On the right you see it lit up with the tooltip just as if we were debugging a web page.
A few weeks ago somebody pointed this out in stackoverflow's "javscript" chatroom. First, and very importantly, make sure the inspector is undocked from your browser window. Then it's just a matter of opening a inspector window and then inspecting that window. In windows it's CtrlShiftI (Edit: I said, CtrlShiftI but that brings up the console inspecting the console... you should be able to navigate back and forth.) for the keyboard shortcut. (Other keyboard combos for other options and OSes here and here.) Just do that twice and you're good.
Edit: ok, you're probably confused as to undock the window. This is what you'd click if it's docked..
Edit II: I'm not quite sure why you can't inspect. JDavis's answer is consistent with the Google Docs for Apple computers. If you're using Linux it appears to be the same as Windows. You supposed to hit the inspector key combination while the focus is over the inspector window.
Clicking on the ellipsis link next to the issue, e.g.
I get a little light-bulb icon with an x
in the lower right hand side of my window. If I click on a link for duplicated code I get a similar x icon. Why is this? How do I fix this?
This turned out to be a browser problem. I refreshed Firefox and the lightbulb icon now expands to a window showing the correct information. Refreshing Firefox also fixed a persistent "Still Working..." problem where no menus, etc. were available after I installed SonarQube on a new server.
I am using the latest iOS system for Mac, and have just finished completing all the updates.
I am trying to find the Developer Menu on the Mac, but I can't see it anywhere? Some have said if you just click Safari - Preferences there should be an option there, but I don't see it.
Any help would be hugely appreciated.
Thanks in advance
Kimberley
Open the preferences, select the "Advanced" tab and check the "Show Develop menu in menu bar" checkbox at the bottom.
try to minimize the screen of safari after that next to the APPLE logo you will see that file, edit, etc... also Develop tab in menu bar
I've got Firebug open on my website, and then I click a button which opens a popup window. However, Firebug is always greyed out by default in the popup window. I can click the icon or press F12 to start it, but I really need it to start itself, immediately, because I want to watch the AJAX requests that happen on page initialization of the popup window. By the time I click or press F12 it's already too late; it's missed those requests.
How do I get Firebug to persist in my popup window?
There is an option in the Firebug menu called On For All Web Pages, which opens Firebug automatically. Though unfortunately that also doesn't allow you to track the network requests.
So this actually looks like a bug to me. You should report that in the Firebug issue tracker, so it can be fixed.
I am using Firebug with Firefox 3.6 on OSX 10.5.8. Since FF 3.6 there is a shortcut to activate fullscreen mode which is "shift" + "command" + "F". But it is the exact same shortcut of Firebug to launch "Display Element Information".
Since i never and don't really need fullscreen mode and use extensively the "Display Element Information" feature of firebug; i am trying to either change the firebug shortcut or disable the FF shortcut.
I tried finding something when accessing about:config but could not find anything relevant.
Does anybody has a solution or hack?
cheers
Change FireFox Shortcuts:
There is an extension called KeyConfig that allows you to change the keyboard shortcuts in FireFox. You can find it at the following URL:
http://forums.mozillazine.org/viewtopic.php?f=48&t=72994
Change FireBug Shortcuts*:
Open the FireBug Panel
Click the FireBug icon on the top left
Select "Customize Shortcuts"
Change the shortcuts you want then restart FireFox
*Note:
I am using FireBug 1.5
I am not sure if the option you want is in the list of shortcuts you need to change.
Hope this helps.
I think the shortcut you are referring to is actually part of the Web Developer plugin, not Firebug. Firebug has a simliar "Inspect Element" function that uses Ctrl-I.
If you don't want to install yet another plugin, just to change one shortcut, then you will have to change the Web Developer shortcut to something else.
I've tried overriding this behaviour using the OSX System Preferences, creating an Application-only shortcut to the menu item: Tools->Web Developer->CSS->View Style Information, but no dice. This plug-in, while one of the most useful that I've found, has always seemed kind of shoddy. It's rarely updated, and bugs seem to live on forever. It breaks every time FF is updated. etc etc. But I still love it.
Not sure which extension is causing this for you. Just checked Web Developer Toolbar and don't see Cmd-Shift-F anywhere.
One newer feature in Firebug is the Customize Keyboard Shortcuts preferences panel on the Firebug menu. Open Firebug, click on the Firebug bug icon menu in the top left of the panel and select Customize Keyboard Shortcuts from the menu that shows up. You'll likely need a restart for these changes to take effect.
Well, now i feel very stupid !!!!
Indeed it is a shortcut from the Web Dev Toolbar and not firebug. I used these 2 so much during a day of work that i forgot they are 2 separate add-ons.
I was able to change the shortcut via the "Options" menu of the Web Dev Toolbar.
And just in case someone changes a shortcut, remember to restart FF for the changes to take effect.
mea culpa.
But thank you every one for helping.
Case closed !