Help us understand the problem. What is going on with this article?

はじめてのbrowserSync

More than 1 year has passed since last update.

はじめて使ってみて社内共有用に書いたやつを転載

目次

  • browserSyncについて
  • できること
  • 5分でできる簡易インストール
  • 管理画面の設定
  • まとめ

browserSyncについて

Live Reloadができるnode.jsパッケージ
公式サイト

Adobe Edge Inspectが似たようなことできるらしいけどbrowserSyncはPCでインストールするだけで拡張機能のインストールや端末へのアプリインストールも不要
参考:Adobe Edge Inspect

リモートデバッグ、コード調査イメージ(画像はAdobe Edge Inspectのもの)
a78a6dd9-f686-57de-45a5-61e0c9f5c7f2.jpeg

できること

  • 起動中にソースを変更するとブラウザをライブリロードして反映させる
  • バックエンド依存無し、gulpなどのタスクツールとも連携しても使えるし、単独でも動作可能
  • apacheとか設定しなくてもターミナルで呼べば起動してくれる
  • Desktop, tablet, Mobileでブラウザの同期ができる(要wifi)

5分でできる簡易インストール

※nodeとnpmが使える環境であること前提

$ cd browsersync

適当なフォルダを作って移動

$ node -v
nodeのバージョン
$ npm -v
npmのバージョン

npmが使えるか確認

$ npm init

npmの設定

全部エンターでいいので終わるまでエンターするとpackage.jsonができてるので

グローバルインストールでもいいけどテストでそのフォルダ(プロジェクトにインストール)

$ npm install browser-sync --save-dev

インストールが終わったらpackage.jsonのscriptsに1行追加

"start": "browser-sync start --server --files='./*.html, ./*.css'"
package.json
{
  "name": "browsersync",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "browser-sync start --server --files='./*.html, ./*.css'"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.12"
  }
}

package.jsonを保存したはじめてみる

$ npm start

コンソール上にAccess URLが記載されてるはずなので、

[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.100.6:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.100.6:3001
 --------------------------------------

Local: http://localhost:3000がローカル環境のアクセス先
UI: http://localhost:3001が管理画面のアクセス先

管理画面の設定

http://localhost:3001

Overview

9a2fcc5f-35e5-5074-087d-55e927ab7203.png

  1. Local
    NEW TAB ローカル http://localhost:3000 のURLが新しいウインドウで開く
    SYNC ALL 上記URLで開いている各ブラウザ(または各デバイス)が一斉にリロード

  2. External
    外部(端末アクセス)向けのURL(同一ネットワーク内)でボタンの機能はLocalと同じ

  3. Serving files from
    rootの表記

  4. Current Connections
    今現在同期中のブラウザ表示

Sync Options

cb6faff8-904f-7602-6ee8-0a1c74dcf4d1.png

上から
コード、クリックアクション、スクロール、フォームを同期するかどうか

Remote Debug

a093e00b-956c-350b-f7b7-92b380e26154.png

  1. Remote Debugger (weinre)
  2. 同期している実機端末でデバッグできる

オンにしてでる
「Access remote debugger (opens in a new tab)」をクリックすると簡易なdevelopper toolが表示される。

端末でhttp://192.168.100.6:3000 にアクセスしておくとターゲットに表示される

aba2dd6b-d036-84af-3f59-ddb530129212.png

デバッグしたいターゲットをクリックして

dc3571a1-8067-3581-0496-89616babd790.png

Elementsを開いて調べたいソースを選択すると端末の該当箇所がハイライトされるので調査できる

886b2dfe-da40-f86f-d3fb-c24443a07c42.png

※chromeのdeveloper toolのように自由にスタイルを試したりはできないけどすでに設定されてるスタイルを非表示にしたりhtml部分を書き換えたりはでき、Consoleがあるのでjsエラーなどの確認は可能

  1. CSS Outlining
    CSSのブロックを色分け表示

  2. CSS Depth Outlining
    CSSの深さで色分け(深いほうが暗い)

  3. Overlay CSS Grid
    ブラウザにGrid表示、オンにしたらgrid sizeとか指定もできる
     CSSがピクセル単位でずれてるの修正したいとかそういう時に使う?

まとめ

サーバー用意される前のデバッグや、
打ち合わせで来客した中にお客さんに端末での表示を見せたり、
特定端末でレイアウト崩れてるとかjsが動かないなどの時に該当端末でデバッグできるので便利そう

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away