開発者用ツール

Page Down または Page Up を押すとスライドが切り替わります。

Opera にはウェブ開発者を支援するためのツールがいくつか含まれています。中でも最も重要なツールが、ウェブページのリモートデバッグを可能にする Opera Dragonfly です。

開発者用コンソールは、開発中、またはデバッグ中にウェブページの分析やインタラクティブな変更を行うためのツールです。一方、ソースビューアは、ウェブページのソースコードの確認や手早い変更を実行できる、前者より単純なツールです。

Opera Dragonfly

ご注意: Opera Dragonfly のご利用にあたっては、JavaScript を有効にして下さい。

Opera Dragonfly は、ウェブページを遠隔操作しローカルにデバッグを実行するための JavaScript アプリケーションです。ツールを開くには、メニューから、ツール > 詳細ツール > 開発者用ツールを選択して下さい。ユーザーインターフェイスが以下の3つのタブを表示します。

Scripts タブ - JavaScript のデバッグ用
DOM タブ - HTML および CSS のデバッグ用
Error console タブ - エラー表示用

Opera Dragonfly は現在まだ開発中です。詳しくは以下をご参照下さい。

開発者用コンソール

Dev.Opera 上の他の JavaScript アプリケーションのように、開発者用コンソールはどの Opera ツールバーにもドラッグ＆ドロップすることができます。開発者用コンソールを開くと、分析対象とするウェブページの最上部に小さなウィンドウが表示され、中に DOM、JS、CSS、HTTP および About と5つのタブが表示されます。

ご注意: Dev.Opera 上で JavaScript アプリケーションを利用するには、ポップアップを有効にして下さい。

開発者用コンソールは DOM タブ内で開くと、"ドキュメント" の下にノードのリストが折りたたまれた状態で表示されます。プラス記号をクリックしてリストを展開することができます。ノードをクリックするとウェブページが一時的に明滅し、そのノードに関する領域を示します。

別の方法として、ウェブページ上の任意の場所をクリックするとDOM ノードのリストが開き、強調表示されたページの領域と関連するノードを表示します。関連する領域を調べるには、Shift キーを押しながらマウスでページをスキャンします。

DOM タブの主な機能は以下の通りです。

"Search（検索）" 機能では、標準の CSS セレクタ（例として、親子関係を示す p > a や、ID を検索する #menu など）を使用して DOM ツリーを検索し、任意のクラスのノードを見つけることができます。
"Snapshot（スナップショット）" 機能では、DOM の完全なスナップショットを取得できます。

開発者用コンソールでは、ウェブページをインタラクティブに変更することができます。DOM タブの "Remove（削除）" ボタンでノードを削除することができる他、CSS タブで CSS プロパティを編集することも可能です。この操作を行うには、適応するスタイルシートの "Show rules（ルールを表示）" ボタンを押して下さい。行なった変更の結果はすぐに表示されるため、エクスポートして後で使用することができます。

開発者用コンソールについての詳細は、Dev.Opera に記載されています。

ソースビューア

Opera にはウェブページの分析と変更を行える、より単純なソースビューアというツールも搭載されています。現在のウェブページのソースコードを確認する場合は、表示 > ページのソースを表示を選択するか、Ctrl+F3 を押す、もしくはキーを押しながらページを右クリックして、"ページのソースを表示" を選択します。

タブバーの新しいタブにソースビューアが開き、構文が強調表示されるため、ソースの概要が把握しやすくなっています。ページを編集するには以下の2つの方法があります。

変更内容をキャッシュに保存して、"変更を適用" をクリック、もしくは Ctrl+R を押すと、変更後の内容をすぐに表示することができます。
"保存" をクリック、もしくは Ctrl+S を押して、変更内容を好きな場所に保存することができます。

ローカルに保存したドキュメントを編集している場合は、"変更を適用" を選択すると、変更内容が永久的に保存されますのでご注意下さい。

外部プログラムを使用してソースの表示と編集を行う場合は、詳細設定内のプログラムでプログラムを指定することができます。