先日公開された Opera の開発者向け情報サイト Dev.Opera にて、 Opera 純正の開発者ツールが公開されました！今回公開されたのは以下の 3 つです。

DOM Console

インタラクティブに DOM ツリーを表示し、スタイルや属性などの状態を調査できます。

DOM Snapshot

現在の DOM ツリーのスナップショットを別ページに表示します。

CSS Editor

スタイルシートをその場で編集できるツールです。編集後のスタイルシートをエクスポートすることもできます。

まだ早期プレビュー版ということですが、現時点でもかなり実用的です。 Opera で Web 開発を行っている方には朗報ですね。ということで、本日はこれらのツールのレビューをお届けしたいと思います。概要はすでに芦塚さんの記事で紹介されているので、少し詳しめに（＾＾；

各ツールは以下の方法でインストールできます。

1. Opera developer tools のページを Opera で表示する。
2. 記事の中にある「DOM Console」、「CSS Editor」、「DOM Snapshot」のリンクを個別に Opera のツールバーにドラッグ＆ドロップする。どのツールバーでも OK です。
3. ドロップした位置にボタンが配置される。

これだけです。簡単ですね！動作環境は Opera 9.0 以降ということです。以下、それぞれのツールをご紹介していきますが、私も使い始めたばかりなので間違いや不足があるかもしれません。気付き次第訂正していきますので、ご了承ください。

DOM Console は現在表示しているページの DOM ツリーの状態を確認できるツールです。動的な DOM ツリーの変化にもきちんと追随するなど、かなり作りこまれています。ただし、ツリーの編集は要素の削除ができるのみですので、このあたりは今後の拡張が望まれるところですね。

それでは使ってみましょう。任意のページを表示して DOM Console のボタンをクリックすると、以下のようなウインドウが開きます。

上部のチェックボックスは表示される情報を制御するフィルターの設定です。チェックされた情報が表示されなくなります。今のところ、制御できる項目が大雑把過ぎてあまり使えません（＾＾；。その下が現在の DOM ツリーです。基本的な操作方法は以下の 4 つ。

• 要素名の左の '+' をクリックすると、子ノードが展開されます。
• 要素名の右の三角にマウスカーソルを重ねると詳細情報の表示や要素の削除が行えるメニューが表示されます。
• それぞれの要素名をクリックすると、元ページの対応する領域がハイライト表示されます。
• 元ページの任意の場所をクリックすると、それに対応する要素が表示されるまでツリーが展開され、対応する要素がハイライト表示されます。

DOM ツリーの各要素と実際のページの対応を視覚的に確認できるのは便利ですね。とくに最後の方法はツリーをひとつずつ展開していく手間が省けるので重宝します。

(2) のメニューでは以下の操作が可能です。

attributes

HTML 内で明示的に定義された属性とその値が表示されます。

computed styles

現在の CSS スタイルを表示します。 style 属性で直接定義されたものだけではなく、 style 要素や外部スタイルシートによる定義なども含めた最終的なスタイルの値が確認できます。

properties

DOM オブジェクトに定義されている property を表示します。

metrics

width, height, margin, padding, border の値を視覚的に表示します。

remove

その要素とすべての子要素を削除します。

最近の Ajax なサイトは動的に表示内容を生成するので、普通にソースを表示しただけではほとんど情報が得られないことがよくあります。 DOM Console を使えば、そのようなサイトも効率的に調査することができますね。

現在の DOM ツリーの状態を別ページに表示します。 DOM Console の非インタラクティブ版という感じでしょうか。ボタンをクリックするだけで、以下のようなページが表示されます。

DOM Console は詳細な情報の調査には適しているものの、ページ全体を見渡して概要を把握するには不向きです。そのようなときにはこちらを使うとよいでしょう。

名前のとおり、ページの CSS をその場で編集できるツールです。 CSS Editor のボタンをクリックすると、以下のウインドウが開きます。

CSS の編集を行うには、編集したいファイルの「show rules」ボタンをクリックします。

CSS ファイルの内容がセレクタごとに表示され、内容が編集できるようになります。編集結果はリアルタイムで元ページに反映されますので、細かい調整にはとても便利です。編集した内容は、「export」ボタンをクリックすることで別ページに表示できます。

この内容を既存の CSS ファイルに上書きすれば、恒久的に編集内容が反映される、というわけです。

この CSS Editor、なかなか便利ツールなのですが、以下のような問題もあります。

• セレクタを追加することができない（アトリビュートの追加は可能）。
• 元ファイルのコメントやインデントなどが完全に無視される。

これらの制限があるので、最初からこのツールを使って CSS ファイルを作成するのは現実的ではありません。だいたいの枠組みができた後の調整用と考えるのが無難でしょう。今後の改善に期待です。

最後に、関連する Tips を少しご紹介しておきます。

ツールを別ウインドウに表示

今回のツールはどれも新しいウインドウを開きます。たいていの場合、これらをメインウインドウとは別の独立したウインドウに表示したいと思うことでしょう。そのようなときは、ツールウインドウのタブをデスクトップにドラッグ＆ドロップすれば OK です。

HTML ソースの編集

CSS は CSS Editor で編集できますが、 HTML ソースそのものを編集したいときもあるでしょう。実は Opera のソース表示ウインドウはそのままエディタとしても機能します。詳細はこちらの記事をご覧ください。

Web Developer Toolbar

こちらのページで公開されている Web Developer Toolbar も便利なツールです。今回のツールと併せてどうぞ。詳細はこちらの記事でご紹介しています。

本日は Opera からリリースされた開発者向けツールをご紹介しました。 Opera を使った Web 開発がかなり便利になりそうですね。私もちょうど blog をリニューアルしている最中なので、活用していこうと思います。まだ早期プレビュー版ということですから、今後の改善にも期待が持てますね。すぐに Opera ユーザー必携のツールとなることでしょう。皆さんもぜひ使ってみてください！