開発者用ツール

画面をスライドさせるには、Page Down キーと Page Up キーを押してください。

Opera には、Web 開発者を支援するためのツールがいくつか含まれています。

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

開発者用コンソール

メニューのツール > 詳細ツール > 開発者用ツールを選択すると、Dev.Opera の Web ページが開きます。そこに表示されるリンクの中にいくつかの JavaScript アプリケーションが含まれています。開発者用コンソールはその JavaScript アプリケーションの 1 つで、他のアプリケーションと同様に Opera ツールバーにドラッグ＆ドロップすることが可能です。開発者用コンソールを開くと、分析対象の Web ページの最上部に小さなウィンドウが表示され、DOM、JS、CSS、HTTP および About という 5 つのタブが表示されます。

開発者用コンソールは DOM タブ内で開き、「document (ドキュメント)」の下にノードのリストが折りたたまれた状態で表示されます。リストを展開するには、プラス記号をクリックします。ノードをクリックすると Web ページが少しの間明滅して、そのノードに関連する領域を示します。

逆に、Web ページ上の任意の場所をクリックすると DOM ノードのリストが開き、強調表示されているページの領域と関連するノードが示されます。関連する領域を見つけるには、Shift キーを押しながらマウスでページをスキャンします。

DOM タブの主な機能は次のとおりです。

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

開発者用コンソールでは、Web ページをインタラクティブに変更することができます。DOM タブの「Remove (削除)」ボタンでノードを削除することもできれば、CSS タブで CSS プロパティを編集することも可能です。この操作を行うには、適切なスタイルシートの「Show rules (ルールを表示)」ボタンを押します。変更の結果はすぐに表示され、エクスポートして後で使用することもできます。

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

ソースビューア

Opera には、Web ページの分析と変更を行うためのもっと単純なツールが搭載されています。それがソースビューアです。現在の Web ページのソースコードを確認する場合は、表示 > ページのソースを表示を選択するか、Ctrl+F3 キーを押すか、ページを右クリックして「ページのソースを表示」を選択します。

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

変更内容をキャッシュに保存して変更が適用されたページをすぐに表示するには、「変更を適用」をクリックするか、Ctrl+R を押します。
ページを選択した場所に保存するには、「保存」をクリックするか、Ctrl+S を押します。

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

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