ネットワーク条件: ユーザー エージェント文字列をオーバーライドする

Kayce Basques
Dale St. Marthe
Dale St. Marthe
LinkedIn

概要

[Network conditions] パネルを使用して、ユーザー エージェント文字列をオーバーライドし、さまざまなネットワーク速度をエミュレートします。

ユーザー エージェント文字列をオーバーライドすると、ブラウザがウェブサーバーに対して自身を識別する方法が変更されます。つまり、ブラウザは以前のバージョンや別のブラウザを完全にシミュレートできるため、レスポンシブ デザイン、互換性、機能検出のテストに役立ちます。

ユーザー エージェント文字列をオーバーライドしても、Chrome ブラウザの内部的な機能は変わりません。Chrome に配信されるコンテンツが変更されます。

[ネットワークの状態] パネルを開く

[Network] パネルから、または DevTools から手動で [Network conditions] パネルを開きます。

[ネットワーク] パネルを使用して [ネットワークの状態] パネルを開くには、次の操作を行います。

  1. DevTools を開きます。
  2. [ネットワーク] パネルに移動します。
  3. network_manage [その他のネットワーク条件] ボタンをクリックして、[Network conditions] パネルを開きます。
[その他のネットワーク状態] ボタンがハイライト表示され、[ネットワークの状態] パネルが開いています。
図 1. [ネットワーク] パネルと [ネットワークの状態] パネル

[ネットワークの状態] パネルを手動で開くには:

  1. DevTools を開きます。

  2. 次のコマンドを実行して、コマンド メニューを開きます。

    • macOS: Command+Shift+P
    • Windows、Linux、ChromeOS: Ctrl+Shift+P
      「ネットワークの条件」が入力されたコマンド メニュー。
      図 2. コマンド メニュー

  3. 「Network conditions」と入力し、[ネットワーク条件を表示] を選択して、Enter キーを押します。DevTools ウィンドウの下部に [Network conditions] パネルが表示されます。

または、右上にある more_vert [その他のオプション] > [その他のツール] > [ネットワークの条件] を選択します。

ユーザー エージェント文字列をオーバーライドする

[Network conditions] パネルでユーザー エージェント文字列をオーバーライドするには、次の操作を行います。

  1. [ネットワークの状態] パネルを開きます。

  2. [ユーザー エージェント] セクションで、[ブラウザのデフォルトを使用] チェックボックスをオフにします。

    [ブラウザのデフォルトを使用] を無効にします。
    図 3. [ブラウザのデフォルト値を使用] の無効化

  3. リストからユーザー エージェント文字列を選択するか、独自のカスタム文字列を入力します。

  4. 結果を表示するには、ページを更新してください。

user-agent Client Hints を編集する

[Network conditions] パネルでは、選択したユーザー エージェント文字列の User-Agent Client Hints をカスタマイズできます。

この機能を使用する手順は次のとおりです。

  1. リストからユーザー エージェント文字列を選択するか、独自のカスタム文字列を入力します。

  2. arrow_drop_down [User agent client Hints] プルダウンをクリックします。関連する値が自動入力されたフォームが表示されます。

    User-Agent Client Hints フォーム。
    図 4. User Agent Client Hints フォーム

  3. deletedelete をクリックしてアイテムを削除し、[ブランドを追加] をクリックしてユーザー エージェント リストと完全バージョン リストに追加して、フォームを編集します。

  4. 完了したら、フォームの下部にある [Update] ボタンをクリックします。

  5. 結果を表示するには、ページを更新してください。

ネットワーク速度のスロットル

[ネットワークの状態] パネルでネットワーク速度を調整するには、[ネットワーク スロットリング] リストをクリックし、[高速 3G]、[低速 3G]、[オフライン] のいずれかを選択します。

[ネットワークの状態] パネルの [ネットワーク スロットリング] プルダウン。
図 5. [ネットワークの状態] パネルのネットワーク スロットリング リスト

また、[Network] パネルでは、同様の方法でネットワーク速度を調整できます。[Network] パネルを開き、アクションバーの [Throttle list] から必要な速度を選択します。

[ネットワーク] パネルの [ネットワーク スロットリング] プルダウン。
図 6. [ネットワーク] パネルのネットワーク スロットリング リスト

[パフォーマンス] パネルを使用して、ネットワーク速度を調整することもできます。[パフォーマンス] パネルを開き、[settings] [設定] をクリックし、[ネットワーク] リストから [Fast 3G] または [Slow 3G] を選択します。

[パフォーマンス] パネルの [ネットワーク スロットリング] プルダウン。
図 7. [パフォーマンス] パネルのネットワーク スロットリング リスト

ネットワーク スロットリング プロファイルを作成して、独自のカスタム ネットワーク スロットリング パラメータを設定します。方法については、スロットリングをご覧ください。