44

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?

Improve this question
2
  • 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.
    – bcr
    Mar 12, 2015 at 21:19
  • 2
    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?
    – Roy Tinker
    Nov 15, 2017 at 22:08

3 Answers 3

Reset to default
0

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.

Screenshot showing save dialog

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.

enter image description here

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

Improve this answer
0

try ctrl+shiht+c maybe this helps you.

Improve this answer
-5

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

Improve this answer
1
  • 3
    The question is about where the equivalent setting would be, in ~Firefox~
    – AndyMcoy
    May 4, 2022 at 13:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.