サイト制作に関するメモ書き

HOME > その他 > Google ChromeのDeveloper Toolsでエミュレートするユーザーエージェントを追加する

Google ChromeのDeveloper Toolsでエミュレートするユーザーエージェントを追加する

Google ChromeのDeveloper Toolsでdevice modeにユーザーエージェントを追加してみます。

追加方法

Developer Toolsを開き、左上のToggle device toolbarをクリックします。

to-add-a-user-agent-to-emulate-in-google-chrome-of-developer-tools01

ブラウザに戻り、上部バーの左にあるデバイス選択をクリックします。

to-add-a-user-agent-to-emulate-in-google-chrome-of-developer-tools02

Editをクリックします。

to-add-a-user-agent-to-emulate-in-google-chrome-of-developer-tools03

Add custom deviceをクリックします。

to-add-a-user-agent-to-emulate-in-google-chrome-of-developer-tools04

デバイス名とユーザーエージェントを入力します。
必要に応じて画面サイズや解像度も入力して下さい。

to-add-a-user-agent-to-emulate-in-google-chrome-of-developer-tools05

今回は以下のように入力してみました。
入力が完了したらAddをクリックします。

to-add-a-user-agent-to-emulate-in-google-chrome-of-developer-tools06

デバイス選択に追加したデバイスが表示されました。

to-add-a-user-agent-to-emulate-in-google-chrome-of-developer-tools07

選択すると、以下のように表示が切り替わりました。

to-add-a-user-agent-to-emulate-in-google-chrome-of-developer-tools08

特定のデバイスで不具合が出ている場合や、簡単にチェックを行っておきたい場合などに便利ですね。
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP