Firefox 11は、2つの新しいWeb開発ツールをに追加しました Firefoxのすでに印象的な武器 。傾斜機能はウェブサイトの構造を3Dで視覚化し、スタイルエディタはCSSスタイルシートをその場で編集できます。
Tiltと呼ばれる3D機能は、WebサイトのDOMを視覚化する方法です。既存のDocumentInspectorと統合し、WebGLを使用してブラウザにリッチな3Dグラフィックスを表示します。
傾斜–3Dウェブサイトの視覚化
Firefoxのページインスペクター内からTiltにアクセスできます。開始するには、Web開発者メニューから「検査」を選択してページインスペクターを開きます。現在のページを右クリックして「要素の検査」を選択し、特定の要素でインスペクターを開始することもできます。
インスペクターツールバーの「3D」ボタンをクリックします。
3Dモードをアクティブにするとページの構造が表示されますが、回転するまでフラットに見えます。
左クリックでモデルを回転し、右クリックで画像を移動し、マウスホイールを使用してズームインおよびズームアウトします。
このビューは、インスペクターの他のツールと統合されています。 HTMLまたはスタイルパネルを開いている場合は、ページ上の要素をクリックして、その要素のHTMLコードまたはCSSプロパティを表示できます。
その他の3D機能
3D視覚化機能は、Tilt拡張機能に基づいていますが、Tilt拡張機能のすべての機能を備えているわけではありません。色をカスタマイズしたり、ビジュアライゼーションを3D編集プログラムで使用するために3Dモデルファイルとしてエクスポートしたりする場合は、をインストールする必要があります。 3Dアドオンを傾ける 。取得すると、Web開発者メニューに新しい「傾斜」オプションが表示されます。
プロンプトが表示されたら、[キャンセル]ボタンをクリックして、古いバージョンのTiltを使用します。
ウィンドウの左側に視覚化をカスタマイズするためのコントロールがあり、ページの上部にエクスポート機能を含む他のオプションがあります。
CSSスタイルエディター
ページのCSSスタイルシートを表示および編集するには、Web開発者メニューからスタイルエディタを開きます。
スタイルエディタは、現在のページのスタイルシートを一覧表示します。スタイルシートの名前の左側にある目のアイコンをクリックして、スタイルシートのオンとオフを切り替えます。スタイルシートを選択してコードを変更することにより、スタイルシートを編集します。
変更はすぐにページに反映されます。スタイルシートをオフに切り替えると、ページのスタイル情報が失われます。スタイルシートを編集すると、入力中に編集内容がページに表示されます。
スタイルシートの1つのコピーをコンピューターに保存したり、コンピューターから既存のスタイルシートをインポートしたり、スタイルエディターウィンドウの[保存]、[インポート]、または[新規]リンクを使用して新しい空白のスタイルシートを追加したりできます。
3D視覚化機能は、現在のページの変更を監視し、変更が発生したときに通知します。 3Dインスペクターを開いた状態でスタイルエディターを使用すると、変更内容がすぐに3Dビューに反映されます。これは、FirebugなどのWebページを変更するサードパーティの拡張機能でも機能します。
