我按照Gogle提供的说明设置了源图：https://developers.google.com/chrome-developer-tools/docs/css-preprocessors
源图正在工作，我可以在“Elements选项卡”中看到.scss源链接 .
但我有两个问题：
1 - 当我在“Elements选项卡”中编辑CSS属性时，指向.scss的链接会中断，DevTools会显示指向已编译的.css文件的链接 .
2 - 当我按住“元素”选项卡中的CSS属性时，“源”选项卡将成功打开以显示相应的.scss文件 . 当我更改DevTools中的文件并尝试保存它时 - DevTools说该文件已保存，但它实际上并没有保存在磁盘上（似乎它被保存在其他地方） . 所以sass watch不会更新.css，因为.scss文件实际上并没有保存在磁盘上 .
我在用：
-Chrome 33.0.1750.154 m
- 通过3.3.4
-SimpleHTTPServer
1 回答
在文章中找到答案：https://medium.com/what-i-learned-building/b4daab987fb0
为了能够在Chrome DevTools中编辑源文件，需要：
将项目文件夹添加为工作区（DevTools - 设置 - 工作区 - 添加文件夹）
将webserver提供的源文件映射到本地文件：
Ctrl单击任何css属性以打开服务源 . 在“源”树中，右键单击该文件，然后选择“映射到网络资源” .
Chrome似乎会自动映射文件夹中的所有其他资源 . 现在，您可以从DevTools实时编辑源文件 .
如果您希望Chrome在更改源文件时自动更新网站，请不要忘记在“常规”选项卡中启用“自动重新加载生成的CSS” .