Html 我想从元素选项卡的Chrome开发工具编辑我的sass文件，这可能吗？

在我的项目中，我有一个sass文件，我通过节点sass设置了sourcemappath。我正在使用节点sass编译我的sass文件。我已经在我的系统上映射了我的.css文件。所以，我通过源代码面板所做的任何更改都会将文件保存在磁盘上。它是由节点sass编译回来的。我没有看到在任何地方重新加载我的自动生成的css，所以我认为默认情况下它是打开的

我想保存我在元素面板上所做的更改。当我从元素面板（即scss文件，通过sourcemap工作）中单击css文件时，它没有我的更改

---

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

我不相信您想要的是可能的。对于这种行为，您可能需要查看LiveReload之类的选项。您可以在IDE、compile和livereload中更改代码，livereload将检测到您对文件系统中已编译的.css文件所做的更改，并将其重新加载到浏览器中。

这目前是一项实验性功能。它隐藏在旗帜后面，因为它可能会不稳定并破坏东西。如果您现在想尝试，请执行以下操作：

转到

chrome://flags/#enable-在omnibar中开发工具实验

为实验性DevTools功能启用标志

重新启动浏览器

打开DevTools并转到设置，然后左侧有一个新的

Experiments

选项卡可用

在“实验”选项卡中，启用

实时SASS

选项

重新启动DevTools

现在，只要正确映射了源代码，就应该将“元素”面板中的更改保留到Sass中

---

保罗·爱尔兰（Paul Irish）在其2016年I/O演讲中介绍了这一功能。

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

转到Chrome开发工具条

背景

工作空间

单击“添加文件夹”按钮

添加您的工作目录路径

转到“源”选项卡-您将在控制台和网络选项卡之间找到它

command+P（mac）搜索所需文件-示例-main.scss

进行代码更改和验证

---

我还发现，您可以在Dev工具栏和编辑器中进行更改，它们将同步：）

当我在源代码面板中更改文件时，Live reload已经可以很好地工作了。唯一的问题是如果我刷新我的更改显示在元素中（Chrome没有将它们淡出，我想这是当我不小心刷新我的页面时重新获得css的功能，但有时会引起一些混乱）。你知道在我单击“全部保存”或类似的东西之前，是否可能不保存对源代码的更改？不，它被称为“live”这是有原因的。事情会立即持久化，因为这是browser.Thx中CSSOM的当前状态，但只有在需要时才保存显然是有意义的。你不想被强迫做这样或那样的事。可以被称为他们想要的^^“Thx，但只有在需要时才存钱显然是有意义的。”只有在某些情况下。Chrome作为一个整体是为了提供最少的选项，从而提供更简单易懂的体验。有一个特定的保存上下文可以选择以多种方式使UX和代码复杂化。在某种程度上，可能需要有一个“自动保存正在破坏应用程序”的问题，以便有一个选项来禁用它并使其成为手动的。我完全不同意。它是一个调用函数的按钮，为您提供了更大的灵活性。显然，我不想自动保存所有更改或根本不保存所有更改。当我喜欢我所看到的东西，而不是事先做出决定时，我想省钱。这没有道理，但是。。你能在“元素（样式）”选项卡中进行更改，使其与文件同步吗？@Reloecc-不，我不认为，如果你能找到解决方法，请告诉我：）该功能在多年前就被删除了，工作有缺陷，但chromium团队说他们不会尝试修复它（我没有atm源代码）。谢谢@Reloecc，希望将来能修复它