web-dev-qa-db-ja.com

クロスブラウザーテスト：1台のマシン上のすべての主要なブラウザー

このガイドの目的：

  • Internet Explorerの複数の変更されていないネイティブバージョンの実行、
    Safari、Opera、Chrome、Firefox単一のマシンで、サイドバイサイド。

パート1 でカバー：

  • 目次
  • どのブラウザをテストする必要がありますか？
  • すぐに起動し、有効期限が切れないWindows XP VMを作成する方法は？
  • 必要なソフトウェア（VMイメージ、ブラウザなど）はどこからダウンロードできますか？

パート2 でも説明しています：

  • IE、Firefox、Opera、ChromeおよびSafariのインストールおよび構成ガイド。
  • 開発者ツールとショートカット。
  • 時間とディスク容量のコスト。

多くのセクションは独立しています。たとえば、ブラウザの複数のバージョンを実行する手順が一般的に適用されます。

internet-explorerbrowsercross-browservirtualization
138
Rob W

内容

  1. どのブラウザをテストする必要がありますか？
    • 経験則：どのブラウザーを含めるべきですか？
  2. 準備
    • Windows XP
    • Windows 7+（IE9 +の場合）
    • ブラウザのダウンロード
      • インターネットエクスプローラ
      • Firefox
      • Opera
      • Chrome
      • サファリ
      • アドビフラッシュプレーヤー
    • ダウンロードの概要
  3. サンドボックス

    パート2：インストールと構成
  4. インターネットエクスプローラ
  5. Firefox
  6. Opera
  7. Chrome
  8. サファリ
  9. 開発者ツール（およびショートカット）
  10. 測定されたセットアップ時間とディスク容量
    • ブラウザごとに必要な時間（インストールと設定）
  11. 最適な使用法
    • http://10.0.2.2:8888/のホームページ

1.テストする必要があるブラウザーはどれですか？

統計はすぐに古くなっています。このため、Wikipediaの Usage share of web browsers 、および最新のブラウザーversion情報については以下のサイトを参照します。各サイトの末尾には、簡単な使用ガイドが付いています。

  • 使用できます -StatCounterおよびその他のソースからのデータに基づくブラウザー使用状況テーブル。
  • StatCounter -統計：ブラウザバージョン|期間：先月 screenshot。
  • W3Counter -アーカイブされたレポートの表示：January 2012（先月を選択）。 screenshot。
  • Wikimedia -一番下に移動して、最新のレポートSquidReportClientsを開きます。
  • Clicky -このサイトは個々のバージョンの統計を提供します screenshot。

経験則：どのブラウザーを含めるべきですか？

  • Firefox ：最新 ESRリリース +最新の安定したメジャーバージョン。 リリースノート | 開発者向け | 迅速なリリーススケジュール
  • Opera ：12.x +最新の安定バージョン。 バージョン履歴
    Opera 15以降、OperaはChromeと同じエンジンを使用します。ただし、かなり多くのユーザーがOpera 12を使用しています（Opera 15がリリースされたとき、UXは大幅に変更されました）。
  • Safari ：5.1.7（Windows）+最新バージョン。 リリースノート
    残念ながら、AppleはWindowsのサポートを廃止したため、Safariでページをテストするには、VMでMacを入手するかOS Xを実行する必要があります。
  • Chrome ：最新の安定バージョン。 リリースノート
  • Internet Explorer ：IE8 +。 機能履歴
    これは実際にはクライアントに依存します。このガイドでは、IE6と7の入手方法についても説明していますが、これらのブラウザーはすでに死んでいるか、死にかけています。 IE8は、Windows XPで最後にサポートされているInternet Explorerのバージョンであり、今でも多く使用されています。

リマーク

最近では、ほとんどのWebブラウザーは、自動更新を伴う何らかの形の迅速なリリースを使用しています。このガイドが作成されたとき、リリースはそれほど頻繁ではなかったため、振り返らずに一連のブラウザーをセットアップすると便利でした。
古いブラウザでアプリケーションを意図的にテストする場合を除き、ブラウザの最新バージョンを入手して、自動アップデーターにバージョンの管理を任せてください。

