[Chrome] DevToolsのWorkspaceでローカルプロジェクトをライブエディット&デバッグする

### ※ 執筆時点ではCanaryで利用できます

ChromeのDevToolsに「Workspace」という機能が追加されました

Workspaceを使うとDevToolsをエディタとして使うことができます

## ローカルフォルダの追加

* DevToolsを開いて歯車アイコンからSettingsを開くと項目に"Workspace"があるので選択
* Add folderでフォルダを選択
* リソースへのアクセス許可を求められるので許可を選択

![ss01.png](https://qiita-image-store.s3.amazonaws.com/0/17969/0259dfa7-c1f3-4daf-13c2-224b7504e209.png)

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

![ss02.png](https://qiita-image-store.s3.amazonaws.com/0/17969/f73a21a8-e374-6ed5-ffaa-bd87ae213397.png)

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

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

* 右クリックメニューから"Map to network resource"を選択

![ss03.png](https://qiita-image-store.s3.amazonaws.com/0/17969/568b7c31-a246-08c9-4f6d-90dff6cd8021.png)

* ダイアログでDevToolsの再起動を求められるので許可(Chromeの再起動ではない)

![ss04.png](https://qiita-image-store.s3.amazonaws.com/0/17969/c42b1ab7-d461-848f-e4a1-8aa097b386d8.png)

* 右側のエディタ部分でCSSを編集すると保存していなくても反映される

![ss06.png](https://qiita-image-store.s3.amazonaws.com/0/17969/d722208b-88d9-6a28-f5f3-26a69551bece.png)

## JSの変更も更新なしで反映される

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

![スクリーン05.png](https://qiita-image-store.s3.amazonaws.com/0/17969/d0b41273-d333-1d34-1da8-5aca7f9965ea.png)

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

![スクリーン06.png](https://qiita-image-store.s3.amazonaws.com/0/17969/c86ce93c-bd6b-c56e-806b-eec89f9a5f71.png)

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

![スクリーン07.png](https://qiita-image-store.s3.amazonaws.com/0/17969/01f9457c-8336-2613-231f-f996a3e99d0c.png)

## 変更履歴を表示する

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

* 右クリックから"Local modifications"を選択
* 画面下に履歴がでてくる

![スクリーン03.png](https://qiita-image-store.s3.amazonaws.com/0/17969/8f974931-8694-caa1-7f2a-5350b21249fd.png)

![スクリーン08.png](https://qiita-image-store.s3.amazonaws.com/0/17969/893380fa-56c3-e269-5688-598ab3b3ef60.png)

## 変更履歴から元に戻す

* 戻したい履歴の"apply revision content"をクリックすると

![スクリーン09.png](https://qiita-image-store.s3.amazonaws.com/0/17969/e2a93076-97c1-8f19-6df4-ec6a7f216d39.png)

もどる！

![スクリーン10.png](https://qiita-image-store.s3.amazonaws.com/0/17969/be5b9526-89f6-0bdb-867b-a44d5df1ca81.png)

## Sassの編集と自動反映

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

![スクリーン11.png](https://qiita-image-store.s3.amazonaws.com/0/17969/d2f7d16d-0ff6-abbb-96eb-c96273b171ca.png)

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

![スクリーン13.png](https://qiita-image-store.s3.amazonaws.com/0/17969/90b1eb2c-f65f-a2a4-ce37-ebcd1c472601.png)

そのあと

![スクリーン14.png](https://qiita-image-store.s3.amazonaws.com/0/17969/b747430f-05e3-9e48-3a50-7b67db871e95.png)

"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](http://net.tutsplus.com/tutorials/html-css-techniques/developing-with-sass-and-chrome-devtools/)

## 微妙なAutocomplete機能

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

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

---

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

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

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

---

参考：
[Improving Your 2013 Productivity With The Chrome DevTools](https://www.youtube.com/watch?v=kVSo4buDAEE)
[Editing Local Projects With Chrome DevTools Workspaces](https://plus.google.com/+AddyOsmani/posts/CYXzDfg3jhC)
[First Look: Workspaces - Simplifying Your Find & Fix Workflow With The Chrome DevTools](https://plus.google.com/u/0/+GoogleChromeDevelopers/posts/644qQuBKZeL)
[Developing With Sass and Chrome DevTools](http://net.tutsplus.com/tutorials/html-css-techniques/developing-with-sass-and-chrome-devtools/)