Search code examples
javascriptfirefoxfirefox-developer-tools

How to show sources as a tree structure in Firefox dev tools


I'm trying to debug my javascript code with Firefox developer tools. While Chromium shows the files and folders in a nice tree structure, Firefox displays all the source files in a long list, which makes it hard to find the right file.

Is there any plugin/add-on or similar for Firefox that can help to show the sources in a more Chromium-ish way?

Sources in Chromium:

Sources in Chromium

Sources in Firefox:

Sources in Firefox


Solution

  • Firefox 56 (currently Nightly) has a new debugger UI, which displays the scripts in a tree structure similar to the one in the Chrome DevTools besides other features like allowing to open several files in tabs:

    New Firefox DevTools debugger frontend