Computed Style panel often gives ZERO information about where a computed style comes from
Reported by
teo8...@gmail.com,
May 29 2016
|
|||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36 Steps to reproduce the problem: This is actually only one tiny reproducible and clear example of a broader issue that happens most of the times with a whole lot of style properties. Basically, whenever some computed style property value is "some sort of default" (which is when help from the DevTools is most needed), at least 50% of the times you'll face this problem. 1. visit http://output.jsbin.com/gobifu 2. Right click the image, Inspect Element 3. Look at the Computed style panel on the right, and try to figure out why the border of the image is red What is the expected behavior? The tools should tell you why the border color of the image is red. More specifically, in the list of computed values in the Computed tab, the "border-bottom-color", "border-left-color" etc. properties should have a triangle next to them, and clicking any of them should reveal the style rules that are being applied causing the border color to be red. How exactly to display that is not totally trivial (the reason why the border color is red is because the "color" property computed value is red, and that an image's border color is by default the color property if not otherwise specified), but that's no excuse. A number of solutions can be devised. At the very least, you should show the applied rule that is determining the value of "color" as the (and the developer would infer that color is "transferred" to border-color because of some standard rule). What went wrong? Under the Computed styles panel, the value of the "border-bottom-color" (and the other 3 border colors) is red, but there's no dropdown, and no way to know where that value comes from, unless you know which other property you have to look at, in this case color. Did this work before? N/A Chrome version: 50.0.2661.102 Channel: n/a OS Version: Flash Version: Shockwave Flash 21.0 r0 A less obvious example: http://output.jsbin.com/piteje/
,
May 29 2016
> I am not seeing "border-bottom-color" in any of the computed properties, > as there isn't one You obviously need to check the "Show All" checkbox. > The color is inherited from the color property as defined > by `currentColor`. Which in the given case is red since the `currentColor` > is red as defined by the same nodes color rule. That's exactly the story that I'd expect the DevTools to tell me.
,
May 29 2016
Valid point for improvement, assigning to lushnikov for further assessment.
,
May 29 2016
Another example: the default margin-top and margin-bottom of a paragraph: http://output.jsbin.com/cerogo which apparently are determined by the values of -webkit-margin-after and -webkit-margin-before
,
Nov 2 2017
Closing this since there wasn't much interest in this feature, whereas implementation would require a big engineering effort.
,
Nov 2 2017
"There wasn't much interest in this feature" from who? From you Chrome developers?? Yeah right. Web developers out there who every day suffer from this issue (because I call it an issue, the DevTools not doing their fucking job, rather than a "feature request") and bang their heads on the wall while wasting hours figuring out why the fuck a given property gets a given value (rendering the whole style inspector useless), don't get magically informed that this report exists. They may have filed duplicate reports, or they just assume that the WebTools suck and go on with their lives. You shouldn't even need a report in the first place to see the necessity of this "feature", let alone wait for it to get starred. |
|||
►
Sign in to add a comment |
|||
Comment 1 by jonathan.garbee@chromium.org
, May 29 2016Owner: jonathan.garbee@chromium.org