Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

Visual Studio Code 初心者も!楽々!ブラウザの自動更新

初心者にも簡単なので、ぜひ試して欲しい!Visual Studio Code でBrowser Syncを使う方法。Web制作で活躍する便利な機能、ブラウザの更新の自動化と、スマホ等のデバイスでもローカルで制作中のサイトにアクセスする方法をご紹介します。

INDEX

環境について

xampp、Local、VSC、SCSSでWordPressを構築しているとします。

VSCode Browser Sync

コードを書いて、ブラウザで確認を繰り返します。その都度ブラウザーを手動で更新するとなると何百回も更新する事になります。それを自動化できれば、腱鞘炎の予防にもなりますね。

Live Server は使用しません。というより2021年3月現在、全く動きません。

VSCode Browser Sync エクステンション をVisual Studio Codeにインストールします。

ワークスペースに、制作中のサイトの子テーマフォルダを追加します。

設定

[F1]キー又は、[表示] → [コマンドパレット]でコマンドパレットを開き、 >brow と入力します。

使用したローカルサーバーが対象なので、Proxy を選択し、処理が終わるのを待ちます。(数秒)

Browser Sync

入力ボックスが開いたら、サイトのURLを入力(コピペ)します。Enter(http://localhost/フォルダ名)XAMPPの例です。Localの場合は異なります。

Browser Sync

監視したいフォルダなりファイルなりを指定します。フォルダ内の全てを監視したいので、 /

Browser Sync

ブラウザが開き、サイトが表示されたと思います。localhost:数字は、使用しているポートの番号です。毎回変わりますが気にしなくて大丈夫です。

Browser Sync

動作確認

例えば、SCSSファイルを開き [Watch SASS]をクリックし、Watching状態にしておきます。書き換えて保存すると、ブラウザが更新されたと思います。全てのファイルを監視対象にしたので、CSSに限った事ではありません。便利ですねー!

ファイルの保存すら面倒でしたら、VSCの[ファイル] → [自動更新]とすると、もっと楽です。自分のタイミングで保存したい方は従来通り、Ctrl+Sで保存すれば良いです。

他のデバイスからのアクセス

PC内にあるサイトをWi-fi経由でスマホ等のデバイスで確認する事が出来ます。別途設定が必要な場合も有る様ですが、私の場合は下記の環境で特に何もせずに接続できました。

PCとデバイスは、同一のWi-fiネットワークで接続している必要があります。

IPアドレスの確認

コマンド画面を開きます。検索画面に cmd と入力すると、黒い画面が開きます。

コマンドプロンプト

ipconfigと入力します。私が知る限り通常、192.168.X.Xという感じです。

コマンド

iphoneで確認

ブラウザのURL入力欄に、IP:ポート番号/フォルダ名 (例:192.168.10.104:3006/cocotiie-web) を入力して[go]でページが表示出来ます。ポート番号は変わります。注意して下さい。

よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる