web-dev-qa-db-ja.com

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

ウェブサイトをモバイルデバイスモードで表示するツールを探しています。また、Firebugなどのツールを使用してWebサイトをデバッグするか、Firebugを使用できます。それを行うための確立されたソリューションは何ですか？

firefoxmobileplugins
54
user1433439

ブラウザのツール（Firefox、IE、Chrome ...）を使用してJavaScriptをデバッグできます。

サイズ変更に関しては、Firefox/Chromeには、 Ctrl + Shift + I OR F12。 [スタイルエディター]タブに移動し、[アダプティブ/レスポンシブデザイン]アイコンをクリックします。

古いFirefoxバージョン

Old Firefox

新しいFirefox/Firebug

Firefox

Chrome

Chrome

*別の方法は、「Web Developer」のようなアドオンをインストールすることです

45
PiLHA

を使用してレスポンシブデザインツールを使用する Ctrl + Shift + M。

25
mario

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

WebサイトでHTTPヘッダーも使用してモバイルデバイスを識別する場合、次のことができます。

  1. Firefoxブラウザーに変更ヘッダープラグインを追加します（ https://addons.mozilla.org/en-US/firefox/addon/modify-headers/ ）
  2. プラグイン変更ヘッダーの使用：
    • 「ヘッダー」タブを選択->アクション「追加」を選択
    • シミュレートする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のヘッダーを追加します
    • 「追加」ボタンをクリックします
  3. その後、FirefoxでWebアプリケーションのモバイルバージョンを表示し、Firebugプラグインを使用できるようになります。

それが役に立てば幸い！

16
Kristy

Firefoxアドオン ユーザーエージェントオーバーライド を使用できます。このアドオンを使用すると、たとえば次のようなユーザーエージェントを使用できます。

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

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

17年11月更新：

Firefox 57のリリースとWeb拡張機能の導入により、残念ながらこのアドオンは利用できなくなりました。または、設定でFirefoxの設定general.useragent.overrideを編集できます。

  1. アドレスバーに「about:config」と入力します
  2. general.useragent.overrideを検索
  3. 設定が存在しない場合は、about：configページを右クリックし、[新規]をクリックして、[文字列]を選択します。
  4. 新しい設定にgeneral.useragent.overrideという名前を付けます
  5. 必要なユーザーエージェントに値を設定します
12
mrt

[ツール]-> [Web開発者]-> [レスポンシブデザインビュー]にある[レスポンシブデザインビュー]を使用します。さまざまな画面サイズに対してCSSをテストできます。

6
mshindal

レスポンシブデザインモード（開発ツール経由）を使用して、カスタマイズされた画面サイズを Randomと一緒に設定できますAgent Spoofer ヘッダーを変更して、モバイル、タブレットなどを使用していることをシミュレートするプラグイン。多くのWebサイトは、これらの識別されたヘッダーに従ってコンテンツを指定します。

開発ツールとして、組み込みの開発者ツール（Ctrl + Shift + I または Cmd + Shift + I Macの場合）Chrome devツールと非常によく似ています。

2
JHannes

chromeインスペクターでchromeトグルデバイスツールバーを使用することをお勧めします。レスポンシブモードと共にユーザーエージェントスイッチを提供します。 enter image description here

1
Jaison