Firefoxのユーザーエージェント変えたらスマホサイトのコーディングが楽になった

よかったらシェアしてね

スマートフォン

スマホのサイトをコーディングする時、なんのツール使ってますか?

更新(2016/8/14):最近はもうChromeのデフォルトの機能使うか、Android確認にはgenymotion使ってます\(^o^)/

私、前はFirefoxのアドオン使ってたんですが、
あるときFirefoxのアップデートしたら使えなくなっちゃいました。
(もしかしたらもう対応してるかも)

次に使ってたのはsafariの標準ツール。
簡単にPCサイトとスマホサイトの切り替えができて便利なんだけど、
普段使ってるfirebugと表示が違うから、ええ、まぁ、使いにくい。
正直使ってなかった。

何使ってたかってと、iOSシミュレータ見ながらちまちま直す…。
あかん!めんどくさい!超めんどくさい!!

ってことで(めんどくさいから)スマホサイト嫌いだったんですが、
これ教えてもらってちょっと感動したので記事にして残しておきます。
私のためとスマホ嫌いになってるあなたのために!(´ー+`)キラッ

内容の元ネタはこちらのブログさんの記事。感謝!大感謝!
【歌うキツネ】http://utaukitune.ldblog.jp/archives/65675144.html

流れも画像付きで丁寧に説明してくれてるのでここで分かりにくかったら行ってみてね!
あと、スマホ(iPhone)以外にも、
IE6~IE11IE10、Firefox、Chrome、Opera、Safari、iPad/iPod touch、Androidの表示も確認できるらしいよ。

まずFirefoxを起動する

今から何をするのかというと、
「FirefoxのユーザーエージェントをiPhoneに変更(偽装)する」そうです。
詳しいことは、よく分からない。

別タブを出して、URL欄に「about:config」でエンター!

別タブにするのは、まだテキストコピーしなきゃいけないものがあるから。
そのあとこの表示。

細心の注意を払って押してください。

文字列の設定名「general.useragent.override」をいれる

検索バーよりも下の適当なところで右クリック→「新規作成」→「文字列」をクリック。

すると“新しい文字列の設定名”の入力欄が出てくるので
「general.useragent.override」をコピペして「OK」。

ユーザーエージェントの文字列を入れる

変更したいユーザーエージェントの文字列を入れます。

とりあえずiPhoneなら
「Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_3 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B511 Safari/9537.53」

他のユーザーエージェントの場合は、
歌うキツネさんのユーザーエージェント一覧から探してみてください。

もう完了!別タブでリロードしてみよう!

↑さっきまでのPC版だったページが

↑スマホ版ページに!これなら使い慣れてるfirebugが使える!

元に戻すときは「about:config」で、
さっきの文字列を検索→右クリック→リセットして、Firefoxを再起動。

これはこれで、PCサイトと見比べたいときは別のブラウザ出さなきゃいけないんよね。
あと、ヤフー見たら超崩れてたので、見れるページと見れないページがある…のか…分からん!
静的か軽いJSならいけるんじゃないかな!きっと!

何かもっと便利な方法知ってたらtwitterかメールフォームからご教授おねがいしまつ m(_ _)m

言い忘れました。about:configをいじる際は自己責任で~(・ω・)ノシ