Browsersyncを使えば簡単にパソコン・スマートフォンのブラウザ環境を構築できる

Featured image

HTMl,CSS,JavaScript で Web 画面を開発し、サーバーはまだ用意していないけど簡単な動作確認をする時ありますよね。

Browsersync を使用すれば、修正したソースが自動的にブラウザに反映されます。 同じ Wifi であれば、ip アドレスが割り当てられて、別パソコンやスマートフォンからブラウザで確認することができます。
スマホの操作も同期できるので、スマホのブラウザ操作で Chrome のデバッグ機能を利用することもできます。

デプロイ前の動作確認に最適です。
他管理画面もあり。ブラウザ同期や画面アウトラインのデバッグや、ネットワーク制限をすることができます。
また画像を利用したサイトだと、index.html を GoogleChrome でブラウザで見ると、以下エラーメッセージが表示されて画像を表示することができません。

Access to Image at ‘file:///Users/~~~.png’ from origin ‘null’ has been blocked by CORS policy: Invalid response.
Origin ‘null’ is therefore not allowed access.

これは同一オリジンポリシー (Same-Origin Policy) により Canvas 要素の機能制限がされているからです。
以下関数が使用できないです。
toBlob()
toDataURL()
getImageData()

そんな時も Browsersync を使用すればエラー発生せずブラウザ動作確認をすることができます。

ではインストール方法から動作確認まで確認していきましょう。

インストールから動作確認手順

npm 操作方法などがわかっていない人は以下別記事をまず呼んで下さい。

簡単まとめ npm でパッケージをローカルインストールして利用する方法

  1. 開発ディレクトリを作成し実装する

  2. npm init で初期化をする

    初期化した上でpackage.jsonファイルを作成する

  3. インタラクティブ形式で各パラメータを設定する。

私はサンプルアプリなら以下パターンでよく登録する。

package name: (a) sampleApps
version: (1.0.0) 0.0.0
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
  1. dev ディレクトリ配下に package.json ファイルが作成されていることを確認する
  2. ローカル環境にパッケージをインストールする
npm install browser-sync –save-dev
  1. browser-sync パッケージがインストールされたか確認する
npm list –depth 0
  1. package.json に start 追記する
{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "browser-sync start --server --files='**/*'"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.3"
  }
}
  1. npm start  コマンドをうち実行

URL

https://localhost:3000

を入力するとブラウザで動作確認をすることができます。

ターミナルに External と書いてある箇所に、IP アドレスも記載してあるので、同じ Wifi の他パソコンやスマートフォンからアクセスして表示することができます。

他スマートフォンのブラウザで動作内容をデバッグしてログを確認する方法

  1. USB でパソコンと接続する

  2. デバイスをデバッグモードにする(Android)

  3. 以下 URL にアクセスする

    chrome://inspect/#devices

    Remote Targetにデバッグ対象のスマホがあるので、その配下にスマフォで開いているWebサイトが表示されている。 そのinspectリンクをクリックする するとパソコンの GoogleChrome 検証ツールと同じ画面でてくるので後は同じ手順。

以上

comments powered by Disqus