柔軟性があまり必要でなく、すぐにページをテストしたい場合は、 BrowserStack.com をご覧になることをお勧めします。サインアップ後、30分間の無料試用版を入手できます。この試用版では、多くのデスクトップおよびモバイルブラウザーへのアクセスをブラウザー内で直接許可します。

2.準備

マシンをセットアップする前に、必要なファイルをすべてダウンロードします（このセクションの最後にある「ダウンロードの概要」を参照）。すべてのファイルは、共有フォルダーを介して仮想マシンと共有されます何？どうやって？。

  • 仮想化ソフトウェア（ VirtualBox が推奨されます。商用利用でも無料です。以下の手順は VirtualBox を念頭に置いて書かれています。）
  • Windows XP
    • VirtualBoxのIE6 XPイメージを modern.IE Webサイトからダウンロードします。内部の.ovaファイルを抽出して実行し、VirtualBoxにインポートします。 （イメージは、VMware、Parallels、Virtual PC、Hyper-Vなどの他の仮想化製品でも使用できます）
    • 使用するイメージの準備：
      • VirtualBox settings：ネットワークアダプターを有効にしますが、notVMを実際のネットワーク。
      • VirtualBox settings：読み取り専用の共有フォルダーを作成します。このフォルダーは、ホストOSとゲストOS間でデータを転送するために使用されます。
      • Net Use x: \\vboxsvr\WinSharedを実行します（共有フォルダーの名前がWinSharedであると仮定します。これにより、ネットワークディレクトリがx:ドライブにバインドされます）。
      • オプション：インストールAntiWPAは、イメージを使用する場合にアクティベーションチェックを無効にする30日以上。
      • オプション：ページングファイルの無効化（コンピューター>プロパティ>詳細設定>パフォーマンス>詳細設定>仮想メモリ>変更>ページングなし> [確認]を設定します）。
      • オプション： 不要なサービス をStart > Run >経由で無効にするservices.msc
        列をStartup Typeで並べ、画像に応じてすべての「自動」サービスを「手動」に切り替えます。 MSIパッケージをインストールするたびに、net start msiServer（ "Windows Installer"）を実行します。
        Windows XP - services.msc
      • オプション： デスクトップクリーンアップウィザードを無効にする ：Desktop > Properties > Desktop > Customize Desktop > Disable "Desktop Cleanup wizard every 60 days"
      • オプション：Sandboxieのインストールと構成（同じIE6仮想マシンでIE7とIE8を実行するために使用）
      • オプション： CCleaner をインストールし、実行して設定し、ジャンクをクリーンアップします。
      • オプション： 7-Zip をインストール（複数のChromeに使用）
      • ゲストOS（WinXP）を介してシステムをシャットダウンします。
      • VirtualBox settings：VMを実際のネットワークに接続します。
        （インストール時にInternet Explorerのみがインターネットを必要とします）
      • オプション：VMのスナップショットを作成し、次のステップで混乱したときに復元できるようにします。
  • Windows 7+（IE9 +用）
    • modern.IE Webサイトからビルド済みの仮想マシンイメージをダウンロードします。
      これらの画像は時限爆弾であり、最初の使用から30日後に有効期限が切れます。イメージの有効期限が切れると、1時間使用するとシャットダウンします。毎回イメージを再作成したくない場合は、イメージをアクティブにする前にVMのハードウェアクロックを変更します。
      たとえば、VirtualBoxでは、VBoxManage modifyvm NAME_OF_VM --biossystemtimeoffset +3600000000を使用して将来の時間を1000時間に設定できます（過去のある時点に設定する場合はマイナスを使用します）。
  • Browsers downloads
    • インターネットエクスプローラ：
    • Firefox：
    • オペラ：
      • Opera.com .からOperaバージョンをダウンロードします
    • クロム：
      • 7-Zip をダウンロードして、Chromeインストーラーを抽出します。
      • FileHippo.com で特定のバージョンをダウンロードします。必ず「FileHippo」ミラーを選択してアーカイブバージョンを取得してください。それ以外の場合は、Googleのサーバーから最新バージョンにリダイレクトされます。
    • サファリ：
      • Apple.com から最新バージョンをダウンロードします。
      • Oldapps.com .から他のバージョンをダウンロード
    • Adob​​e Flash Player
      • ダウンロード version 10.33 MB IE6でフラッシュを動作させる必要がある場合。それ以外の場合は、 最新バージョン をダウンロードします。
      • 最新のプラグイン for other browsers をダウンロードします。

