Search code examples
firefoxfirefox-developer-tools

Why do Code Line Numbers Not Show in Inspector?


Is there a way to get numbers to show for the lines in the Inspector pane? I know Chrome does this by default, but I can't see an option for this in v. 109.0 of Firefox.

Looked in settings to get numbers to show.


Solution

  • You're probably mixing up things here. Both browsers provide two views to the source of your page.

    Live DOM view

    In Firefox this is called the Inspector, Chrome's name for it is Elements.

    Those are accessed by right-clicking a page and choosing Inspect from the context menu or by pressing Ctrl+Shift+C, for example.

    And those don't have an option to show line numbers, as far as I know. The reason for that is that those panels show the current DOM structure of a page and not the HTML source. That means, they show a parsed and interpreted version of the HTML source including any changes made to the structure afterwards. So, if you add an element to the structure via JavaScript, for example, those view reflect that change. And an author doesn't gain much by seeing line numbers on such a dynamic view because they don't really refer to anything.

    The use case for this view is to see and manipulate the current state of the page's DOM (Document Object Model).

    HTML source view

    Besides the live DOM view of a page both browsers do have a way to view the initial unchanged HTML source of a page. And those views also do show line numbers.

    In both browsers this feature is accessible e.g. via the option View Page Source in the page's context menu or by pressing Ctrl+U.

    Firefox: View Page Source in Firefox

    Chrome: View Page Source in Chrome

    The use case for this view is to see the original source of a website as it was sent from the server or loaded locally.