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

ブラウザ

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

2019年02月19日 8:00 

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

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

 

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

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



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

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

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

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

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

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

 

設定方法

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

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

 

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

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

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

 

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

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

 

 

まとめ

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

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

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

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

関連記事

この記事を書いた人

アバター

hgm

農業高校出身フロントエンドエンジニアの社員hgmです。 猫センサー搭載済みの愛猫家。 広い視野を持って日々邁進していきます!