ダウンロードの概要

便宜上、すべてのインストールファイルを共有フォルダーに置くのが賢明です。すべての必要なファイルの簡単な（完全な）リストを次に示します（ステップごとに並べられています）。

3.サンドボックス

Sandboxie は、サンドボックスでアプリケーションを実行する軽量ツールです。IE/Safariの複数のバージョンを単一のWindowsマシンにインストールするためにも使用できます。

  • Download： http://sandboxie.com/index.php?DownloadSandboxie
  • Patch：拡張バージョンはrequiredで、一度に複数のサンドボックスを有効にします。 Pay それらまたは visit YouTube 。
    複数のIE/Safariバージョンを同時に実行するには、拡張バージョンが必要です。 IE/Safariの1つのバージョンを一度にテストしてもかまわない場合は、標準バージョンで十分です。

    インストール後：
  • ヒントを無効にする：「構成>ヒント>すべてのヒントを非表示にする」
  • デフォルトでは、サンドボックス化されたアプリケーションの周囲に黄色の境界線が表示されます。気に入らない場合は、Configure base：「Sandbox> DefaultBox> Sandbox Settings> Appearance」に進みます。

    新しいIE/Safariバージョンごとに、次の手順に従う必要があります。
  • Create：「サンドボックス>新しいサンドボックスの作成」-名前を入力します（例：「IE8」）。
  • Install：「IE8>サンドボックスの実行>プログラムの実行」
    目的のインストーラーを選択し、[OK]を押します。
  • Shortcut：インストールが完了したら、「IE8>コンテンツの探索」を使用してバイナリを見つけ、アプリケーションへのデスクトップショートカットを作成します。

すべてのサンドボックス化されたファイル/レジストリの変更は、C:\Sandboxに保存されます。このディレクトリ内のアプリケーションは、デフォルトでサンドボックスで起動します。他のプログラムは、コンテキストメニューを使用してサンドボックスで簡単に開始できます。「サンドボックスを実行する」または「送信先>サンドボックス> IE8」。

CCleanerを使用したクリーンアップ：メイン環境でCCleanerを実行し、次に個々のサンドボックスで実行します。

以下に移動します： Part 2

101
Rob W

パート2の内容（ナビゲート： パート1 ）

4. Internet Explorer
5. Firefox
6. Opera
7. Chrome
8. Safari
9.開発者ツール（およびショートカット）
10.セットアップ時間とディスク容量の測定
•ブラウザごとに必要な時間（インストールと設定）
11.最適な使用法
•ホームページ：http://10.0.2.2:8888/

インストールと構成

ブラウザー構成のヒント：

  • ホームページ
  • 「デフォルトブラウザ」と「アップデート」のチェックを無効にします。
  • 開発者ツールを有効にする

4. Internet Explorer

Windows 7では、IEの古いインスタンスを実行できません ただし、以下の注を参照してください。そのため、Win XP VMが必要です。

IEはダウングレードできないため、最も低いバージョンから始めて、個別のSandboxieでIEをアップグレードします。アップグレードする前に、最も低いブラウザーバージョンで設定を設定します。これにより、メイン設定を1回設定するだけで済みます。

  • IE6-WinXPにデフォルトでインストールされます
  • IE7 / IE8 -Sandboxie（WinXP）にインストールする
  • IE9 +- modern.IE Webサイトからビルド済みのWindows仮想マシンイメージを取得します。
    これらの画像は、最初の使用から30日後に期限切れになります。イメージの有効期限が切れると、1時間使用するとシャットダウンします。毎回イメージを再作成したくない場合は、イメージをアクティブにする前にVMのハードウェアクロックを変更します。
    例えば。 VirtualBoxを使用する場合は、ターミナルを起動して次のコマンドを発行します（大文字の名前を適切な名前に置き換えます）。
    VBoxManage modifyvm NAME_OF_VM --biossystemtimeoffset <OFFSET IN MS, prefixed by plus or minus>

