Tracking down CSS rules

[Lawrence San]

I'm having some minor problems tracking down the source of CSS rules using the Mozilla DevTools.

I click to inspect a section in the rendered page. The Inspector panel's Rules tab shows me the correct selector, but next to that it says "inline:13".

This is a little confusing because there are no inline styles. Then I discover that by "inline" it just means a style section in the HTML document's head. So anything that isn't in a separate stylesheet is "inline" now? Not the way I use that term...

A worse problem is the number "13". I look around and find the CSS rule on line 35 of my document. So why "13"? 

It turns out that the DevTools uses its own line-numbering system -- if you ask to see CSS, it starts numbering from the beginning of the CSS section, not the top of the document. It treats the first line of the head's CSS section is "line 1", and so on. But that doesn't help me find anything, because actually (according to my text editor) that's line 35 of my document, not line 1. Is this a bug, or just the DevTools being stupid? I don't remember having a problem like this in Firebug...

[Sebastian Zartner]

On Monday, December 19, 2016 at 1:19:13 AM UTC+1, San wrote:

I'm having some minor problems tracking down the source of CSS rules using the Mozilla DevTools.

I click to inspect a section in the rendered page. The Inspector panel's Rules tab shows me the correct selector, but next to that it says "inline:13".

This is a little confusing because there are no inline styles. Then I discover that by "inline" it just means a style section in the HTML document's head. So anything that isn't in a separate stylesheet is "inline" now? Not the way I use that term...

Yes, inline here means "embedded in the HTML code", i.e. a style sheet surrounded by <style> tags.

A worse problem is the number "13". I look around and find the CSS rule on line 35 of my document. So why "13"?

It turns out that the DevTools uses its own line-numbering system -- if you ask to see CSS, it starts numbering from the beginning of the CSS section, not the top of the document. It treats the first line of the head's CSS section is "line 1", and so on. But that doesn't help me find anything, because actually (according to my text editor) that's line 35 of my document, not line 1.

You're right. The numbering is relative to the beginning of each style sheet. I.e. 13 is the 13th line after the <style> tag.
 

Is this a bug, or just the DevTools being stupid? I don't remember having a problem like this in Firebug...

Well, it's a difference to Firebug. I've filed that as bug 1324385.

Sebastian

PS: If your question is only related to the Firefox DevTools, you should better ask in their communication channels, not the Firebug discussion group. In this case it is fine, though, because it's a difference to Firebug.

[Erik Krause]

Am 19.12.2016 um 11:23 schrieb Sebastian Zartner:
> PS: If your question is only related to the Firefox DevTools, you should
> better ask in their communication channels

> <https://developer.mozilla.org/en-US/docs/Tools#Join_the_Developer_tools_community>,

> not the Firebug discussion group.

...This leads to the question about the future of this list. My
impression was, that the mailing list from the link above
( https://lists.mozilla.org/listinfo/dev-developer-tools ) is more
targeted to developers, not so much for the general user. The google
group is a mirror of the mailing list. On stackoverflow there are not
much answers and twitter is a place rather for announcements than for
discussion.

My personal preference would be to have a user-to-user list, where some
of the devs are also present. What do you think?

--
Erik Krause
http://www.erik-krause.de

[Lawrence San]

I agree with you, Erik, but I think your use of the word "developer" might be a little confusing to some people. I know what you mean, but many of us "users" think of ourselves as "developers" too -- that is, web developers.

I've liked this list/group for a long time, and I'd love to see it transform itself rather than just go away. Instead of being the "Firebug group", it could evolve into the group for web developers whose primary devel browser is Firefox. So over time we'd gradually discuss Firebug less and the FF DevTools more, and also allow discussion of other Firefox-based web devel tools (various extensions and so on).

In other words, broaden the focus of this group rather than kill it.

[Sebastian Zartner]

On Monday, December 19, 2016 at 7:22:16 PM UTC+1, Erik Krause wrote:

Am 19.12.2016 um 11:23 schrieb Sebastian Zartner:
> PS: If your question is only related to the Firefox DevTools, you should
> better ask in their communication channels
> <https://developer.mozilla.org/en-US/docs/Tools#Join_the_Developer_tools_community>,
> not the Firebug discussion group.

...This leads to the question about the future of this list. My
impression was, that the mailing list from the link above
( https://lists.mozilla.org/listinfo/dev-developer-tools ) is more
targeted to developers, not so much for the general user. The google
group is a mirror of the mailing list. On stackoverflow there are not
much answers and twitter is a place rather for announcements than for
discussion.

You seem to be correct about that.
 

My personal preference would be to have a user-to-user list, where some
of the devs are also present. What do you think?

FYI, I've asked on the DevTools IRC channel two days ago and got some positive feedback. They told me they will talk about that in an upcoming meeting. I'll let you know once I have more info about that.

On Tuesday, December 20, 2016 at 6:21:04 AM UTC+1, San wrote:

In other words, broaden the focus of this group rather than kill it.

That probably won't work, because users expect a "Firebug" named group to be related to Firebug. Also, I want the DevTools people to help out on this group. If its focus is broader than the Firefox DevTools, I fear they won't follow the group enough, as it will be out of scope of their business. So, I'd rather vote for a group only related to the Firefox DevTools.
Furthermore, I think a list like you outlined it already exists with https://groups.google.com/forum/#!forum/mozilla.dev.web-development.

Sebastian

[Lawrence San]

Sebastian Zartner <sebastia...@gmail.com> wrote:

Furthermore, I think a list like you outlined it already exists with https://groups.google.com/forum/#!forum/mozilla.dev.web-development.

​I just took a quick look at it. It seems to be filled with spam for sneakers, jackets, and religion. No thanks.

[Sebastian Zartner]

You're right, looks like there's no moderation. :-( I have to admit I didn't have a deeper look at the threads before. I've marked some of the messages as spam now, but it looks like the group got abandoned a year ago, probably due to the spam messages. On the other hand, the spam messages are quite old already. So, I guess this group could be revived. Though feel free to create a new one if you like to.

Sebastian