html - 我想从元素选项卡的 Chrome 开发工具编辑我的 sass 文件,这可能吗?

标签 html css debugging google-chrome-devtools

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

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

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

最佳答案

目前这是一项实验性功能。它隐藏在标志后面,因为它可能不稳定并破坏东西。如果您想立即尝试,请执行以下操作:

  1. 转到您的多功能栏中的 chrome://flags/#enable-devtools-experiments
  2. 启用实验性 DevTools 功能的标志
  3. 重启浏览器
  4. 打开 DevTools 并转到“设置”,然后左侧有一个新的Experiments 选项卡可用
  5. 在实验选项卡中,打开 Live SASS 选项
  6. 重启开发者工具

您现在应该将 Elements 面板中的更改保留到您的 Sass 中,只要它是正确的源映射。

Paul Irish 在他的 I/O 2016 演讲部分中介绍了此功能(以及其他)Accelerating Your Workflow .

关于html - 我想从元素选项卡的 Chrome 开发工具编辑我的 sass 文件,这可能吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46360983/

相关文章:

php - ZF2 select 不显示任何结果

html - !IE 的条件注释会中断旧版本的 Firefox

javascript - Canvas 中的clearRect问题

javascript - 从不同的页面编辑 div 内容

javascript - 如何定位div

css - 如果选中 radio ,则标记背景

html - z-index 和下拉菜单 IE11 的问题

javascript - 由于与其他元素的干扰,Bootstrap 模态窗口无法打开

android - 是否可以检测到 Android 设备上的 USB 调试?

node.js - Meteor npm 脚本的 WebStorm Debug模式