有没有办法直接从Chrome devtools中的“Elements> Styles”选项卡打开本地文件？

Question

我正在使用browser-sync和sass的Chrome devtools持久性功能。

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

我不确定这是否是我们能得到的最好但如果我们可以直接从Elements > Style选项卡而不是http://localhost:3000...文件打开本地文件或以某种方式自动将http://localhost:3000...文件中的任何更改复制到本地文件，工作流程将是均匀的更轻松，更快捷。

有没有人知道如何实现这一点，甚至使用一些app / extension？

更新：

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

问题似乎是同步scss文件而不是css。

我正在尝试使用指向我的根Workspace文件夹的scss，也尝试将其指向编辑文件的直接父级，但仍未正确同步。

Answer 1

这是一个黑暗中的镜头，但我相信，如果您从Devtools> Sources选项卡> Filesystem选项卡> Add folder to workspace中添加您正在处理的文件的父文件夹。像这样：qazxsw poi

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

这意味着它已同步并将在不进入“源”选项卡的情况下进行更新。

Answer 2

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

工作流程现在要容易得多，但我不是选择这个作为正确的anwser，因为它还没有“像css一样活”，也许有人知道如何做到最后一步。

PS：在这个设置中不需要sass，只需要编译browser-sync和Chrome自动应用更改。