logo标签列表

在Firefox中是否有类似Chrome DevTools的“工作区”功能？

google-chromefirefoxsource-maps
41

标题所述：Firefox中是否有类似Chrome DevTools“工作区”的等效功能？

如果没有-如果我的源JS和SCSS文件在Webroot之外，我该如何使用源映射？我能直接将更改保存到文件系统吗？

我不太明白为什么源文件在webroot之外是否重要 - 提供的源文件仍然可能带有//# sourceMappingURL注释。如果所有路径（指向sourcemaps和未压缩的源文件）都指定了正确的基域，那么您可以使用带有sourcemaps的常规devtools，对吧？Firefox有scratchpad，但我不确定它是否有助于解决您的问题。 - bcr
2
使用案例是在本地提供文件，并告诉Firefox在本地文件系统中找到Web根目录的位置，以允许使用DevTools编辑和保存文件。有没有什么方法可以做到这一点？ - Roy Tinker
3个回答
0

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

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

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

Screenshot showing save dialog

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

enter image description here

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

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

总而言之，这一切都与正确的源映射文件路径有关。
0
试试按下Ctrl+Shift+C，也许这能帮到你。
-4
2
问题是关于在Firefox中等效设置的位置在哪里。 - AndyMcoy
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接