I have noticed that since version 57 of firefox the expand/collapse panes button is not shown anymore in the inspector tab. The dropper button appears instead. Any idea how to restate it
Here a firefox 59.1 screenshot
An here is the expand/collapse panes button
This is the state of inspector sidebar when devtools.inspector.split-sidebar-toggle is applied, this actually add the expand/collapse button but the behaver is not the expected
Seems like the button has been removed in recent version(s) of Firefox, I don't know why.
I created bug 1449119 and asking to bring back the button again.
For now you can enable the button using following steps (Firefox v59.x):
Go to about:config
Search for devtools.inspector.split-sidebar-toggle
Double-click on that (to toggle the value)
Done!
Related
I have created a webextension with a popup window:
I want the user to be able to copy/paste the contents of this popup. This works fine in Chrome, but in Firefox the text cannot be selected. If you drag with your mouse over the text nothing happens.
I tried inspecting and changing the CSS (maybe there's a default user-select?), but without success.
How can I enable text selection in my extension's popup window?
TLDR: add -moz-user-select: text to the body element of the popup.
There is indeed a default user-select.
You can inspect the CSS of the popup using the following steps:
Navigate to about:debugging and enable add-on debugging.
Click the Debug link next to your addon.
Click the ellipses in the top right corner and select "Disable popup auto-hide".
Open your popup.
In the developer tools, select another frame by clicking the frame button in the top right corner.
Open the inspector. As you can see there is a -moz-user-select CSS rule:
So the fix is to add a CSS rule in your popup CSS like this:
body { -moz-user-select: text; }
Setting this to auto doesn't work. Other possible values are documented here.
Is there any way to view the styles applied during hovering of an element in Internet Explorer? Chrome and Firefox provide this in styles tab as we can see in console bar.
I want to know whether the same thing can be viewed in Internet Explorer. If so how?
Once you've pressed F12 and selected the element in question, you will be shown the CSS styles on the right - this does not however update when you hover over the element like in FireBug - nor can you set it's state as ':hover'. What you can do, is once the element is selected, ensure the focus is on the developer bar and hover over the element on the page - while hovered over it, press F5 - if you now reselect that element, the styles on the right hand side will show you the :hover styles ("Trace Styles" will also update)
In IE, you just press F12 and it will bring up the Developer Console. There you will find a CSS Tab.
Or after bringing up the Developer Console ( F12 ) you can use the pointer tool to highlight an element on your page and you will view the element Styles on the right pane of the Developer Console
http://www.sitepoint.com/debug-faster-with-f12-developer-tools-in-internet-explorer-9/
You can navigate to,
Tools >> DeveloperTools
Shotcut- F12
go to InternetExplorer menu : ->Tools->Developer Tools Shortcut : f12
Rather than change browser once again, anyone know a trick to allow this to happen:
I have a dropdown menu at the top of a website containing a settings button. When you hover over the settings button, the settings panel shows and when you hover off, the settings panel hides.
In chrome, if I use developer console to inspect that settings panel, when I hover over the settings button, the settings panel pops up and I can inspect elements inside it.
In IE10, when I hover over the settings button, it just inspects the text rather than bringing up the settings panel.
Any ideas on how to get IE10 to allow the hover over events to trigger so I can in fact inspect the elements inside the menu.
Thanks for your input!
I'm really hoping I can find a CSS expert to help with this odd problem.
In Chrome/Firefox and Opera this works fine.
However in IE9 and maybe earlier versions I have a problem.
To see the problem follow these simple steps.
1) Goto www.spoilertv.com and hover over the HOME button/link
2) Hover over the "Twiter Connect" button
3) The menu disappears.
The Twitter Connect button is a Twitter Anywhere button which basically creates an iframe.
Hovering over the twitter button causes the menu and hence the button to vanish. It's as if the mouse has moved away from the dropdown.
This all works with Firefox and Chrome and Opera.
I'm at a complete loss here :)
Looks like this is "designed" IE behaviour
IE7/8: div loses :hover if mouse moves over an iframe which is inside the div!
I've had to replace the Twitter #Anywhere button with a custom button and signin function which removes the need for an iframe
https://dev.twitter.com/docs/anywhere/welcome#login-signup
I want to debug the CSS for a DHTML menu, but the element I want to debug is a submenu, so it only appears when the top element in the menu is clicked.
So I can't use that button on Firebug that shows the CSS for the next element clicked, because when I click on the top menu item it will show the CSS for that element, not its child, and if I expand the menu first and then click on the Firebug button the submenu disappears (it disappears when it loses focus).
Any tips on how to get out of this catch-22?
Use firebug console command line to run click event. Like $('#menutab a').click(); If it's needed, you could also set breakpoint to avoid hidding.
Read more in firebug documentation
Select your element in the HTML tab, directly in the source.
Then, you can hover your page to toggle it.
In cases like this I sometimes alter the script slightly in order for the 'hidden' element to stay visible.
In this case, I would perhaps comment out/disable the script code which hides the element on blur. That way you can click the main element, and inspect the now visible item for as long as needed.
What about debuging with all the buttons visible? Or you can still find the elemnt in the HTML tree.
In Opera, you can use Dragonfly (Tools > Advanced > Developer Tools, or Ctrl+Shift+i) to solve this issue. When the tools are active, clicking on any part of the page will navigate to that section of the HTML side-by-side with its CSS.