【Chrome拡張機能】他のブラウザはどんな感じで表示されるか一発で一覧確認する方法

指定したサイトのページが他のブラウザではどんな感じで表示されるか、１クリックで一覧表示してくれるChromeの拡張機能「Multi-browser Screenshots」紹介です。

MacでIE、Edge、Android。WindowsでSafari、iPhone、iPadなどの確認ができます。
但し、各ブラウザは一覧表示はされますが、スクリーンショットの画像です。

Multi-browser Screenshots

一覧表示されるブラウザ

Browser screenshotsで一覧表示されるブラウザは以下の通り。
大抵の場合のチェックポイントはEdgeとIEかと思います。

• Edge
• Internet Explorer 11/10/9/8
• Chrome
• Firefox
• Safari 9.1 (OS X El Capitan)
• Google Nexus 6 (Android 5.0)
• Google Nexus 9 (Android 5.0)
• iPad Air (iOS 8.3)
• iPhone 6 Plus (iOS 8.3)

おそらくHTML5、CSS3等で作られたサイトだと、IE8、IE9、IE10あたり大体レイアウトが崩れます。ただこれらのブラウザはサポート終了して時間もたっていますし、よほどの理由が無い限り無視していいブラウザです。

無視できないのはIE11とEdgeです。

以前に比べれば利用者は少なくなったと言え、どちらもWindows標準ブラウザだけに未だに普通に使っているいるユーザも多いですし、自遊空間や快活クラブなど全国チェーンのネットカフェですら未だにIE11がデフォルトブラウザとなっています。

インストール方法

インストールは、Chromeウェブストアからダウンロード＆インストールします。

Multi-browser Screenshots

https://chrome.google.com/webstore/detail/multi-browser-screenshots/dhaknibfbngnmflbejdkliedmjmbjojk

See how this page renders across a selection of common browsers and devices

chrome.google.com

外部サイト

使用方法

しばらくすると各ブラウザのスクリーンショットが一覧表示されます。
（数分かかる場合もあります）

結果画面には1画面しか表示されませんが、
「VIEW LARGE >」をクリックするとスクロールすると表示される下部の部分も全て表示することができます。

まとめ

以上、１クリックでいろんなブラウザのスクリーンショットをとってくれるChrome拡張機能を紹介しました。

クロスブラウザシミュレーターではなく、単にスクリーンショットを一覧表示してくれるものですが、地味に使える拡張機能のひとつだと思います。

因みにこの拡張機能は、現在のURLを以下のサイトへ渡しているだけなので、直接以下のサイトから、URLを入力しても同じ結果となります。

Microsoft Developer

https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/

developer.microsoft.com

外部サイト

サイト制作側からすると、とにかくIEが曲者です。
IEはダメブラウザと認識する人も多いのですが、なにせWindows標準ブラウザということで未だ使用している人も多く、完全無視できないのが現状です。