I'm building my first application using CSS Grids.
Using Firefox's DevTools, I'm able to to highlight the Grid's tracks by clicking "# grid" next to an element in the "Rules" pane :
But when I click the "Layout" pane, it always shows "CSS Grid is not in use on this page":
Why is that?
(I'm using the latest Firefox version available today, "62.0.2")
UPDATE: Here's an example project.
UPDATE 2: It does work when I create a new, fresh, profile! But it doesn't work with my current profile, even when I start in safe mode, with all add-ons disabled... I guess I'll customize a new profile!
I agree with you indeed this is a bug in Firefox, I'm using the latest version of developer edition 85.0b9, I faced the same issue. You can clearly see, I've display as Grid still it says CSS Grid not in use on this page.
Issue - It happens when you open it in the default or the 1st Tab, it's not setting some tab-value there. The bug is still not fixed by Bugzilla's dev team, open from past 2 years. Let's hope they fix in future.
Issue Link - https://bugzilla.mozilla.org/show_bug.cgi?id=1492370
Solution - Just duplicate your tab, it'll work like a charm.
Related
Probably some of you faced similar problem of Safari dev tools.
When I debug CSS properties of elements on Safari dev tools, it's fine - I can enable/disable different properties and they're get commented/uncommented (see attached picture), but when I start debugging iPad pages remotely - it's different...
When I disable some CSS property, it disappears instead of getting commented. I have no other possibility to enable it. I must add it manually... It's annoying...
Do you know the solution?
I think I found a solution. I use iPad 4 which has no more iOS updates available (last one is ver.11).
However I could get rid of the problem by going to dev tools settings, selecting experimental tab and checking the "Legacy style editor" checkbox
I hope it will help someone of you.
I'm trying to find a way to debug my CSS animations in Chrome specifically. I downloaded the latest version of Chrome Canary since it was supposed to contain this feature. Multiple sources confirm that there should be a button in the DevTools under the style tab.
However, the button is simply not there. It's also not available in the most recent version of regular Chrome, or in the Chrome a colleague of mine uses. Is there some setting I'm missing?
It's very hard to find a good source for this problem, that's why I'm asking you guys for help :)
I'm not sure why there's no button, but you can open the animation tool by selecting it from the context menu in the console drawer.
My chrome version is 61 and the animation button is now moved to "More tools" under the 3 dots to the top right. Hope my answer can help those who view this post recently.
Whenever I right click to inspect element in Firebug on Firefox, it gives me this "*::-moz-progress-bar" CSS listed before the element I inspected. Anyone know what this is and how to get rid of?
There's an option on the Firebug Style ▼ drop-down menu to Show User Agent CSS, you must of accidentally enabled it recently.
The current version of Firebug (reportedly started in version 1.11.3) has a bug where it incorrectly displays numerous User Agent CSS at the top of the list. If you've been using the "Show User Agent CSS" option for a while now and this problem just started, you're most likely experiencing this bug.
Give it some time, as the bug was only posted today (5/16/2013). Hopefully the Firebug developers will release a fixed version within a few days.
And as the other poster said, you can always disable the showing of all User Agent CSS. Though as stated in the bug report (link below), it may still appear in certain cases.
Bug Report: http://code.google.com/p/fbug/issues/detail?id=6451
Bug Discussion: https://groups.google.com/forum/?fromgroups#!topic/firebug/5vwmU-IEkbc
Just noticed that Add Style rule dialogue box which showed up CSS-outline is missing in VS2012 or I am missing some changes made by MS?
This is discussed on the MSDN forum here.
As far as I know that the Style menu has been moved from VS2012,
however, you can get the Build Style feature from the toolbar. Go to
View->Toolbars->Style Sheet.
However, you still can't get the "Add Style Rule" option which is
available in VS2010. If you feel it is a very important feature to
you, you can consider submitting one feature request on the Microsoft
UserVoice site here:
http://visualstudio.uservoice.com/forums/121579-visual-studio
I hate Firefox, I really do, but as a web developer I'm chained to it b/c of the robust set of tools that Firebug offers. Recently Chrome and Safari's inspection tools allowed users to edit full chunks structural code (in a very buggy manner), but you still can't edit full stylesheets. Usually when someone brings this up, Chrome and Safari developers say "BUT YOU CAN EDIT CSS," and that's true, to an extent. You can edit CSS property-by-property (which takes forever if you have a lot of changes) in both browsers, but there is no way to see the full computed stylesheet, make edits within it, and immediately see the results. To date, only a full install of Firebug on Firefox allows you to do this.
Has there been any momentum in either of the Chrome or Safari camps to build a plugin to match this unparalleled function? Cheap plugins that allow you to insert CSS into the page are not the answer. It's really simple:
Have a list with the current stylesheets that are being referenced
Choose the one you want to edit, and click an edit button
See all the code in the stylesheet
Make changes and see them reflected on the page immediately
Is it really that hard to build something that does this? I think it must be, b/c why else would the developer communities of two browsers completely ignore it? If there's something out there that now offers this capability, I'd love to hear it; otherwise, maybe someone will step up to the plate and develop it for either Chrome or Safari. It seems like the guys who developed the CSS Edit app would be all over this.
Thanks to you I found it!
The Live Stylesheets extension for Chrome is what you are looking for. Be sure to restart Chrome after installation to use it.
You can edit external stylesheets in Chrome DevTools, too (since Chrome 15 or so). Just double-click the stylesheet contents in the Resources panel (or click the "Edit" button below), edit, Ctrl-S to commit a new revision, Esc to cancel editing. And it updates your page as you type!
You can edit your CSS files directly on Chrome without relying on any extension.
Here is how: Edit CSS files on the fly using Chrome DevTools
A different way to access it:
right click the page, select inspect
on the DevTools, click on "Sources"
locate the css on the "Network" pane and click it
change the css and save it ( by pressing ctrl+s )