是否可以通过Chrome devtools中的“元素>样式”标签直接打开本地文件？

Question

我正在将Chrome devtools持久性功能与browser-sync和sass结合使用。

我将一个Workspace指向我的scss文件夹，并且可以从Chrome编辑scss文件，并正确创建所有css文件，将它们实时应用于浏览器并保存在硬盘中。 但是，当我在Elements > Styles选项卡上选择一个元素并进行一些更改时，更改后的文件为http://localhost:3000...，因此不会保留更改。然后，我仍然必须在Sources标签中找到本地文件才能复制这些更改。

我不确定这是否是最好的选择，但是我们是否可以直接从Elements > Style标签而不是http://localhost:3000...文件打开本地文件，或者以某种方式自动复制将http://localhost:3000...文件转换为本地文件，工作流程将变得更加轻松快捷。

即使使用某些应用程序/扩展程序，有人知道如何做到这一点吗？

更新：

从Rohit的答案中，我发现，如果我在devtools设置中关闭了css source maps，那么它会正确同步，在Elements > Style上显示绿色圆圈并保留我的更改，尽管它仍然指向{{ 1}}文件。
但是，然后它仅更改此文件，而不更改特定的http://localhost:3000...style.css文件，如果我运行partials/*.scss编译器，它将用旧代码覆盖sass。
在Chrome上使用css时，我可以正确找到我的部分scss，但是没有显示绿色圆圈，因此无法同步，也不会保留更改。

问题似乎出在同步css source maps文件而不是scss文件上。

我正在尝试将css指向根Workspace文件夹，还尝试将其指向文件beeing的直接父目录，但仍无法正确同步。

Answer 1

这是黑暗中的镜头，但是，如果您从Devtools>“源”选项卡>“文件系统”选项卡>“将文件夹添加到工作空间”中添加正在处理的文件的父文件夹，我相信。 像这样：

然后导航到您的文件夹，并添加重新加载页面。重新加载后，如果您看到绿色 像这样：

这意味着它已同步并且将更新，而无需转到“源”选项卡。

Answer 2

将我项目的根目录正确添加到Workspace同步的scss文件中。现在，当我单击Element > Styles选项卡上的元素时，Quick source将按照正确的scss规则打开正确的文件，但不会遵循我在Element > Styles选项卡中所做的更改（如它确实使用纯css），但我仍然需要将更改复制到Quick source或直接在其中进行编辑，保存并等待sass编译以在屏幕上应用更改。

现在，工作流程要容易得多，但是我并没有选择它作为正确的答案，因为还不如CSS那样活着，也许有人知道如何做最后一步。

PS：此设置​​不需要browser-sync，只需编译sass即可，Chrome会自动应用更改。