我想从元素标签中的Chrome开发工具编辑我的sass文件,这可能吗?

时间:2017-09-22 09:10:59

标签: html css debugging google-chrome-devtools

在我的项目中,我有一个sass文件,我通过node-sass设置sourcemappath。我正在使用Node-sass来编译我的sass文件。我在我的系统上映射了我的.css文件。所以我通过源面板所做的任何更改都会将我的文件保存在磁盘上。它由node-sass编译回来。我没有看到在任何地方重新加载我自动生成的CSS,所以我认为它默认开启。

我想保存我在元素面板上所做的更改。当我从元素面板(这是scss文件,通过sourcemap工作)单击css文件时,它没有我的更改。

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

3 个答案:

答案 0 :(得分:2)

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

  1. 转到您的omnibar中的chrome://flags/#enable-devtools-experiments
  2. 启用Experimental DevTools功能的标志
  3. 重新启动浏览器
  4. 打开DevTools并转到“设置”,然后左侧会出现一个新的Experiments标签
  5. 在实验标签中,启用Live SASS选项
  6. 重启DevTools
  7. 现在,您应该在“元素”面板中将更改保留在Sass中,只要它是正确的源映射。

    保罗·爱尔兰在他关于Accelerating Your Workflow的I / O谈话部分中介绍了这一特征(以及其他内容)。

答案 1 :(得分:0)

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

  1. 转到Chrome开发者工具栏
  2. 设置
  3. 工作区
  4. 点击“添加文件夹”按钮
  5. 添加您的工作目录路径
  6. 转到“源”标签-您将在控制台和网络标签之间找到它
  7. 命令+ P(mac)搜索所需文件-示例-main.scss
  8. 进行代码更改并验证

我还发现,您可以在开发工具栏和编辑器中进行更改,它们将被同步:)

答案 2 :(得分:-1)

我不相信你想要的东西是可能的。您可能希望查看LiveReload等选项以了解此行为。您可以在IDE中更改代码,编译,livereload将检测您对文件系统上已编译的.css文件的更改,并在浏览器中重新加载。