我想从元素选项卡中从chrome dev工具中编辑我的sass文件，这是可能的

Question

在我的项目中，我有一个SASS文件，该文件通过节点sass设置了Sourcemappath。我正在使用node-sass来编译我的sass文件。我在系统上的映射.css文件。因此，我通过源面板进行的任何更改都将文件保存在磁盘上。它是由节点 - 萨斯（Node-sass）编译的。我在任何地方都没有看到重新加载自动生成的CSS，所以我认为它默认情况下。

我想保存我在元素面板上所做的更改。当我从Element面板中单击CSS文件（这是SCSS文件，通过SourceMap工作），它没有我的更改。

可以从元素面板中保存我的更改。我进行了一些更改，但在源面板中没有看到。当我刷新时，我仍然可以看到我的更改，但不会反映在文件中。

Answer 1

这是当前的实验功能。它隐藏在国旗后面，因为它可能不稳定并破坏东西。如果您想立即尝试，请执行以下操作：

1. 转到Omnibar中的chrome://flags/#enable-devtools-experiments
2. 启用实验devtools功能的标志
3. 重新启动浏览器
4. 打开DevTools并转到设置，然后可以使用一个新的Experiments选项卡
5. 在实验选项卡中，打开Live SASS选项
6. 重新启动DevTools

现在，只要源映射正确，您应该在元素面板中进行更改。

。

保罗爱尔兰人（Paul Irish

2020年1月更新-Chrome版本79 -Mac 10.14.6

1. Goto Chrome Dev工具栏
2. 设置
3. 工作区
4. 单击"添加文件夹"按钮
5. 添加您的工作目录路径
6. goto'Erces'选项卡 - 您将在控制台和网络选项卡之间找到这一点
7. 命令 P（MAC）搜索所需的文件 - 示例-scss
8. 进行代码更改并验证

我还发现您可以更改开发工具栏以及编辑器，它们将被同步:)

我不相信您想要什么。您可能想查看诸如livereload之类的选项，以了解这种行为。您可以在IDE，编译和LiverEload中更改代码，将检测到文件系统上的.CSS文件的更改，并在浏览器中重新加载。