モバイルデバイスをシミュレートしてFirefoxブラウザでデバッグするにはどうすればよいですか？

私はモバイルデバイスモードで自分のウェブサイトを表示するツールを探しています。またFirebugのようなツールで私のウェブサイトをデバッグしたいのですが... Firebugを使うこともできます。これを行うための確立された解決策は何ですか？モバイルデバイスをシミュレートしてFirefoxブラウザでデバッグするにはどうすればよいですか？

出典

2013-05-20 Anonymous

これはChromeのネイティブ機能です。 'Galaxy S5'シミュレーションを選択してから、ページをリロードして、それを表示することができます。 – User

独自のブラウザ（Firefox、IE、Chrome ...）を使用してJavaScriptをデバッグできます。リサイズ用として

は、Firefox/ChromeははCtrl +Shiftキー + I OR F12経由でアクセス可能なリソースを所有しています。 Goingタブの "style editor"をクリックし、 "adaptive/responsive design"アイコンをクリックします。

古いFirefoxバージョン

Old Firefox

新しいFirefoxの/ Firebugの

Firefox

クローム

Chrome

*別"Web Developer"のようなアドオンをインストールすることです

出典

2013-05-23 13:17:22 PiLHA

ファイヤーバグは最近、firefoxに追いつくために苦労していると思います。私はそれを愛するが、それは苦労している。ますますFirefoxのトラブルシューティングが必要なときに、Firefoxに付属している組み込みのインスペクタを使用しています。 –

ほとんどのWebアプリケーションは、HTTPヘッダーに基づいてモバイルデバイスを検出します。

あなたのウェブサイトはまた、モバイルデバイスを識別するために、HTTPヘッダーを使用している場合は、次の操作を実行できます。

変更ヘッダは、ヘッダを変更するプラグインを使用してFirefoxブラウザ（ https://addons.mozilla.org/en-US/firefox/addon/modify-headers/ ）
にプラグインの追加：
- 選択ヘッダタブ - >などをシミュレートするためのアクション '追加'
- を選択iPhoneは名前User-Agentと値を持つヘッダを追加します。Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3
- クリックは、あなたがFirefoxであなたの携帯バージョンのWebアプリケーションを参照し、Firebugのプラグインを使用することができるはずその後
を「追加」ボタンをクリックします。

希望します。

出典

2013-07-18 12:29:48 Kristy

FirefoxアドオンUser Agent Overriderを使用できます。あなたがexamlpeのために、あなたが好きなユーザーエージェントを使用することができ、これはアドオンで：

Firefox 28/Android: Mozilla/5.0 (Android; Mobile; rv:28.0) Gecko/24.0 Firefox/28.0

あなたのウェブサイトがユーザーエージェントを介してモバイルデバイスを検出した場合、あなたはあなたのレイアウトこの方法をテストすることができます。

更新11月'17：

ためのFirefox 57のリリースと、このアドオンは悲しげに利用できなくなったウェブ延長の導入。また、あなたの設定でFirefoxの好みgeneral.useragent.overrideを編集することができます。

アドレスバータイプでgeneral.useragent.override
ためabout:config
検索を好み、約上で右クリックして、存在しない場合は：configページを、その後、新しい設定general.useragent.override
はあなたが

をするユーザーエージェントに値を設定して文字列

名を選択し、[新規]をクリックします

出典

2014-06-25 05:54:02 mrt

本当に使いやすいです。 https：//chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg –

ありがとうございます。それは私が望んだものですが、問題はこれがすべてのブラウザのタブに影響します:( – Kabkee

ツール - > Web開発 - >レスポンシブ・デザイン・ビューの「レスポンシブ・デザイン・ビュー」を使用します。さまざまな画面サイズに対してCSSをテストできるようになります。

出典

2014-09-02 17:07:32 mshindal

はCtrl +Shiftキー + Mを使用して応答設計ツールを使用してください。あなたはすでにあなたをシミュレートするためにあなたのヘッダーを変更するためにRandom Agent Spooferプラグインと一緒にカスタマイズされた画面サイズを設定するための（開発ツール経由）応答デザインモードに建て言及を使用することができます

出典

2015-01-15 20:22:23 mario

これは最も簡単な方法です –

レスポンシブモードはモバイルシミュレーションと同じではありません –

はモバイル、タブレットを使用しているなど多くのウェブサイトは、彼らを指定しますこれらの識別されたヘッダーに基づいたコンテンツ

は、開発ツールとして、あなたは開発者ツールに組み込まれて使用することができます（ + CtrlキーShiftキーを + IまたはCmdを + Shiftキー + Mac用I）クロームdevのに非常によく似になってきましたツール

出典

2015-03-12 10:27:27 JHannes

ChromeのツールバーをChromeのインスペクタで使用する方がよいと思います。これは、ユーザーエージェントスイッチと応答モードを提供します。