リアルタイムにPCとスマホのクロスブラウザチェックができるEdge Inspect

レスポンシブデザインが主流となってきている今では、制作しながらパソコンの画面でチェックして、スマホでチェックして、微調整して…というようにかかる工数も増えてきました。

そんな中、Adobeが出しているEdge Inspectというソフトを知ったのですが、これを使うとパソコンでサイトを開くだけで、連動してスマホでも同じサイトを開いて、見た目の確認をすることができます。

パソコンと連動した画面チェック

パソコンとスマホを接続させ、パソコンでサイトを開くと連動してスマホ側も画面が切り替わります。スクリーンショットを撮ったりすることも可能。このソフトはWindowsでもMacでも使え、iOS、Android、Kindle Fireと連動することができます。これを使えば、検証作業のストレスが軽減されることでしょう。

Edge Inspectの使い方

まず、Edge InspectはAdobe Creative Cloudに加入していなければ使うことができません。Adobe Creative Cloudに加入していれば、ログインしてEdge Inspectをダウンロード。

ダウンロードしたら、もちろんインストール。

Google Chromeの拡張機能をインストール

Chromeウェブストアから、拡張機能をインストール。

スマホ側にクライアントアプリをインストール

iPhoneの場合は、AppStoreからダウンロード。Android、Kindleもそれぞれ専用アプリをインストール。

アプリを起動して、接続するPCを選ぶとパスコードがでてきますので、出てきたパスコードをChromeの方で入力。

これで、接続完了です。めっちゃ快適。

[sc name=”engeneer”]