Firefox 中是否有与 Chrome 的 DevTools “工作区”等效的“工作区”？

您是否尝试过以下设置：

• Chrome -> 开发人员工具 -> 设置（F1 = 齿轮图标） ->工作区 -> 添加文件夹...

以下是有关使用源映射的一些其他信息

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

请参阅下面的编辑 2022-11-07 以获取更新的答案

我也一直在研究这个问题，据我所知，没有办法将文件映射到文件系统，以便保存的文件自动保存在正确的位置。

但是，您可以在样式编辑器中编辑 css（或 scss、less 等）文件，然后保存它们。不过，这是一个手动过程，每次都会打开一个保存对话框。

如果已设置源映射，则在 Web 检查器中单击指向源文件的链接将在样式编辑器选项卡中打开它。从那里您可以保存文件，但每次都会询问您保存文件的位置。

我希望我错了，因为我真的很希望能够在样式编辑器中按下保存快捷方式（或单击保存链接）并将我的文件保存到正确的位置，而不会出现保存对话框。

2022-11-07

我做了一些进一步的调查，似乎只要源映射中的文件路径正确，那么保存就可以了。我在 webpack 输出的源映射、Windows 版本的 Firefox 和 WSL2 方面遇到了很多问题。我的文件在 WSL2 中，而 Windows 中的 Firefox 只有在以五个正斜杠为前缀时才能找到它们，例如 不幸的是，webpack 总是将其重写为三个正斜杠，并且 Firefox 拒绝加载文件。您可以通过粘贴到 Firefox 中来测试这一点。file://///wsl$/path/in/wsl2/to/filesfile:///

然后我尝试在 WSL2 中运行 Firefox，使用新的 （ish） 功能来运行 GUI 应用程序。一旦Firefox处于同一环境中，我就可以让webpack从root输出路径，Firefox能够在不弹出对话框的情况下保存这些文件。

以下是如何使用 Laravel Mix 设置 sourcemap 文件路径的示例，在 Ubuntu 环境中运行：

// @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;
    },
  }
})

总而言之，这完全与正确的 sourcemap 文件路径有关

试试 Ctrl+shiht+c 也许这对你有帮助。