57

コンピューターのモバイル デバイス モードで Web サイトを表示およびデバッグできるようにしたいと考えています。また、Firebug などのツールを使用して Web サイトをデバッグしたいのですが、Firebug を使用することもできます。それを行うための確立された解決策は何ですか？

4

7 に答える 7

48

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

Ctrlサイズ変更に関しては、Firefox/Chrome には+ Shift+ IOR経由でアクセスできる独自のリソースがありますF12。「スタイル エディター」タブに移動し、「アダプティブ/レスポンシブ デザイン」アイコンをクリックします。

Firefox の古いバージョン

古い Firefox

新しい Firefox/Firebug

ファイアフォックス

クロム

クロム

※「Web Developer」などのアドオンをインストールする方法もあります

于 2013-05-23T13:17:22.957 に答える
16

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

Web サイトで HTTP ヘッダーも使用してモバイル デバイスを識別している場合は、次の操作を実行できます。

  1. ヘッダーの変更プラグインを Firefox ブラウザーに追加します ( https://addons.mozilla.org/en-US/firefox/addon/modify-headers/ ) 。
  2. プラグイン変更ヘッダーの使用:
    • ヘッダータブを選択->アクション「追加」を選択
    • User-Agentたとえば iPhone をシミュレートするには、名前と値を含むヘッダーを追加します。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 プラグインを使用できるようになります。

それが役に立てば幸い！

于 2013-07-18T12:29:48.563 に答える
6

Tools -> Web Developer -> Responsive Design View の下にある "Responsive Design View" を使用します。さまざまな画面サイズに対して CSS をテストできます。

于 2014-09-02T17:07:32.550 に答える
2

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

開発ツールとして、組み込みの開発者ツール ( Mac ではCtrl+ Shift+IまたはCmd+ Shift+ I) を使用できます。これは、Chrome 開発ツールと非常によく似ています。

于 2015-03-12T10:27:27.880 に答える