☰

ブラウザの特定の幅で入力するにはどうすればいいですか？ChromeとChrome開発ツールを使用しています

tag-icon • tag-icon google-chrome google-chrome-devtools
ブラウザの特定の幅で入力するにはどうすればいいですか？ChromeとChrome開発ツールを使用しています

適切なブレークポイントを作成できるように、画面サイズの幅の値を入力したいと思います。私は、1 つのサイズから別のサイズに 1 ピクセルずつ変更しようとすることがよくあります。Chrome では、2 ピクセルずつ変更することもあるため、必ずしも成功するとは限りません。幅を特定の幅に入力する方法はありますか?

私は Mac OS X を使用しています。この質問は開発ツールに関するもので、キーボードを使用してブラウザ ウィンドウの幅を設定する方法を尋ねています。マウスを使用して開発画面とページ間の幅を調整すると、ウィンドウの幅と高さを示す数字が表示されます。これは、ブレークポイントを使用してレスポンシブな Web サイトを作成するときに便利です。マウスを使用してポイントごとに正確に設定しなくても済むように、キーボードでこれを行う方法を知りたいです。

答え1

Chrome デベロッパー ツールで、コンソールを開き、エミュレーション タブを選択します。ここで、一般的なデバイスの一覧から選択する「デバイス」(iPhone など。これにより、サーバーに送信されるユーザー エージェントも変更されます) と、寸法を手動で設定する「画面」が表示されます。

参照モバイルエミュレーションChrome のヘルプで。

答え2

Chrome には、「Web Developer Tools」という拡張機能があります。この拡張機能には、ブラウザを特定の HxW にサイズ変更できる機能があります。独自のサイズを設定することもできます。

(リンクを投稿してもよいかどうかわからないので、投稿は控えます)。

編集：

ありがとう、ウィル！

拡張機能の作成者へのリンクは次のとおりです:http://chrispederick.com/work/web-developer/

答え3

Window Resizerと呼ばれる別の拡張機能もあります（https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh) は、@Marcelo が言及したものと同じ機能を持ちます。これは、古いバージョンの Chrome を使用しているユーザーにとって便利かもしれません。

答え4

プラグインを必要としない代替アプローチ。

  1. 組み込みのChromeデベロッパーツール（F12またはCtrl + Shift + I）を開きます。
  2. Consoleタブを選択
  3. 現在の URL で新しいウィンドウを開くには、以下を入力します (次の手順は、サイズ変更可能として明示的に開かれたウィンドウでのみ機能します) 
    let w = window.open(window.location, "dev resize", "resizable");

新しく開いたウィンドウのサイズは、次のいずれかの方法で変更できます。

  1. 新しいウィンドウでChrome DevToolsを開き、次のように入力します。 
    window.resizeTo(window.outerWidth - 1, window.outerHeight);
  2. 元のウィンドウに戻り、 
    w.resizeTo(w.outerWidth - 1, w.outerHeight);

resizeToこのコマンドを好きなだけ繰り返すと、そのたびに幅が 1 ピクセルずつ減少します。

Firefox でも動作します (おそらく Edge でも動作しますが、テストしていません)

テスト済み:

  • Chromeバージョン111.0.5563.65
  • Firefox のバージョン111.0 (Firefox と Chrome のバージョン番号が一致しているのは単なる偶然だと思います)

関連情報