IE6（およびIE5.5でも）の完全にオフラインのインストーラーが利用可能です このサイトで 。

IE6およびIE7の場合、 Internet Explorer Developer Toolbar をインストールする必要があります。 IE8 +には ビルトインF12開発者ツール があります。

構成

  • IE6の設定を開始します：ホームページ、セキュリティ、Cookie、デフォルトブラウザ。
  • IE7：（IE7 Sandboxie）レジストリを介して最初の実行ページを削除します。 MicrosoftのTechNetフォーラムのこの投稿 を参照してください。
  • IE8：「Windows Internet Explorer 8のセットアップ」ダイアログを取り除きます。これを行うには、IE8を起動し、[後で]をクリックするか、 レジストリを変更する をクリックします。

アプリケーションの仮想化により、Windows 7でIE6-8を実行することが実際に可能です。 VMWare ThinApp はうまく機能しますが、Internet Explorerのインストールをキャプチャする必要があるため、セットアップにかなり時間がかかります。また、ソフトウェアパッケージは非常に高価です（keygenは無料で入手できますが、非倫理的です）。

5. Firefox

オプション1（遅延）：
tilu Mozilla Firefox Collection 。このツールには、すべてのFirefoxバージョン（200 MB以上）のインストーラーが含まれています。 Firebug、Web Developerツールバー、およびFlashも含まれています。

オプション2：
複数のバージョンのFirefoxを簡単に同時にインストールして実行できます。

  1. ダウンロード Mozillaの公式 プロファイルマネージャー 。
  2. 関連するFirefoxバージョンを http://releases.mozilla.org/pub/mozilla.org/firefox/releases/ からダウンロードします。古いバージョンは ftp.mozilla.org にあります。
  3. 各Firefoxバージョンをインストールします。 1つのメインディレクトリ（ "Firefox"）を選択し、サブディレクトリの名前としてバージョン番号（ "3.6"）を使用すると便利です。
  4. 拡張機能：oldestFirefoxバージョンを起動し、お気に入りの拡張機能を取得します：
    • Firebug -古いバージョンのFirefoxの必須アイテム。 ビルトイン開発ツール のニースセットがある最新のFirefoxバージョンには本当に必要ありません。
    • HttpFox -HTTPリクエストを測定するためのシンプルで効果的なツール。
    • Web開発者 -Web開発に非常に役立つツールバー。多くの時間を節約できます。
    • - コンソール2 -組み込みコンソールを強化します（CtrlShift>J）。
  5. 設定：Tools > Options（Windows）、Edit > Preferences（Linux）
    • 一般：ホームページ
    • セキュリティ：「サイトがアドオンをインストールしようとしたときに警告する」以外のすべての設定をオフにします。
      （下部のボタンを使用して、警告メッセージの設定を表示することを忘れないでください）。
    • 詳細設定：
      • 一般：
        • デフォルトのブラウザを確認：オフ
        • クラッシュレポートの送信：オフ
      • 更新：すべての更新を無効にします
  6. クリーンアップ：すべてのタブを閉じて、 CtrlShiftDel すべてを確認してください。次に、Firefoxを閉じます。
  7. Firefox ' Profile Manager ：
    screenshot
    • Copyオプションを使用して各プロファイルを複製します。
    • A ダイアログ スクリーンショット が開きます。適切な名前（Firefox 3.6など）と宛先を選択します。
    • Firefox versionオプションを使用して、プロファイルのデフォルトのFirefoxバージョンを選択します。
    • また、Start new instance [-no-remote]ボックスをチェックして、同時に複数のFirefoxバージョンを実行できるようにします。
  8. 仕上げ
    • Start Firefoxボタンを使用して、Firefoxのインスタンスを起動します。
    • アドオンの互換性チェックを実行し、必要に応じて更新します。
    • を使用してキャッシュ、履歴などをクリアします CtrlShiftDel。
    • Firefoxのバージョンごとにこの手順を繰り返します。

