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!
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.
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!
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
Using chromes web inspector to view code is very useful. But how do you view for example the hover code for a button? You will have to hover the mouse over the button and thus cannot use it (mouse) in the inspector. Are there any shortcuts or other ways to accomplish this in the inspector?
Now you can see both the pseudo-class style rules and force them on elements.
To see the rules like :hover in the Styles pane click the small dotted box button in the top right.
To force an element into :hover state, right click it.
Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.
Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.
It's a little annoying, but you need to right click on the element, and then, keeping your mouse over the link, use your keyboard select the 'Inspect Element' link and press enter. This should show you the css for the hover pseudo class for the selected element.
Here's hoping they make this a little easier in future builds.
In Chrome:
You can also mouseover on an element, and then click CTRL+SHIFT+C to inspect that element.
In Firefox:
in firebug:
source: https://stackoverflow.com/a/11272205/2165415
I'm not sure that I right understand your question but if you want to see the event handler code you can just inspect the element and look at Event Listeners sidebar pane of Elements Panel.
Another way is just press pause button in Scripts Panel and just hover the element.
The debugger will stop at the first instruction of the first event handler.
Please have a look on below link for answer
See :hover state in Chrome Developer Tools
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.