BracketsではChrome・Firefox・Operaなど複数ブラウザで同時にライブプレビュー（＝クロスブラウザ ライブプレビュー）することが可能です。Windows7ではさらにIEも可能です。
操作方法は
・試験ライブプレビューを有効にする
・URLをアドレスバーに1回だけコピー&貼り付けする
だけです。その後はBracketsエディタ画面を変更するだけで、変更内容が各ブラウザーに反映されます。
ということで、今日のページの目次はこちら
はじめに
ちなみに2016年5月での各ブラウザのシェア率は1位Google Clome、2位Internet Exploler、3位Firefoxと続いています。→ついにGoogle Chromeが首位 – 4月ブラウザシェア
ということもあり、複数のブラウザで表示確認する人もいるかと思います。なのでBracketsライブプレビューを、Chrome・Internet Exploler・Firefox・Operaなど複数のブラウザで、同時に行う操作方法について説明しますね。なおInternrt Explolerは、Windows7のみ可能です。
なお、管理人の環境はWindowsのためMacのsafariは確認できていません。Mac欲しいなぁ(｡-_-｡)
あっ、「ライブプレビューって何？」という人はこちらをどうぞ。
ということではじめます。今回の手順では、既定のブラウザはGoogle Chromeとして説明しますね。
試験ライブプレビューを有効にする
まずは試験ライブプレビューを有効にしましょう。Bracketsメニューバーの［ファイル］→［試験ライブプレビューを有効にする］を選択します。
ライブプレビューを実行する
次に、ライブプレビューを実行してください。
既定（デフォルト）のブラウザであるGoogle Chromeが起動してライブプレビューが実行中になります。
ちなみに起動方法は3つあります →ライブプレビューの起動方法。
確認したいもう1つのブラウザを起動する
ここで確認したいもう1つのブラウザ（ここではFirefox）を起動します。
起動するブラウザはOperaでもOKです。さらにWindows7の人はInternet ExplolerでもOKです。
ライブプレビューのURLをコピー&貼り付け
ライブプレビュー実行中であるGoogle ChromeのURL入力欄を右クリックしてコピーした後……
もう1つのブラウザ（ここではFirefox）のURL入力欄を右クリックし、[貼り付けて移動]を選択します。
この時点で、Google ChromeとFirefoxには同じものが表示されていますね。
なおOperaでも同様の操作になります。
Windows7の場合はInternet Explolerでも可能です。ただし［貼り付け］を選択した後に、キーボードのEnterキーを押します。
クロスブラウザ ライブプレビューの実行
では、Bracketsエディタでhtmlかcssを編集してみましょう。
ブラウザーを見てみると、Google Chromeに反映されると同時に、Firefox・Operaの各ブラウザにも反映されています（※Windows7の場合は、Internet Explolerにも）。これがクロスブラウザ ライブプレビューです。
まとめ
今日は、BracketsでChrome・Firefox・Operaなど複数ブラウザで同時にライブプレビューする（＝クロスブラウザライブプレビュー）操作方法について説明しました。
メニューバーの［ファイル］→［試験ライブプレビューを有効にする］にした後、ChromeブラウザーのURL入力欄からURLをコピーして、各ブラウザーに［貼り付け移動］で簡単にできます。Internet ExplolerについてはWindows7でしかできないのが残念ですが……それでは。
コメント