I am using the google chrome developer tools for testing my website;
It is working fine for some elements, however for others it is showing the selector but showing it as having no styles; The element does have styles, and the styles are applied to the element. but the inspector shows no styles.
If I click the link to the css file line for that inspector I can see the styles there.
I saw a google group topic that stated that removing any empty url() declarations fixed the bug. however I have no empty url() declarations.
I also found this bug which is somewhat similar; but not exactly the same. one thing I did notice is that both the usecase this bug provided and my setup are using twitter-bootstrap. I am using the .less version of bootstrap which includes bootstrap into the single css file as a copy > paste method, so my css file has 3740 lines. could this be part of the issue?
The elements are not deep nested (body > div#container > inspected element).
There are not an excessive amount of styles applied to the elements (<= 10).
Click to enlarge
Ok, so I also found this bug aswell which looks like it has a closer match to the bug.
It states that
DevTools break when an unrecognised pseudo-class is present in CSS
which twitter-bootstrap does! so it looks like the dev tools are broken if you are using twitter bootstrap (or anything that tries to use vendor-specific pseudo classes). afaik the only way to solve this is to wait for this bug to be solved by the developers.
If someone can post a fix for this I will accept their answer!
Related
I understand that if a sytle is overridden then it is crossed out in Google Chrome tools and then you can go to the Computed tab to see, which element has overridden the style.
Say I have some css like this:
.myClass
{
position:static;
top: 20px;
}
This is clearly wrong because the top attribute does not work with positions that are static. When I load the webpage in Google Chrome and press F12; the style appears under the styles tab as if it was applied to the webpage, which I find a little confusing.
Does Google Chrome (or any other browser/tool) tell you what the error is e.g. "cannot apply top to statically applied element" (like you get in Visual Studio when there is an error in your code e.g. NullPointerException).
A CSS class is a set of rules applicable to any element on your page that also can change during the live time of the page. As mentioned in Dais comment, properties are inherited and cascade down.
There is no reliable way to validate a set of CSS rules, because they all interplay each other and are about to change. Especially if you ask for a feature in your IDE like the NullPointerException hint this won't work, because CSS classes are composable and are JIT compiled. An IDE could not know beforehand which class are combined with other classes assigned to which elements in regards to the DOM tree at a specific app time state.
Mozilla Firefox has such a feature. It tells you why a rule isn't applied directly in the Inspector.
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 created a test extension, to change a few things and maybe add some features to Firefox built-in devtools.
I set up a basic extension, with content css and the usual files, and chrome.manifest:
content devtooltweaks content/
style chrome://browser/content/devtools/framework/toolbox.xul chrome://devtooltweaks/content/devToolStyle.css
Although I can go to "chrome://devtooltweaks/content/devToolStyle.css" and see that file exists in the browser, DOM inspector doesn't show the style applying, I can't see the stylesheet listed either. It's been a long time since I did extension development, is there a step I'm missing here? Or is it not permitted to change the built in dev tools, similar to how it's not permitted in Chrome?
It looks like the style is imported, but not shown as a stylesheet in the DOM Inspector, I also may not have been using firefox -purgecaches. It's working now.
I am frustrated. I have one website where my drop-down CSS menu works and another where it doesn't.
Their stylesheets differ wildly and, although I have tried to manually copy the menu styles from one to the other, but with no success.
Is their any tool which will let me (like FireDebug) click on a page section (the menu) and then copy the rules which affect that section - ignoring those which are hidden by other rules - so that I can post them into the second site's stylesheet.
It seems that rather than having multiple styles affecting the menu and trying to sort out which have precedence, I'd like to have some software sort it out and generate a single combined rule ... if you see what I mean.
Both FireBug and the inbuilt Chrome Dev Tools show you what styles are being utilised by the selected element. I don't work with FireBug much, but I know the Chrome Dev Tools will cross out overrided styles and even show default user-stylesheets where applicable. It's also kind of nifty when inline styles are applied, eg for a table the "frame" attribute, as it converts these to CSS and displays it as part of the styling ;)
Sounds like you've got problems with accidental inheritance. Try to make sure your CSS selectors are only referencing the elements you want to style. Otherwise things get messy, and stuff like this happens.