前回に引き続きデベロッパーツール関連です。
どうでも良いですがデベロッパーツールって言いにくいですよね... Devtoolsと書いている記事もあったのこの呼び方の方が言いやすいですね。 でも人と話す時に「Devtoolsの〇〇を...」とか話して通じるのだろうか...？ もし通じなかった場合はなんかすごく恥ずかしくなりそうですね。 誰かデベロッパーツールの言いやすい別の呼び方を教えてほしい。
前回の記事ではLocal Overridesという機能について書きましたが、もっと便利そうな機能を見つけたので紹介します。
結論
デベロッパーツールのWorkspaces機能を使えばローカルPCのファイルを直接編集できる
Workspacesとは
ファイルシステム機能を使用すると、プロジェクトのバージョン管理された既存のソースコードをchromeDevToolsから直接変更できます。chrome DevToolsは、コードを同じ場所で編集および実行できるIDEと考えてください。
なんとデベロッパーツールからローカルのファイルを直接編集できちゃいます。 ちなみにLocal OverridesはアップロードされているCSSを複製して編集を行います。 編集するファイルが複製ファイルか元ファイルかという点が大きく異なります。 直接ローカルのファイルを編集できる事で編集を元ファイルにマージする手間が無くなるのでLocal Overridesよりも使う機会が増えそうです。
Workspacesの使い方
1. 編集先のディレクトリを選択する
cmd + opt + iでデベロッパーツールを開くSourcesタブ内のFilesystemタブを選択し、Add folder to workspaceで編集するプロジェクトのディレクトリをローカルPC内から選択するデベロッパーツールでは[選択したディレクトリ名]へのフルアクセスがリクエストされます。という表示がブラウザ上部に表示されるので許可を選択
2. デベロッパーツール上でローカルPCのファイルを編集する
1.Filesystem タブの編集先ディレクトリの中から編集するファイルを選択
2. 編集後にcmd + s でファイルを上書きする
3. Workspaces での編集を終了する
Filesystemタブに表示されている編集先ディレクトリのルートディレクトリを選択- ディレクトリを選択した状態で右クリックして
Remove folder from workspaceを選択 Are you sure you want to remove this folder?でOKを選択するとローカルPCのファイルとの接続が終了する
Local OverrideとWork spacesの使い分け
どちらの機能もページをリロードしてもデベロッパーツールで編集したCSSが保持される点は共通です。 編集するファイルが複製したファイルか元ファイルなのかという点が大きく異なるので以下のように使い分けると良いかもしれません。
- Local Overrides: 一時的なスタイル確認、リロード時のスタイル確認、ファイルをダウンロードしたい
- Workspaces: スタイルを確認しながらガッツリCSSを書く
メインで使うのはWorkspaces になりそうですが実際に使ってみないとなんとも言えないです。
まとめ
今後のJavaScriptのプラクティスでもデベロッパーツールを使う頻度は高まりそうなので、この機会に便利な機能を知れて良かった。 エディタと同じぐらいデベロッパーツールも使いこなせるようになりたい！
参照
Edit and save files with Workspaces - Chrome Developers
Chrome Overrides and Workspaces. Chrome developer tools is an… | by Saad Patel | Medium
