12 日目の記事です。

スタイルの微調整って Elements パネルでやるじゃないですか。数字変えたり色変えたり。あるいはレイアウト崩れたときに Elements パネルであっちこっちいじりながらデバッグしたりとかも。で、あれこれ変えてよし完璧ってなって、はてどこを変更したっけなと。そういう経験は皆さんおありだと思います。あるよね？

Chrome DevTools でローカルのフォルダーを開いておくと、localhost での変更をそのままファイルに反映、つまり Elements パネルで調整した CSS を保存することができます。

Elements パネルの変更をローカルファイルへ反映

  1. DevTools で対象のローカルディレクトリーを開く
    1. Source パネル → サイドバー（左側） → Filesystem
    2. ディレクトリーを追加
    • “+” ボタンを押すか、フォルダーをドロップ
      1. DevTools からディレクトリーへのアクセス許可を求められるので、許可
      2. ページで利用されるファイルのアイコンに緑色の丸ぽちが付いていることを確認
  2. Elements パネルで目的の要素を選択
    • ここでもファイルのアイコンに緑色の丸ぽちが付いている
  3. Styles ペインで CSS 更新

ローカルのファイルにも保存されていることと思います。

Filesystem でディレクトリーを開いたところ。一部のファイルのアイコンに緑色の丸ぽちが付いている。

Workspaces

この機能、タブには Filesystem と書いてあるけど公式には「ワークスペース」という名称らしい。公式ドキュメントに掲載のガイドはこちら。サンプルプロジェクトもあります。現時点では日本語版はないみたい。

CSS 以外も編集

HTML や JS も Sources パネルから編集できます。

Elements では HTML の編集はできません。あそこに表示されているのは HTML （テキスト）から生成された DOM ツリーであって HTML 自体ではないです。

React で使えない……？

ソースマップの扱いが大変なので限界がある、とのこと。CRA は名指しで無理って言われてます。

Workspaces is known to not work with these frameworks:

  • Create React App

Workspaces はこれらのフレームワークでは動かないことが既知です。

  • Create React App

    • なんかファイルパスが webpack:// みたいになるやつあるよね、あれかなあ。でもカーソル乗せるとポップアップで “Linked to …” で正しいローカルファイルのパスを表示してくれるんだけどなあ。動かない。

    おしまい

    使えたらめっちゃ便利。CRA でも使いたいので将来に期待します。

    参考