Re: want to "Trace Styles" like Microsoft's F12 tool

[Jan Honza Odvarko]

This is one of the new features in Firebug 1.10b3
https://getfirebug.com/releases/firebug/1.10/firebug-1.10.0b3.xpi

See also Issue 2916: Trace Styles Feature
http://code.google.com/p/fbug/issues/detail?id=2916

Honza

On Jul 13, 4:24 am, SAbboushi <Goo...@w3x4.com> wrote:
> I am considering switching from IE9/F12 Developer Tools to Firefox/Firebug
>
> Looks like firebug is more intuitive than Microsoft's F12 Developer
> Tools... but not always:
>
> Just noticed that Firebug's "Computed" tab does not allow me to drill
> down/expand on each property (e.g. Box Model: width) to see a list of style
> rules that have this property defined (something I find very useful on
> Microsoft's "Trace Styles" tab); so instead, I am scanning through the
> Firebug "Style" tab to try to find all style rules that have this property
> defined.
>
> Being a newbie with firebug, I am wondering if there is a way to do what I
> want or maybe an add-in?

[SAbboushi]

Absolutely AWESOME - just that one feature (Computed Side Panel) is much more intuitive than Microsoft's tool in many dimensions (lists the specific tag instead of the entire list of irrelevant selectors, sorts the cascade the right way, expand/collapse all, grouping and more).  Excellent design - you've got a new convert (been loyal to Microsoft since the 1980s)

[Jan Honza Odvarko]

On Jul 13, 1:18 pm, SAbboushi <Goo...@w3x4.com> wrote:
> Absolutely AWESOME - just that one feature (Computed Side Panel) is much
> more intuitive than Microsoft's tool in many dimensions (lists the specific
> tag instead of the entire list of irrelevant selectors, sorts the cascade
> the right way, expand/collapse all, grouping and more).  Excellent design -
> you've got a new convert (been loyal to Microsoft since the 1980s)

Excellent! :-)

Honza

[Sebastian Zartner]

Absolutely AWESOME - just that one feature (Computed Side Panel) is much more intuitive than Microsoft's tool in many dimensions (lists the specific tag instead of the entire list of irrelevant selectors, sorts the cascade the right way, expand/collapse all, grouping and more).  Excellent design - you've got a new convert (been loyal to Microsoft since the 1980s)

Fantastic!
We put a lot of effort into making this feature as intuitive and useful as possible.
And you even forgot one feature. It has infotips for colors, images, gradients and fonts. :-)

Sebastian

[Jan Honza Odvarko]

Here is a post explaining the Trace Styles feature in detail:
http://www.softwareishard.com/blog/firebug/firebug-tip-trace-styles/

Thanks to Sebastian who implemented that!
Honza

[pau...@gmail.com]

Oh no! Please can we have an option to have the original Computed tab back? Surely the Computed tab is pretty much a copy of the information in the Style tab now. I cannot see all the computed values for an element in the Computed tab, only the values that have been set in the CSS. As far as I can see the only way to view all the values, ie the defaults too, is to use the Quick Info box, a feature I've never liked because it overlays the page content.

[Sebastian Zartner]

Oh no! Please can we have an option to have the original Computed tab back? Surely the Computed tab is pretty much a copy of the information in the Style tab now. I cannot see all the computed values for an element in the Computed tab, only the values that have been set in the CSS. As far as I can see the only way to view all the values, ie the defaults too, is to use the Quick Info box, a feature I've never liked because it overlays the page content.

Like inside the Style side panel there is now an option inside the Computed side panel called Show User Agent CSS, which allows to display all computed values like you had them before.

Sebastian

[pau...@gmail.com]

Excellent... thanks for that. Quick Info Box is off again. :)