ブラウザ
コーディングはChromeのデベロッパーツールが便利！
2019年02月19日 8:00
おはようございます、hgmです。
ホームページ開発をされる方必見！
ブラウザ「Google Chrome」のデベロッパーツールを使用した、コーディングが捗る方法をご紹介します。
ブラウザ⇔エディタ間の移動不要！Chrome DevTools上の変更を自動で保存
コーディングする時って、ブラウザとエディタを切り替えて一々確認するの面倒ですよね。。（エディタにもよりますが・・・）
で、Chromeを使用されている方は大体デベロッパーツールのElements、Stylesの所でスタイルを整えたり、変更したりされているのではないでしょうか。
私はcssに一々コピペするのが面倒で、一気にデベロッパーツール上で変更しエディタに入れて行くのですが、入れ忘れることもしばしば・・・（ ; ; ）
しかし！Chromeのデベロッパーツールを使用すると、切り替えせず変更内容を保存できちゃうんです！
早速設定方法をご紹介します。
設定方法
ブラウザのデベロッパーツールを開きます。
①「Sources」→②「Filesystem」→③「＋Add folder to workspace」をクリックします。
フォルダを選択するウィンドウが出現するので、該当フォルダを選択します。
選択後、下記のようなメッセージがでるので「許可」をクリックします。
「Filesystem」に追加されていれば設定完了！ファイル名に黄緑色の●がついていれば同期できている証拠です。
あとは「Elements」「Styles」で直接コーディングすれば、自動でデータが上書きされます。
▼試しに色を追加してみました。
まとめ
今回ご紹介した方法、ローカル・サーバー上での開発共に使用はできるのですが、ローカル開発でされる方のほうがおすすめです。
サーバー上にあるものだとうまく連携できずサーバーにアップできないようで、ページ更新しても反映されていないことが多いです。
それでも、以前よりコーディングがスムーズになること間違いなし！
ぜひ試してみてくださいね٩( ᐛ )و
関連記事
この記事を書いた人
hgm
農業高校出身フロントエンドエンジニアの社員hgmです。 猫センサー搭載済みの愛猫家。 広い視野を持って日々邁進していきます！
