ローカルフォルダの追加

Sourcesパネルに選択したフォルダが追加される

リソースの編集の自動反映を有効にする

ブラウザのリロードなしに編集・保存したファイルが反映されるようになる(htmlはむり？

ページ読み込み時の状態
myFuncは空

編集してctrl(cmd)+sで保存

ブラウザの更新をせずにコンソールからmyFuncを呼び出してみると反映されてるのを確認できる

ファイルを保存する度に更新履歴が作られる

もどる！

chrome://flags/を開いてデベロッパーツールのテストを有効にするを有効にするとDevToolsでSassのサポート機能が追加されます。

再起動後にDevToolsのSettingsに"Experiments"という項目がでてくるのでその中の"Sass stylesheet debugging"にチェックをつけて再起動します。

そのあと

"General"の中の"Sources"のところにある "Auto-reload CSS upon Sass save"にチェックを入れます。
（"Enable source maps"にもチェック

Sourcemapを使うにはSassのコンパイル時に--sourcemapオプションをつけてwatchする必要があります。
(Sassのpre version?じゃないと出来ない?詳しくは参考URL参照…)

Elementsパネルの要素のスタイルのところが'~.scss:5'とかになってればSourcemapでスタイルとsccsがリンクした状態になります。

この状態でworkspaceにある.scssファイルを編集すると保存しなくてもスタイルが反映されるようになる
(らしい。windowsの環境構築で折れたので確認できず。macでできたら追記します…

詳しいことはURLの先にある動画とかで見れます。
Developing With Sass and Chrome DevTools

Experimentsにある"Enable text editor autocompletion"にチェックをいれるとオートコンプリートが使えます

文字入力してctrl+spaceを押すとそのファイル内にある単語の中から同じ文字列になりそうなやつが補完されます

簡単な使い方としてはこんな感じです。

コードの補完がないのでちょっとした確認や表示の修正なんかには使えそう。
今回しっかり確認できなかったSassの即時反映なんかはイイ感じな気がする。

今後拡張されればデキる子になりそうな予感。