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
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.
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.
I've been trying to use FireFox as a simple window for a webpage that I will not be leaving, so I don't need the address-bar or close buttons, but I would like to keep my task bar visible (i.e. I do not want to simply go full screen). The gists of what I am trying to achieve is a "full window mode". Is there an add on that allows this? Preferably, I'd like an add on that can easily be turned on and off.
To elaborate, I may have the window only be half of the screen, so a full screen mode that leaves the task bar visible would not be sufficient.
You can come close to this with some simple JavaScript, just a bookmarklet, which will open the currently viewed URL in a window with most of the info/action bars hidden:
javascript:void(window.open(location.href,"_blank","outerWidth=1000,outerHeight=650,top=0,left=250,menubar=no,toolbar=no,location=no,personalbar=no,status=no"))
You can get close to maximized with specifying appropriate numbers for outerWidth=1000,outerHeight=650,top=0,left=250 which match your screen size, but you will not get quite what you can do when maximized.
You can then maximize the window. Which gives you:
Window.open requires chrome privileges in order to hide the titlebar and locationbar which means an add-on must do it. You can then use add-ons to get the rest of the way.
Using the Hide Caption Titlebar Plus add-on (with appropriate options selected) will get you to a maximized window of:
And with the addition of the add-on Hide Navigation Bar, maximized and hitting the default F2 to hide the locationbar you get:
Non-maximized:
You also asked that it provide removal of the various action/status/tool bars when not maximized. These add-ons will do so.
Easily turning them on and off:
Hide Navigation Bar only hides the location bar if you hit F2. Hide Caption Titlebar Plus is a restartless add-on and thus can be enabled/disabled at will from about:addons (Ctrl+Shift+A). It can also be set to mostly affect only maximized windows, so may not be something you need to enable/disable on a regular basis.
Personally, if this was something I wanted, I would set up a separate Firefox profile which has these add-ons and the home page as the one I wanted displayed. I would then set up a shortcut that automatically opens that page and shows what I want. You may need to use something like the add-on Session Manager to automatically restore the maximized window, but the default functionality in Firefox may be sufficient. In order to have a shortcut that brings up another Firefox profile automatically, you will need to set the Target to something like:
"C:\Program Files (x86)\Mozilla Firefox\firefox.exe" -no-remote -P "your profile name"
This would allow you to bring up the page you wanted with a single click and not have the configuration disturb your normal use of Firefox. It would also be something that you would not need to mess around with enabling/disabling on a regular basis.
Many ways to do this:
There are, probably, many different combinations of add-ons which will get you to a similar look. There is, perhaps, even a single one which will do so. You should do some research on your own to find a combination that works for you. For the profile I was initially using to test, I did not need the Hide Navigation Bar add-on to hide the locationbar as that functionality was covered in a different add-on. However, if starting with a stock profile these two add-ons will get you to where it sounds like you want to be.
Taskbar is visible:
For all of the above images: If I had taken a shot of my entire desktop, you would see that that the Windows Taskbar is still visible (the Firefox window is just maximized, not full-screen). The above images are not full-screen for privacy reasons. I do not desire to share the windows I have open and my taskbar configuration. If I have the time later, I will re-take the window shots as full-screen shots after a clean re-boot.
I am using Firefox Developer Edition and when I had the Inspector open, which is accessed by right-clicking an item and selecting Inspect Element, I then right clicked something in the Inspector and selected Show DOM Properties, which you can see in the screenshot below:
However I cannot figure out for the life of me how to close the DOM Properties window.
How can one do this?
The feature you're referring to is called the "split console." You have it toggled on currently. It will show when a tab other than the console is selected. You can click in the split console, or command+alt+k on OSX, and hit escape to close it, or click on the console tab, or click the button in the top right of the dev tools to toggle it back off. I find it most usefull with the debugger tab. When the debugger is paused, you can access variables within the scope of the breakpoint.
Pressing escape with the DOM properties panel focused should get rid of it.
I'd like to make an application which user can drag and drop tab to make a new window contains
a tab control user holds. What i am looking for is the exact same functionality of Google
Chrome browser for window and Internet explorer 9. Both Applications create a new window if
if user drags and drop a tab out of original window. and vice versa.
How do i do this? Any advice or sample code will be appreciated
It's not a simple task, but if you work through it bit by bit...
Most tab controls will allow you to detect mousedown (and maybe even drag) and when the cursor is moved away from the tab row, you create a new window with a single tab (and maybe a frame depending on what you want).
When they drop, show the rest of the frame as required.
As for moving the content, this depends on your application layout but it can be as simple as changing the container of a control (SetParent()) or the destination of a render.
You can also just drag an "image" of the tab and only create the window when they drop.
Getting any more detail than this is going to be preety much impossible without specifics (and you actually accept an answer).