Google Chromeの「デベロッパーツール」はWEB管理者向け機能で、ツール画面上で各ページのJavaScriptやHTML・CSSを変更するとそれがリアルタイムで反映され、1つ1つの作業の挙動を確認しながら作業が行える便利なツールです。
Firefoxでいう「Firebug」のChrome版のような存在に当たります。
※あくまでツール画面上だけでの表示であって、実際のコードは変更されません。
デベロッパーツールの起動はWindowsの場合は対象にするページを開いたら「F12」ボタン、MACの場合は「Command + Option + I」ボタンを押すか、画面を右クリックして「要素を検証」をクリックします。
このデベロッパーツールですが、初期状態だと画面下にウィンドウが表示されます。
ノートPCなど縦幅があまりない環境だと見づらい場合もありますので、これを画面の右側に移動させる方法をご紹介します。
- デベロッパーツールの場合
-
まずは上述した方法でデベロッパーツールを起動します。
ツール右上にあるボタンを押すと、別ウィンドウで開きますが、同一ウィンドウで右に移動させるには、このボタンを長押しします。
するとドロップダウンでもう1個ボタンが出現しますので、そちらをクリック。
するとこのように画面右に移動してくれました。
下に戻すには再度このボタンをクリックです。 - Firebugの場合
- ついでにFirefoxのFirebugを右側に表示させる方法もあわせて紹介です。
こちらはツール右上の部分を右クリックする事で、どこに表示させるか選択できます。
「切り離し」は別ウィンドウの事です。
