Is there an equivalent to Chrome's DevTools 'workspaces' in Firefox?

Question

As in title: Is there an equivalent to Chrome's DevTools 'workspaces' in Firefox?

If not - how else can I work with source maps if my source js and scss files are outside webroot? Can I save changes directly to the filesystem?

Huntington

I don't think I quite understand why it matters if your sources are outside of webroot -- the served sources still presumably come with a //# sourceMappingURL comment. You can just use the normal devtools with sourcemaps if all the paths (pointing to sourcemaps and unminified sources) specify the correct base domain, no? Firefox has the scratchpad, but I'm not sure if that helps your problem. – Scant

The use case is to serve files locally and tell Firefox where to find the web root on the local filesystem, to allow editing and saving files with DevTools. Is there any way to do that? – Exemplary

Answer 1

See edit below 2022-11-07 for updated answer

I've also been looking into this and as far as I can tell there is no way to map files to the filesystem so that saved files are automatically saved in the correct location.

You can however edit your css (or scss, less etc) files in the Style Editor and then save them. This is a manual process though and a save dialog is opened each time.

If your sourcemaps are set up then the clicking the link to the source file in web inspector will open it in the Style Editor tab. From there you can save the file but you'll be asked each time where to save the file.

I'm hoping I'm wrong though as I'd really like to be able to press the save shortcut (or click the save link) in the Style Editor and have my file saved to the correct location without a save dialog in the way.

2022-11-07

I've done some further investigation and it seems that as long as the file paths are correct in the source maps then saving does work. I was having a lot of problems with webpack outputted source maps, Windows version of Firefox and WSL2. My files are in WSL2 and Firefox in Windows can only find them when prefixed with five forwards slashes e.g. file://///wsl$/path/in/wsl2/to/files Unfortunately webpack always rewrites this to three forward slashes file:/// and Firefox refuses to load the files. You can test this by pasting into Firefox.

Then I tried running Firefox within WSL2 using the new(ish) ability to run GUI applications. Once Firefox is within the same environment I can get webpack to output paths from root and Firefox is able to save these files without popping up a dialog box.

Here is an example of how to set the sourcemap file paths using Laravel Mix, running in a Ubuntu environment:

// @file webpack.mix.js

const mix = require('laravel-mix');
mix.webpackConfig({
  output: {
    devtoolModuleFilenameTemplate: info => {
      let path = '/home/MyUser/websites/example/webroot/path/to/css/';
      let filepath = `file:///${path}${info.resourcePath.slice(2)}`;
      return filepath;
    },
  }
})

To summarise, it is all about the correct sourcemap file paths

Cinereous

Answer 2

try ctrl+shiht+c maybe this helps you.

Aland

Answer 3

Have you tried the following setting:

• Chrome -> Developer Tools -> Settings (F1 = cog icon) -> Workspace -> Add Folder...

Here is some additional information on using source maps

• https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps

Styliform

The question is about where the equivalent setting would be, in ~Firefox~ – Selfsuggestion