コーディングはChromeのデベロッパーツールが便利！

おはようございます、hgmです。

ホームページ開発をされる方必見！

ブラウザ「Google Chrome」のデベロッパーツールを使用した、コーディングが捗る方法をご紹介します。

ブラウザ⇔エディタ間の移動不要！Chrome DevTools上の変更を自動で保存

コーディングする時って、ブラウザとエディタを切り替えて一々確認するの面倒ですよね。。（エディタにもよりますが・・・）

で、Chromeを使用されている方は大体デベロッパーツールのElements、Stylesの所でスタイルを整えたり、変更したりされているのではないでしょうか。

私はcssに一々コピペするのが面倒で、一気にデベロッパーツール上で変更しエディタに入れて行くのですが、入れ忘れることもしばしば・・・（ ;  ; ）

しかし！Chromeのデベロッパーツールを使用すると、切り替えせず変更内容を保存できちゃうんです！

早速設定方法をご紹介します。

設定方法

ブラウザのデベロッパーツールを開きます。

①「Sources」→②「Filesystem」→③「＋Add folder to workspace」をクリックします。

フォルダを選択するウィンドウが出現するので、該当フォルダを選択します。

選択後、下記のようなメッセージがでるので「許可」をクリックします。

「Filesystem」に追加されていれば設定完了！ファイル名に黄緑色の●がついていれば同期できている証拠です。

あとは「Elements」「Styles」で直接コーディングすれば、自動でデータが上書きされます。

▼試しに色を追加してみました。

まとめ

今回ご紹介した方法、ローカル・サーバー上での開発共に使用はできるのですが、ローカル開発でされる方のほうがおすすめです。

サーバー上にあるものだとうまく連携できずサーバーにアップできないようで、ページ更新しても反映されていないことが多いです。

それでも、以前よりコーディングがスムーズになること間違いなし！

ぜひ試してみてくださいね٩( ᐛ )و