Is there a way to make a popout menu 'stick' when inspecting with Firebug.
You can do it with Chrome, but I prefer firebug.
It's hard to set padding or a margin when you can't see the element you are styling.
I did some research but couldn't figure it out.
There's an option built in:
Inspect the element that's "hidden", then use this.
You can show/hide them using JS console, directly using show() or binding an event(mouseover, click etc).
Related
I started building a site using a bootstrap template, but I'm having a hard time figuring out how to tweak the css. For example, a table might stretch across the entire page. But when I use F12 to look at the css, I don't see anything related to a width property anywhere around the table. Is there a better way to determine what css is being applied or inherited?
You can use the Google Chrome element inspector. Right click on a div or any other page element, and then click "Inspect Element". From there you can view the CSS that is being applied to a specific element.
Check out this Chrome plugin called SnappySnippet. (Also, prepare to be amazed)
Have a look inside bootstrap.css file , there should be plenty of code and not every element has it's own separate css , some elements are defined together
If you use google dev tools (F12), the navigation tab will let you click on "Resources." When you click that, you can look at the scripts, stylesheets, see a list of images used, etc...
if you click the "magnifying glass" in Google dev tools (F12), you can hover over any element on the page. Click that element and on the right side, the CSS will be displayed. Usually the stylesheet is called out inside the css.
Firebug is great, and allows me to see all the CSS applied to an element in the DOM that you select, but either you can:
a) View it line by line, as defined in the CSS, in the applied order (very useful but not what I'm looking for) or
b) View it "computed", which is all CSS rules and the values that this element has.
What I want is a tool or extension that allows me to select an element and would show me, in copy-pastable form, all the CSS that's been defined for that element. If the element has font-style:normal just because it's the default for that element, I don't want that there (Firebug shows all this in computed view).
Basically I want to be able to:
I see an element I'd like to replicate on a website (like a button) exactly in my own website.
Use this tool to get a bunch of CSS applied to that element.
Paste on my own CSS.
Get the same looking element in my website. Yay!
Any ideas?
Switch to Chrome default element inspector (press F12), it has all that you need. You'll find everything in the Computed Style panel, including a useful "Show inherited" checkbox
I know the question is almost 4 years old, but if there is someone looking for it today, there's a Chrome extension that handles it. https://github.com/kdzwinel/SnappySnippet
It adds a new tab in Chrome Inspector and you just need to click a button to get all html and css of the selected element and its children. Then you can export it to codepen, jsfiddle and jsbin, or copy and paste.
Google Chrome has tools like Firebug built in called "Chrome Developer Tools". It is extremely powerful from my experience and I switched from Firefox/Firebug to Chrome about a year ago. There are several different ways to get the developer tools up. You can find detailed documentation at https://developers.google.com/chrome-developer-tools/docs/overview
When you have the Chrome developer tools open to the elements tab with an element selected, you can expand the computed styles area on the right and see all styles that make up that element.
If the specific style has an expandable triangle to its left, you can find out what stylesheet and where the styling comes from.
You don't need any extensions for that, the built-in inspector in Firefox can do that. Right-click the element, choose "Inspect Element". Click the Style button in the bottom toolbar - and there it is, a sidebar with all the styles applied to that element.
I have tried to calculate it via window.getComputedStyle and it is needed to be optimized to shake out unnecessary style properties. https://github.com/aleen42/DOM-mirror
I've tried SnappySnippet and found CSSSteal to be much better. It will grab just the CSS, and will do so in the same format as the document has it, unlike SnappySnippet.
There's an API on window Object >> window.getComputedStyle(DOMElement). This is if we need to work with computed styles programmatically.
MDN Docs for window.getComputedStyle
Good Luck...
You can try this extension https://getcssscan.com/?ref=beautifulcheckboxes_header but it is not free. I found this while I was finding a solution.
As you know in any browser you can select a 'piece' of the website and you can get the HTML code for your selection,
well,
is there any tool you can do the same and it shows you the CSS that only afects to your selection?
EDIT
I know you can get the CSS affecting a tag using Firebug, but how about getting the CSS affecting a larger selection of code?
The tool I was looking for
Dust-Me Selectors (Firefox Add-on)
https://addons.mozilla.org/firefox/addon/5392/
but it's not supported by firefox 6 i needed to downgrade.. (its in developement, dough)
Yes: http://getfirebug.com/
Use the "Inspect element" option.
Fore developing, you can use Firefox addon FireBug, and for Chrome and IE, there are developer console under F12 key, that allows you to select DOM element, and see all set properties.
With firebug in firefox you can use the inspect element tool:
use the mouse, click on any part of the page
you'll see in the right
bottom of the screen the CSS of that part of the page.
There you get all the CSS values hierarchy, even the superseded values.
Also, you can copy all, selecting and copying
We supply micro-site content to a client. They supply us with a HTML wrapper and we inject our content into it. I'm trying to debug an issue where our style sheet appears to be interfering with the style in their wrapper.
Normally I'd use firebug or IE Developer Toolbar to select the element and I can see which styles are being applied, which are being overridden and where they are coming from. But this particular problem only exists when I hover the mouse over a link. Specifically, the link shrinks a little bit.
Is there anything that I can use to see what the browser is doing with the styles when I hover the mouse over the link?
Right click on the element. Select 'inspect element'. In the firebug html window click on the tag you're interested in. Hover over the element in page. You should see the style change to e.g a:hover
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.