I have this small technical question about using development tools such as firebug or google chrome D.T. in finding css class
that lets say I have a plugin and would like to know a css class to modify it, how can I do that using the Development tools ?
thanks a lot in advance ... and excuse me :) I am little bit newbie :D
Not sure what kind of plugin you have, but if it is a simple <div> in your HTML, just right click on it and select "Inspect Element" (in Chrome with dev tools, there is something similar in Firefox) which will show you the HTML as it is right now even after some JavaScript library might have added some dynamic content. So this will show you also the css class of the elements. On the right, you will also see which parts of CSS are active for this element. That also shows you the css classes (including classes from parent containers).
Related
How does one generally debug CSS and resolve issues when some elements on the page are not appearing as they should? For now, I have to painfully comment out CSS declarations one by one to understand how the styles are getting displayed.
While you can not "debug" CSS, because it is not a scripting language, you can utilize the Chrome DevTools Elements panel to inspect an element & view the Styles pane on the right.
This will give you insights as to the styles being overridden or ignored (line threw).
CTRL + SHIFT + I
To Find Errors & Warnings use CSSLint
Debugging CSS and HTML code bugs can really ruin your application design. There are multiple ways to debug CSS and HTML code. There are few things or ways you should consider the debugging and taking care while developing HTML or writing CSS.
Check your syntax errors with http://csslint.net/. It provides the
nice tool and highlights a line where an error occurs.
Closely review your cross-browser compatibility issues. A site looks nice and beautiful in a firefox but sometimes it will not
look nice with another browser at that time you should take care of
cross-browser compatibility issues of CSS. You should nice and proper
CSS framework that will prevent to generate cross-browser issues and
verify HTML tags and CSS properties which may support by browser
correctly.
Browser web developer tool allows outlining an HTML and element with
different criteria this will allow to writing appropriate CSS for HTML
element.
Turn on or off stylesheet with Chrome dev tools. If you’re wondering
how your CSS is affecting a particular page element, the Chrome
DevTools make it easy to toggle each property. In the Google Chrome
web browser, simply right click and choose Inspect Element from the
context menu.On the right side of the Elements panel, you should see a
tab called Styles with some CSS inside of it. This shows you which CSS
declarations are being applied to the selected element, and if you
hover over each CSS property, you can uncheck them individually. When
a property is crossed out, it typically means that it is being
overridden elsewhere. You may need to uncheck a property in several
places to actually remove it from an element.
Use computed tab in chrome dev tools. it tells you exactly how the
browser is computing your styles. When working on large projects this
is essential for resolving cascading issues, problems with selector
specificity, and more.
You may enable chrome dev tools with ctrl+shirt+I or press F12 key
which supports in almost every browser.
Use this to debug your css
* { outline: solid 0.25rem hsla(210, 100%, 100%, 0.5); }
I've posted an image of what my Chrome debug tools look like on a fairly standard JQuery Mobile page. I've already figured out that it actually isn't using the :visited style because none of the links are actually visited. I didn't have an :active style so the links were still blue. So I know what I need to do to fix it, but that's not my question. My question is why is it telling me that it is using that style when it is not? Is this a Chrome bug or am I reading the tool wrong?
You are looking at the total inheritence of all classes. To see what final properties are being applied clicked on "computed"
Also this looks like JQUERY mobile so I suspect you are going to run into some issues of very large class paths that are not easy to detect. I posted a few of these up here - one in particular about styling buttons.
I want to edit the class "top-labels" from the shopping cart page but I can't find it in the css stylesheet. How can I get around this?
Can anyone help?
Cheers
Use an A-grade modern web browser, like Chrome, Firefox or Safari. Find the developer tools for your choice. You might install Firebug for Firefox for example.
With that, right-click on the element you're interested in, say the one with the class top-labels. The browser tools will tell you exactly which CSS file contains the definition of the class, and the line number.
It cannot really be much easier. You can also change the CSS in your browser in that definition and see what the changes do, live. That is invaluable.
I think we need more info but from what you've said I'd guess that the top-labels class is either located in a different style sheet or is an inline style on the page.
You could try adding the top-labels style into the stylesheet you're using and add the styles you want to it that way.
I've been editing CSS using Firebug in Firefox, but recently noticed that Chrome is rendering my pages much quicker (with scrolling, interactive elements etc) and wanted to switch to it.
I found Chrome shows the computed CSS and what attributes are overruled in the stack and I can alter them one-by-one but what I liked about Firebug was that I could just edit the entire stylesheet in a real-time text editor. Is this same feature somewhere in the Chrome developer panel, or is there a Chrome extension that lets me alter the stylesheets this way?
In current versions of Chrome (I'm running 16) you don't need any external add-ons.
Right click anywhere in your page, choose inspect element, then in the window that shows up click the Resources tab, then in the left panel select the stylesheet you want to edit. To begin editing you need to first double click, over the css text.
Try StyleBot. It can also save edited CSS.
You can edit any property or create a new property by double click on an entry or empty space in Elements panel's styles pane. There is no way to edit entire css file just as text at the moment.
I use live.js! As you edit your css file it shows you the results realtime in your browser without having to refresh. http://livejs.com/
I've spend countless hours testing almost every Chome extension i could find (including stylebot) to mimic the live CSS editing of Firebug in Firefox. None to date have that same workflow. Live.js is the closest.
Have you tried the Web Developer Toolbar extension's CSS->Edit CSS tool?
https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm
Web Developer Toolbar for Chrome > CSS > Edit CSS
there's a semi-working firebug extension but it's not exactly perfect yet.
User Firebug Lite. It's also available as an extension to Chrome.
You are looking for this - Live Stylesheets
I wrote the LiveCSSEditor 4 years ago for exactly this reason. FireBug in Firefox would let me free-hand write CSS into the page, but nothing else in Chrome would.
I still use it today and have yet to find a better solution. It may work for you as well. :)
Is there a firefox addon or is there a way to use firebug such that you can select some text on the website and it will tell you what styles are being used for that bit of text?
At the moment if I select a bit of text that is styled using css imported from elsewhere I would have to go digging manually to find out what style is being used. Is there an easier way?
Both FireBug and Web Developer addons can be used for this.
Just right click it in Firebug, choose HTML, and in the right pane, select Style>Show User Agent CSS. This will show a list of CSS rules that are being applied on the selected element.