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.
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.
I have a weird behavior on firefox. When I righclick anywhere, a click event is fired over the contextual menu that is displayed. (this happens only in the document itself. Not in any menu or bar.
This means (according to my contextual menu at least) that any right click on a link opens the page in an incognito window, and any right click on an empty space triggers "save as"
I have disabled all extensions, but it still happens. For the time being I've resorted to holding right button and then selecting the desired option in the contextual menu.
(PD: I saw a similar question but the behavior is not quite the same)
I have the opposite issue with Firefox/macOS.
When I try to catch a mouseup event and Ctrlis pressed it returns event.button: 2 or event.which: 3. I have not found any post related to it.
Chrome and Safari return 0 as it should be.
I have not figured out why.
A button in a website triggers a popup menu when clicked (only when clicked, and not when hovered over). I want to be able to inspect this popup menu but after I right click it and select "Inspect Element", it disappears so I can no longer inspect it.
When the popup menu is displayed, I can see that an entry for it appears in the HTML in the Inspector tab but when I click the entry, the popup menu disappears an so does the HTML entry.
For cases in which a menu appears when a button is hovered over (not clicked) I would click an entry in the Inspector tab to switch focus to it, then I would just hover over the button and use the arrow keys to navigate to the entry in the Inspector tab. But since this button needs to be clicked, then I lose the focus on the Inspector tab.
I thought this could be solved by switching the focus to the Inspector tab in Firefox's Web Tools without clicking anything.
I've tried using different shortcuts such as Ctrl+Shift+C or Ctrl+Shift+I (opens the Web Tool) but I haven't been able to switch the focus to the the Inspector tab to navigate through the HTML after using these shortcuts.
I've also tried using inspect mode (the button left of the Inspector tab), which lets me inspect anything I click. The problem with this method is that to get to the menu I need to click a button first and inspect mode only inspect the first thing I click. Maybe there's a way to ignore the first click while on inspect mode?
EDIT:
Pressing the TAB key numerous times, sometimes focuses on the Inspector tab. Sometimes it just loops through the elements in the website and never focuses on the Inspector tab. Even so, the times I was able to use TAB to focus on the Inspector tab, the popup menu disappeared after pressing TAB about 20 times so I need a different method that doesn't use the TAB key.
I have a deviantart account so I was able to reproduce the issue you described.
The problem is that the popup that appears on click is hidden when the window is blurred or when the page gets clicked. And because focusing the inspector will always cause the content window to blur, there's no way you could switch over to the inspector while keeping the popup displayed.
So, as #Callahad said in a comment, the only viable option here is to use a breakpoint to force the javascript code to pause at a certain point in time that lets you inspect the popup without having it be closed under you.
Now, the question becomes: what is this point in time, and how can you set a breakpoint there.
When the popup appears: this happens when the edit button's element is clicked. If you could add a breakpoint to this exact line in the debugger panel, then you'd be able to click on the edit button, and step through the code until the popup is shown, and then switch over to the inspector again to inspect it. Unfortunately, the javascript event handler for this is in a onclick attribute on the node, and you can't set a breakpoint there.
When the popup is about to be hidden. This happens on window blur. To set a breakpoint there, you could try and follow these steps:
find the html element in the inspector (that's the element where events added to window are shown),
click on the [ev] icon next to it,
find the "blur" event in the list that appears,
click on the debugger icon next to it, this takes you to the debugger at the right line, hopefully
maybe pretty-print the code if needed, using the {} button in the lower left corner of the debugger
add a breakpoint at the right place in this code
and then just click to show the popup, and then click outside the window, this will pause the javascript execution where you added the breakpoint, which is, just before the popup gets hidden, therefore giving you a chance to switch over to the inspector and inspect the popup before it closes.
The popup also gets hidden on page click, so you could do the same thing by looking at this event.
Another valid approach could be:
Override the code that hides popups! Javascript is dynamic, so you could totally turn this to your advantage. Find the function in the deviantart code that hides popup, and change it.
By quickly looking at what was on the window object in the web console, I got lucky and found: Popup2.hideAll. So if you just run this in the web console: Popup2.hideAll = function(){}, and then open the popup, it will just stay there and never get hidden again until you reload the page. This gives you a good way to inspect it.
Last, one very good way to work with DOM changes like this would be to have the "break on DOM mutations" feature in the devtools. Firebug has this, Chrome devtools too, unfortunately Firefox doesn't yet.
The idea of this feature is simple, in the inspector: right click any node (in this case, the parent element of where the popup would appear in the DOM), select "break on mutation", then click to open the popup. When the popup gets inserted into the DOM, devtools would see this and automatically halt javascript execution.
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.
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