Facebook Twitter Google Maps RSS
Home 未分類 意外に知られていない開発者ツール
formats

意外に知られていない開発者ツール

Published on 2013年12月19日, by in 未分類.

こんにちは。
最近になってWebの開発時に、PC側だけでなくスマホ側の画面も確認する機会が増えました。

でも毎回スマホを開いて画面を確認。。。だと非常に手間です。

そこで手軽にブラウザで確認できないものかと色々調べてみました。

FirefoxだとFireMobileSimulatorと言うのがメジャーなところですかね。

最近になってGoogleChrome版もあります。

これを使用すればガラケーからスマホまで様々な機種の確認ができます。

ただ、アドオンを入れなきゃできないのでそれすら手間に感じます。
(インストールはすぐ終わるんですけどね!)

そこで登場するのがGoogleChromeの開発者ツールです。

F12ボタンを押すと画面のコードが表示されます。

解析されたことのある方でしたら、この画面を見たことがある方もいらっしゃるかと思います。

ここからさらに右下の歯車?のようなものを押します。

するとこんな感じのSettings画面が出ます。

Overridesを選択し、Enableをチェック⇒UserAgentをチェックします。

するとこんなプルダウンが表示されます。

ここになんとスマホ関連の項目が!

これを選択してブラウザを更新すれば各スマホと同じように検証が可能になります。

一部実機と異なる部分もあるようですので、完全とは言えないようですが開発時には大変助かります。

同じようにIEの開発者ツールにもありますので興味のある方はそちらも見てみてください。
(ユーザエージェント文字列と言うものを登録しなくてはいけないので、IEの方が多少手間がかかります)

今回使用したGoogleChromeはバージョン 31.0.1650.63 mになります。

 

ではまた~。

Webサイト開発実績はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*