How do I dock the Browser Console window in Firefox?
The Browser Console currently opens in a separate window. I'd prefer for it to be docked to the bottom of the main window.
There's a similar question for Firebug.
There is no stock way to dock the Browser Console to a specific window. The Browser Console is for the entirety of the Firefox browser. What it shows is not limited to a single window. Thus, from a user interface point of view, it does not make sense to have it be docked to a single window.
It might be possible to create an add-on which opens an equivalent page that is in a bottom bar.
The best I could do was manually to dock Browser Console window and Firefox window in my desktop environment (Gnome on Fedora) so that they are both visible when debugging.
I don't know of any way with the built-in console. However, the 'Web Developer Extension' add-on console has toggles to dock to a window, but also several additional useful layouts.
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.
Safari's dock icon includes right-click commands for "New Window" and "New Private Window" -- see screenshot.
Since Mozilla rather negligently left these shortcuts off of the Firefox dock icon, is there any way (i.e., via AppleScript?) to add the same commands to Firefox's icon in the dock?
Edit: It has come to my attention that, currently, both Firefox and Safari act identically in this matter. If either application is open, the "New Window" and "New Private Window" commands appear in its dock icon's context menu. When either Safari or Firefox is closed, no such commands can be seen. This may be an across-the-board restriction in macOS regarding what commands may be seen when Command-Clicking on pinned icons in the dock for applications that are not running. If so, it's a pity; in Windows, if Firefox is pinned to the taskbar, these commands are always available via right-clicking whether Firefox is open or closed.
Not without modifying the Firefox application itself. (Good luck… it's a scary place in there.)
Dock menu items have to be created from native code running within an application. They can't be set by another process.
Applescript can do some interesting things in general, but it can only interact with existing functionality of an application (and even then, only with functionality that's explicitly been made scriptable). It can't add completely new features to an existing application.
When I am debugging frontend work, I frequently have multiple Inspector windows open at the same time, each inspecting a different page. As I change Inspector windows, I would like the displayed tab or window to follow me. In other words, I would like the browser to always automatically change to the page I am inspecting; I do not want to change Inspector windows, then go to the browser and find the corresponding tab or window myself.
Is this possible in Firefox? Is it possible in any browser?
(I realize I could dock the Inspector to each tab or window. I do not want to do that because I use the multiple Inspector windows side-by-side for comparison.)
While I am not aware of any way to switch to the target browser tab when selecting a given inspector window, you can certainly do it the other way around:
Say you have 3 tabs opened, and you have opened devtools for each them, in window-mode (undocked). Now, whenever you select any of these 3 tabs, if you just hit F12 (or ctrl+shift+I/cmd+alt+I), then the corresponding devtools window will be brought to the front.
That's an easy way to keep track of which devtools window is linked to which browser tab.
Now, doing this the other way around would require a new feature to be implemented. This can't really be automatic (or at least hidden behind a config of some sorts) because it could be considered frustrating to some users, having their current tab being switched away from each time they click in a devtools window.
I have filed this bug to get it done: https://bugzilla.mozilla.org/show_bug.cgi?id=1163646
When I restart firefox using the developer console, i press shift+F2 and then I write
restart
in the command line that comes up at the bottom and press ENTER.
This is of course a very useful feature, every window dissapears and comes back, but each restarted window will also have the developer console opened as if I was pressing shift+F2 on everyone of them.
Why?
The Developer Toolbar is a global thing, just like any other toolbar (e.g. Nav Bar or Bookmarks Bar). Firefox will remember the visiblity state and will restore it when opening new windows, either the usual way, or after a restart.
Just close the toolbar in one window, and it will be closed in every other window as well.
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