有什么方法可以直接从 Chrome devtools 中的“元素 > 样式”选项卡打开本地文件？答案

【问题标题】：Is there any way to open local file directly from 'Elements > Styles' tab in Chrome devtools?有什么方法可以直接从 Chrome devtools 中的“元素 > 样式”选项卡打开本地文件？
【发布时间】：2019-08-16 08:36:33
【问题描述】：

我将 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 上显示绿色圆圈并保留我的更改，尽管它仍然指向 http://localhost:3000...style.css 文件。但是，它只会更改此文件，而不是特定的 partials/*.scss 文件，如果我运行 sass 编译器，它会用旧代码覆盖 css。
使用 Chrome 上的 css source maps 可以正确找到我的部分 scss，但没有显示绿色圆圈，因此它没有同步并且不会保留更改。

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

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

【问题讨论】：

标签： css sass google-chrome-devtools browser-sync

【解决方案1】：

这是在黑暗中拍摄的，但是，我相信如果您从 Devtools > Sources 选项卡 > 文件系统选项卡 > 添加文件夹到工作区添加正在处理的文件的父文件夹。像这样：

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

这意味着它已同步并且无需您转到源选项卡即可更新。

【讨论】：

如果我在 devtools 设置中关闭 css 源映射，它会得到绿色圆圈，尽管它仍然指向 localhost:3000，但仍会保留更改。然而，它只会改变我的 style.css 而不是特定的部分 scss，如果我运行 sass 编译器，它会用旧代码覆盖 css。使用 Chrome 上的源地图可以正确找到我的部分 scss，但不会保留更改。
是的，你只能改变像css这样的非编译css。但是，正如您所知，在使用 sass 之前需要对其进行编译，并且 chrome 不提供编辑 sass 文件然后从中创建 css 然后渲染它的功能。因此，您可能只能使用 css 文件。这可能会对你有所帮助stackoverflow.com/questions/46360983/…
是的，我知道，但 Netbeans 会根据 scss 文件夹中的任何更改自动编译 sass。所以我只需要能够像使用 css 一样同步 scss。更改 devtools 上的 localhost 文件将立即呈现在屏幕上，然后如果文件同步，scss 将在磁盘上更改，Netbeans 将编译 sass。我想这样我就不需要浏览器同步了。
您分享的问题似乎与同一件事有关，但实验选项卡中不再提供 Live SASS 选项。不知道是稳定运行还是掉线了。
是的，我发现这与您的查询最接近

【解决方案2】：

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

现在的工作流程要容易得多，但我没有选择它作为正确的答案，因为它还没有“像 css 一样生动”，也许有人知道如何完成这最后一步。

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

【讨论】：