标题所述:Firefox中是否有类似Chrome DevTools“工作区”的等效功能?
如果没有-如果我的源JS和SCSS文件在Webroot之外,我该如何使用源映射?我能直接将更改保存到文件系统吗?
标题所述:Firefox中是否有类似Chrome DevTools“工作区”的等效功能?
如果没有-如果我的源JS和SCSS文件在Webroot之外,我该如何使用源映射?我能直接将更改保存到文件系统吗?
请参见下面的编辑2022-11-07,以获取更新的答案
我也一直在研究这个问题,据我所知,没有办法将文件映射到文件系统,以便自动将保存的文件保存在正确的位置。
但是,您可以在样式编辑器中编辑您的CSS(或SCSS、LESS等)文件,然后保存它们。不过,这是一个手动过程,每次都会打开保存对话框。
如果您的源映射已设置,则在 Web 检查器中单击源文件链接将在“样式编辑器”选项卡中打开它。从那里,您可以保存文件,但每次都会被要求选择保存位置。我希望我是错的,因为我真的很想能够在样式编辑器中按下保存快捷键(或单击保存链接),并将我的文件保存到正确的位置,而不需要弹出保存对话框。
2022年11月7日
我进行了进一步的调查,发现只要源映射中的文件路径正确,那么保存就可以正常工作。我在使用webpack输出的源映射、Windows版本的Firefox和WSL2时遇到了很多问题。我的文件在WSL2中,而Windows中的Firefox只能在前缀为五个正斜杠的情况下找到它们,例如file://///wsl$/path/in/wsl2/to/files
。不幸的是,webpack总是将其重写为三个正斜杠file:///
,而Firefox拒绝加载这些文件。您可以将其粘贴到Firefox中进行测试。
然后我尝试在WSL2中运行Firefox,使用新的GUI应用程序运行能力。一旦Firefox在相同的环境中,我就可以让webpack从根目录输出路径,而Firefox可以保存这些文件,而不会弹出对话框。
以下是在Ubuntu环境中运行的Laravel Mix设置源映射文件路径的示例:
// @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;
},
}
})
您尝试过以下设置吗:
这里有一些关于使用源映射的额外信息。
//# sourceMappingURL
注释。如果所有路径(指向sourcemaps和未压缩的源文件)都指定了正确的基域,那么您可以使用带有sourcemaps的常规devtools,对吧?Firefox有scratchpad,但我不确定它是否有助于解决您的问题。 - bcr