Introducing the Web Inspector勝手訳
nightlyに追加された新しいDOMツリービューア。Proアプリケーションで採用されていたインスペクタスタイルを踏襲している。10.6ぐらいにはAPIになるかも。
WebKitの新しい追加機能を紹介しましょう──Web Inspectorです。Web InspectorでコンパクトなHUDスタイルのウインドウで生のDOM階層のブラウズが可能になり、web開発者とWebKitハッカーの求めに同様に応じます*1。
Web Inspectorはページ中で選択されているノードを階層中にハイライトします*2。またノードをノード名、idやCSSクラス名で検索可能です。
このインスペクタ独自の機能の一つに、ノードをより深く掘り下げる際にダブルクリックでDOM階層を釘付けにする機能があります。これで最小限の余白で特定のサブツリーにだけフォーカスでき、幾層にもネストされたページの管理が楽になります。
Styleペインではフォーカスされたノードに適用されているCSSルールを全て見る事が出来ます。これらのルールはcascadeの順に列挙され上書きされた属性には打ち消し線が引かれます──これでcascading stylesheetsがページレイアウトにどのように作用しているのかを実際に見る事が出来ます。全ての省略表記属性は、省略表記によって生成された詳細属性を表示したり隠したりするためのディスクロージャトライアングルを持ちます。
それではあなたのツリー*3をアップデートするかnightlyをダウンロードするかしてWeb Inspectorを試してみてください。nightlyのWeb Inspectorは常に有効です。しかし、あなた自身のビルドで有効にするには、一度ターミナルに以下のように打ち込んでください。defaults write com.apple.Safari WebKitDeveloperExtras -bool true全てのwebページのコンテクストメニューに"Inspect Element"と言う項目が追加されているはずです。選択するとWeb Inspectorが開き、カーソルの下にあったノードにフォーカスし直します。
私達はあなた達が抱くであろう機能要望のあらゆる論点を追跡する為にBugzillaに新しく"Web Inspector"コンポーネントを追加しました。
全面的な低レベルでのサポートとデザインアイディアをくれたDave Hyattと、すばらしいユーザーインターフェイスに関するブレインストーミングを手伝ってくれたGeoff GarenとMaciejに、大きな感謝を捧げたいと思います。
