Chromeデベロッパーツールでコーディング

できるようになること

Chromeデベロッパーツールを使用して、コーディング作業ができるようになります。

環境

Windows10
Chrome 91.0.4472.77

前提

対象ファイルが、自端末で編集可能なファイルであること

手順

1. 対象ページをChromeで開く
2. Chromeデベロッパーツールを開く（F12押下）
3. Sourcesタブをクリック
4. 「Add folder to workspace」をクリック
5. 警告が表示されるので「許可」を選択
6. 対象フォルダを選択
7. 対象ファイルに「同期マーク（緑の○）」がついていたら成功

使い方

CSSを編集する場合

ElementsタブでStylesを編集すれば自動的にローカルファイルのcssファイルも編集されます。

htmlを編集する場合

Sourcesタブで、該当htmlファイルを編集した後F5更新すれば変更が反映されます。
（それならエディタで編集したほうがいい）

結果

実画面を見ながらスタイルの調整が可能なので楽

感想

なんかワザップみたいな投稿で笑う。