開発者ツール

開発ツールの有効化

開発者ツールを利用するには、まずそれを有効にする必要があります。メニューの【編集 → 設定】から環境設定を表示し、[詳細]タブの[メニューバーに"開発"メニューを表示]にチェックを入れます。

こうすることでメニューに[開発]が追加され、またページ上のコンテキストメニューには[要素の詳細を表示]が追加されます。

Web Inspector

メニューの【開発 → Web インスペクタを表示】か、ショートカットのCtrl + Alt + Iから起動できます。

要素パネル (Elements Panel)

調査したい要素を右クリックし[要素の詳細を表示]を選択することで、要素パネルでその要素の情報を確認できます。これはパネル下部の虫眼鏡アイコンを選択してから、要素をクリックしても同じです。

[要素の詳細を表示]がメニューに表示されないときには、環境設定から開発ツールを有効にする必要があります。