Firefox Auroraの6つの新しい開発者向け機能 - TechRepublic

Firefox Auroraのインストール

機能をテストするために、Firefox Auroraをダウンロードしてインストールする必要がありました。そこで、「Firefox Aurora 無料ダウンロード」ボタンをクリックし、実行ファイル firefox-27.0a2.en-US.win32.installer-stub.exe をクリックしました。

Aurora セットアップ ダイアログボックス

Aurora をデフォルトのブラウザにするオプションのチェックを外し、「オプション」ボタンをクリックすると、Aurora のセットアップダイアログボックスが表示されました。デフォルトのブラウザのチェックが外れていること、デスクトップにショートカットを作成するオプションのチェックも外れていることを確認しました。そして、「インストール」ボタンをクリックしました。

Auroraのダウンロードとインストール

PCへのダウンロードには数分かかりました（Time Warner Cable Turboでダウンロード速度は21Mbpsです）。インストールファイルを実行すると、ウイルス対策ソフトウェアから不明なファイルに関する通知が表示される場合があります。これは主にファイルが新しいためですが、プレベータ版であるため、現時点ではほとんど履歴がないことも原因です。

オーロラについて

ダウンロードとインストールが完了すると、すぐに Aurora ブラウザと「Aurora について」ボックスが表示されます。

クイック起動バーのAuroraアイコン

インストール中に、クイック起動バーにショートカットを追加するチェックボックスを選択すると、この画像の右端に表示されているように、Aurora の地球儀アイコンが表示されます。

新しいツールを試乗する

新しい Firefox 開発ツールを使用するには、Aurora の画面上の任意の場所を右クリックし、[要素の検査 (Q)] をクリックします。

Firefox 開発ツールパネル

開発者ツール パネルが開き、画面下部のインスペクター タブがデフォルトで表示されます。

JavaScript デバッガー: DOM イベントでブレークする

JavaScriptデバッガーによると、この新しいツールを使用すると、ブレークポイントを事前に設定することなく、さまざまなDOMイベントを自動的にブレークできます。JavaScriptデバッガーを使用するには、以下の手順に従ってください。

1. 開発者ツール パネルからデバッガー タブをクリックします。

2. 検索テキスト ボックスの右側にある [ペインの展開] ボタンをクリックします。

3. 「イベント」タブをクリックします。イベントをクリックすると、次回発生時に一時停止することができます。  

インスペクタツール: HTML エディタ

デフォルトでは、開発者ツールは「インスペクタ」タブで開きます。そこから、任意の要素を右クリックし、「HTMLとして編集」オプションを選択することで、HTMLを編集できます。

HTMLを編集する

すると、HTML を編集できるコンテンツ ボックスが開きます。

インスペクタタブのデフォルトのカラー単位形式を選択します

デフォルトのカラーフォーマットとカラースウォッチのプレビューを選択する

インスペクタタブのデフォルトのカラー単位形式を選択できるようになりました。選択オプションはツールボックスオプションにあり、開発者ツールパネルの左端にある歯車ボタンをクリックすると開きます。

色単位オプション

カラーセレクターの単位オプションは、16 進数、HSL(A)、RGB(A)、およびカラー名です。

カラー見本のプレビュー

右側のルール ペインからカラー スウォッチ プレビューが利用できるようになりました。インスペクター ペイン内の選択された要素の色が表示されます。「コンテンツ」には、実線 #000 の 2 ピクセルの境界線と色 #333 の背景のルールが含まれます。

コードミラー

人気が高く多用途なHTML5ベースのテキストエディタであるCodeMirrorは、ブラウザ向けにJavaScriptで実装されており、Firefox開発ツールのコンポーネントエディタとして使用されています。スタイルエディタ、デバッガ、インスペクタでは、前述の「HTMLとして編集」オプションとして、またスクラッチパッドでも使用できます。オプション設定では、ライトとダークの2種類の開発ツールテーマから選択できます。

ライトテーマの例

この図は、開発者ツール ペイン内でスタイル エディター ペインを開いたライト テーマの例です。

Webコンソール: リフローログ

開発者ツール パネルから、コンソール タブをクリックし、CSS メニューを選択して、ログ メニュー項目をクリックします。

ログがオンになっています

ログオンすると、アクティブで検査された Web ページでリフローが発生するたびに、記録されたリフローをトリガーした JavaScript 関数の名前がログに出力されます。

まとめ