firefox-developer-tools

Is there an equivalent of Chrome's DevTools' Sources panel in Firefox DevTools?


In the below image, as you can see, there is a Sources tab that allows me to browse through my project files.

*Sources* tab in Chrome DevTools

Sources shown in Chrome DevTools

Also, my Firefox DevTools do not show a Storage tab. I believe that is the tab that will allow me to browse my project files. How do I enable it?

Sources shown in Firefox DevTools

This is my actual project structure:

Project structure in file system


Solution

  • The Firefox DevTools don't have a panel that shows all files at one place the way the Chrome DevTools do it. Though there are different specialized panels showing you the same info. E.g. the Style Editor shows you all CSS sources. The Network Monitor shows all requested files with focus on network request information.

    The Debugger is meant to debug JavaScript. So, it only displays JavaScript sources.

    The Storage panel is enabled by default in newer versions of the Firefox DevTools. To enable the Storage panel in older versions of Firefox you need to switch to the settings and click the checkbox besides Storage:

    Storage panel activation

    Though the purpose of the Storage panel is to display storages like cookies, the IndexedDB, the local and session storage. It does not display files.