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.
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 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.
I have a problem with the inspector in Firefox browser. After some time of use, in the "rules" tab, system don't want to show me CSS syntax suggestions. After switching the inspector off and on, everything returns back to normal, but ... again ... after a few moments, the system stops showing me syntax hints.
with syntax hints without syntax hints
after a couple of minutes
Is there any FIX for this? I'm using newest "FireFox Developer Edition" (same thing on normal "Firefox").
UPDATE:
I discovered that inspector starts to work improperly when I restart a page which I have been "inspecting".
Are you using Firefox Developer Edition 41.0a2? It appears to have possibly been a bug that is being corrected.
I can confirm this happens in Firefox 40.0.2.
I also saw this in Firefox Developer Edition 41.0a2.
I updated Firefox Developer Edition to 42.0a2 and am no longer able to recreate this phenomenon.
Install firebug plugin for firefox. Ita a very good debugger tool. After installing enable it and right click on page and do "inspect element with firebug"
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
Is there a way to debug a css file in IE? I wish to see if a particular background-image is loaded or not.
This is in reference to the question:
extjs gridfilter icon not showing in IE but shows in Firefox
Or for any version of IE, try FireBug Lite. You can simply bookmark the link given on that page (bookmarklet) and then, to open a FireBug like thingy whilst on IE, simply click on the bookmark you just added.
Use the built in browser troubleshooting tool (aka Developer Toolbar) by pressing F12.
It is built into IE8 and later, but you can download and install it in earlier versions.
Do you want to target IE specifically in your CSS? If so I wrote a blog post about this not so long ago, please have a read: http://ajthomas.co.uk/blog/?p=299.