Google Chromeのデベロッパーツールを右側に表示させる方法

この記事のカテゴリ
ツール / サイト / サービス紹介
この記事に付けられたタグ

Google Chromeの「デベロッパーツール」はWEB管理者向け機能で、ツール画面上で各ページのJavaScriptやHTML・CSSを変更するとそれがリアルタイムで反映され、1つ1つの作業の挙動を確認しながら作業が行える便利なツールです。

Firefoxでいう「Firebug」のChrome版のような存在に当たります。

※あくまでツール画面上だけでの表示であって、実際のコードは変更されません。

Google Chrome デベロッパーツール

デベロッパーツールの起動はWindowsの場合は対象にするページを開いたら「F12」ボタン、MACの場合は「Command + Option + I」ボタンを押すか、画面を右クリックして「要素を検証」をクリックします。

Chromeの右クリックで要素を検証

このデベロッパーツールですが、初期状態だと画面下にウィンドウが表示されます。
ノートPCなど縦幅があまりない環境だと見づらい場合もありますので、これを画面の右側に移動させる方法をご紹介します。

デベロッパーツールの場合
まずは上述した方法でデベロッパーツールを起動します。

Google Chromeデベロッパーツールを右に表示させるボタン

ツール右上にあるボタンを押すと、別ウィンドウで開きますが、同一ウィンドウで右に移動させるには、このボタンを長押しします。
するとドロップダウンでもう1個ボタンが出現しますので、そちらをクリック。

デベロッパーツールを画面右に表示させた状態

するとこのように画面右に移動してくれました。
下に戻すには再度このボタンをクリックです。

Firebugの場合
ついでにFirefoxのFirebugを右側に表示させる方法もあわせて紹介です。

FirefoxのFirebugを画面の右に表示させる方法

こちらはツール右上の部分を右クリックする事で、どこに表示させるか選択できます。
「切り離し」は別ウィンドウの事です。

LINEで送る
Pocket

関連記事

コメントを書き込む

コメントは承認後に公開されます。メールアドレスは公開されません。
*」は必須項目です。