6.オペラ

Opera：すべてのインストーラーのリストは Opera.com で入手できます。複数のバージョンを問題なく並べてインストールできます。インストール中に、「カスタム」を選択し、differentディレクトリを選択します。
インストール時に、すべてのユーザーに同じプロファイルを使用することも選択します。

重要な設定：[設定]> [設定]> [詳細設定]> [セキュリティ]> [更新を確認しない]

注：Opera 15+は、Chromeと同じレンダリングとJavaScriptエンジンを使用します。

7.クロム

Chrome：スタンドアロンインストーラーは File Hippo からダウンロードできます。
複数のChromeバージョンを並べて実行することもできます。

Sandboxieを使用できますが、複数のバージョンを並べて実行するには、次のネイティブメソッドを使用することをお勧めします。

  1. File Hippo から目的のバージョンをダウンロードします。
  2. 作成メインディレクトリ、例えばC:\Chrome\。
  3. Extractインストーラー（=インストールせずに）、 を使用して7-Zip たとえば。
    抽出後、chrome.7zアーカイブが作成されます。また、このファイルを抽出し、作成されたChrome-binディレクトリーを下降します。
    これで、chrome.exeと、18.0.1025.45のようなディレクトリが表示されます。
    chrome.exeを18.0.1025.45に移動してから、このディレクトリをC:\Chromeに移動します。 Chrome-binの残りのファイルは安全に削除できます。

  4. バージョンごとにショートカットを作成します：

    "C:\Chrome\18.0.1024.45\chrome.exe" --user-data-dir="..\User Data\18" --chrome-version=18.0.1025.45

    このショートカットの説明：

    • "C:\Chrome\18.0.1024.45\chrome.exe"•これはlauncherです
    • --user-data-dir="..\User Data\18"•chrome.exeの場所に関連するユーザープロファイル。同じ効果のために--user-data-dir="C:\Chrome\User Data\18"を使用することもできます。 lowestChromeバージョンの設定を行い、それぞれのユーザープロファイルを複製しますChromeバージョン。古いChromeバージョンは、新しいバージョンのユーザープロファイルの使用を拒否します。
    • --chrome-version=18.0.1025.45•バイナリの場所：
      • 場所（18.0.1025.45など）はディレクトリの名前である必要があります。
      • 数字で始まり、数字で終わる必要があります。間にドットが表示される場合があります。
      • 番号は必ずしも実際のバージョン番号と一致する必要はありません（ただし、実際のバージョン番号を使用すると便利です）。

構成について：すべての設定はchrome://settings/で設定できます。私は通常、ホームページと「フードの下」の設定を変更します。

Chromeリリースが多数あるため、すべてのバージョンをインストールすることは実用的ではありません。これらの手順を自動化するVBスクリプトを作成したので、インストーラーを保存するだけで、古いバージョンのChromeをテストする必要があるときにスクリプトを実行できます。 https：// Gist。 github.com/Rob--W/2882558

8.サファリ

注：WindowsでのSafariのサポートは廃止されました。 Windowsで最後にサポートされているSafariバージョンは5.1.7です。新しいSafariバージョンでサイトをテストするには、MacまたはOS X VMが必要です。

Safariは ネイティブサポートなし 複数のバージョンまたはユーザープロファイルを並べてサポートします。 Safari 4は 死に近い なので、テストする必要があるのは5. *だけです。すべてのSafariバージョンは Old Apps からダウンロードできます。

  • Safari 5. をダウンロードしてインストールします。
  • Safariを起動して、設定を行います。
  • 追加のインストールごとに新しいSandboxieサンドボックスを作成します。
    最初にoldestバージョンをインストールして、新しいバージョンでユーザープロファイルを適合できるようにすることが重要です。
  • Sandboxieでのインストールの詳細については、SandboxieおよびInternet Explorerセクションを参照してください。

開発者ツールは、Preferences > Advanced > Show Developer menu in menu barで有効にする必要があります。 Safariをインストールしたら、Control panel > Add/Remove softwareからApple software Updaterをアンインストールします。

9.開発者ツール（およびショートカット）

10.測定されたセットアップ時間とディスク容量

  • 基本環境のセットアップには30分かかります。
  • ブラウザをインストールするのにそれほど時間はかかりません。
  • ブラウザの数によっては、設定に時間がかかる場合があります。

  • このガイドにリストされているブラウザでWinXP VMをセットアップする+ Opera 12 beta：
    • ダウンロードのサイズ：585MB
    • 12ブラウザー
    • 使用時間：1:09時間（IEに到達するまで32分）
    • アプライアンスサイズ：1.1G /インポートサイズ：2.2G。
    • 詳細ログ： http://Pastebin.com/R7WGPK99
  • 詳細なブラウザ互換性テストのための巨大なWinXP VMのセットアップ：
    • 24ブラウザー
    • 使用時間：2:15時間
    • アプライアンスサイズ：1.4G /インポートサイズ：3.0G
    • ログ： http://Pastebin.com/SJEgxNyr

ブラウザごとに必要な時間（インストールと設定）

  • オペラ：2分
  • Internet Explorer：3分*
  • Safari：4分*
  • Firefox：5分
  • Chrome：6分

* Sandboxie Sandboxのセットアップ時間（<1分）を除外します。

11.最適な使用法

インストールが完了したら、CCleanerを使用して迷惑メールをクリーンアップします。

  • アプライアンスをエクスポートします（このアプライアンスはバックアップとして他の場所に保存できます）。
  • 新しく作成された仮想マシンを削除する
  • アプライアンスをインポートします（これらの手順により、VMのファイルサイズが小さくなります）
  • スナップショットを作成する（チェックポイントとして使用する）

これからは、Webページのテストが終了したら、VMをオフにして、「スナップショットの復元」を選択します。これにより、VMを整然と高速に保ちます。

Turn off machine > Restore snapshot

http://10.0.2.2:8888/のホームページ

ゲストOSは、IPアドレス10.0.2.2によってホストOSにアクセスできます。ホストがインターネットに接続していない場合でも、ポート8888で実行されているサーバーは、http://10.0.2.2:8888/を介してゲストでアクセスできます。

このため、http://10.0.2.2:8888/をホームページとして設定することをお勧めします。

可能なユースケース：

  • 単一のページをテストします。
  • 公開されたユーザーエージェントに応じて、特定のページを自動的に表示します（リダイレクトなど）。
  • いじる：Chromeでフィドルを作成し、Firefoxでテストします。
  • テキストとリンクを共有します。

前述のすべては、単純なサーバーに簡単に実装できます（たとえば、 Node.js を使用しました）。

60
Rob W

ピッチングするために、Microsoftは最近、modern.IEと呼ばれる無料のサービスの提供を開始しました。

modern.IEは、MicrosoftがInternet Explorerブラウザーのクロスブラウザーテストを容易にするための取り組みです。 Microsoftは、IEブラウザーテストを容易にするツールスイートを開発者とデザイナーに提供するためにmodern.IEを作成しました。

Modern.IEでは、IEでWebサイトをテストする2つの方法があります。まず、modern.IEでは、WebベースのブラウザーテストサービスBrowserStackを3か月間無料で使用できます。ログインしてテストを開始するには、Facebookアカウントが必要です。

Modern.IEが提供する2番目の方法は、IE 6からIE 10までの各ブラウザーの仮想化イメージで、VirtualBox、Virtual PC、Hyper-Vなどの仮想化ソフトウェアで実行できます。 Windows、Mac、またはLinux上のVMWare Player。

さらに、modern.IEは、一般的なコーディングの問題についてWebページをスキャンし、すべてのIEバージョンで正しく表示されるように修正するためにそれらをリストするツールも提供します。

出典： modern.IE-クロスブラウザIE Testing Tools Suite

注：リンクされた記事は削除されました。リンクは、ページの Wayback Machine アーカイブに移動します。

11
Hirvesh