sassファイルをChrome デベロッパーツールから直接編集・保存したい

Question

cssファイルをデベロッパーツールで直接編集・保存する方法は知っているのですが、sass(scss)を使っているため、上書きされてしまいます。
デベロッパーツールを使いsassの形式で編集,変更を保存することはできるのでしょうか？

コンパイルができないので難しそうだと思っておりますが、もし方法をご存知の方がいらっしゃれば教えていただきたいです。

Answer 1

コンパイル時にsourcemapを作成していればChromeは標準でデバック可能です。
https://www.xenophy.com/sass/4150

【私の開発環境のサンプル】

※もちろん値も変更可能です。

Comments

[fuwamori]

キャプチャ付きでありがとうございます！
sourcemapを作成し、キャプチャで頂いた画面のように表示されているのですが、要素や属性を変更すると.scssの部分が.cssに置き換わってしまい、デバッグできません...

sorcemapの設定が間違っているのでしょうか。codekitのGUI画面からマップを作成したのですが、gulpなどを使って設定したほうがよいのでしょうか？

もしもお使いのツール等がありましたら教えていただけますでしょうか。

[bananacoffee]

確かに仰るとおり変更するとCSSに変わってしまいますね...
すみません、言われるまで気づきませんでした。
そもそもChromeにコンパイル機能があるわけではないので仕方ないのかもしれません。

私の場合はNetBeansでscssファイルを保存すると勝手にコンパイルするようになっているので、その後更新ボタン・・・という原始的な方法でやっております。
お力になれず申し訳ありません。

[fuwamori]

自分のjsonの記述ミス等で挙動がおかしくなったのではなくて安心しました。
よくわからないままに触っている部分がありましたので...
保存ーリロードで対応していこうと思います。
丁寧な回答をありがとうございました！