着る毛布活躍中の@kyo_agoです。
この記事はChatWork Advent Calendar 2014 24日目です。
Workspaceとは
みなさんChromeのDevToolsにあるWorkspacesという機能をご存知でしょうか？
実はこの機能2013年にはChrome stableに入っていますが、あまり話題になっていないようなので今回ご紹介したいと思います。
まず、Workspaceを紹介する前にLive editの機能を紹介したいと思います。
Live editとはChrome DevToolsのSourcesパネル内でコードを直接編集できる機能で、ここで変更した内容はページをリロードしなくても即座にページ上に反映されます。
ただ、Live editはページをリロードすると編集内容が消えてしまうため、修正した内容を取っておくには手動でローカルファイルにコピペする必要がありました。
Workspaceとは簡単に言うとこのLive editで修正したコードをローカルファイルに反映させる機能で、一度設定するとLive editで修正した内容を毎回コピペすること無く自動的にローカルファイルへ反映してくれます。
使い方
実際に使う手順は以下のとおりです。
- Workspaceで扱うディレクトリを設定
最初にWorkspaceで扱いディレクトリを選択しましょう。
ここで選択したディレクトリが実際にファイルを選択する場合の対象になります。
- 選択したディレクトリの変更を許可
選択したディレクトリをDevToolsが変更することに関して警告が出るので許可します。
これで選択したディレクトリ以下のファイルをネットワーク上のファイルとマッピングすることが可能になります。
- ネットワーク上のファイルとローカルファイルをマッピング
ここからは各サービスごとの設定を行います。
Workspaceで修正したいネット上のファイルを選択し、コンテキストメニューから「Map to File System Resource…」を選択します。
- マッピングするファイルの選択
1)で選択したディレクト内から3)で選択したファイルとマッピングしたいファイルを選択します。
初期状態で同じファイル名が指定されていますが、ファイル名は一致しなくても構いません。
- 変更の保存
この状態でSourcesパネル上でWorkspaceの対象となっているファイルを編集するとファイル名の先頭に*がつきます。
ファイル名が*が付いている状態でCmd+s（or コンテキストメニューからSaveを選択）すると変更がローカルファイルに保存されます。
問題点
- Eventの中しか置き換えられない
Workspaceで内容を書き換えてリロードしても、Event外のコードは実行されません。
これに関してはWorkspace対象のディレクトリをLocalProxyでマッピングしておくとリロード時にも正しくコードが実行されるようになります。
- 動きが不安定
ファイルの選択や再読み込み、ローカルファイルのマッピング、マッピングの解除が不安定で上手く動かないことが多いです。
ファイルの編集、保存に関してはわりと成功するので割りきって使うほうがいいかもしれません。
最後に
個人的にこの機能は1年以上前から注目しているのですがちょっとづつ改善されているのでまとめてみました。
0-9, ぼくがかんがえるさいきょうのWorkspace
実際この機能をまともに使ったことはないんですが、DevToolsの開発環境化は個人的にも未来があると思うので今後も注目していこうと思います。