原文: Reintroducing the Firefox Developer Tools, part 2: the Scratchpad and the Style Editor on September 24, 2013 by Jason Weathersby, Will Bamberg and Robert Nyman [Editor]

本記事は Firefox 内蔵の開発ツールとその機能や現状に注目する、全 5 編のパート 2 です。現在できること、進歩、そして目指していることのすべてをお見せすることが目的です。

本シリーズの第 1 回では、Web コンソールと JavaScript デバッガについて説明しました。これら 2 つのツールは強力であり、また Web アプリケーションの調査や変更機能を提供しますが、アプリの構築やデバッグを行う際の開発者のエクスペリエンスをさらに高める、付加的ツールを利用できます。本記事では、スクラッチパッドとスタイルエディタを手短に紹介します。

初回の記事と同様に、機能のいくつかを説明する簡単なスクリーンキャストとと合わせて各ツールを紹介します。

スタイルエディタ

スタイルエディタは主に、現行アプリのコンテキスト内にあるスタイルシートの編集、デバッグ、新規作成を行うために使用します。スタイルエディタで施した変更点は、読み込み済みのページへ自動的に反映されます。カスケーディングスタイルシート (CSS) について詳しくない場合は、MDN の CSS ドキュメントを見るようにしてください。

スタイルエディタでは、エディタを使用して施した変更内容を保存できます。さらに、既存のスタイルシートをインポートして現行ページに適用したり、特定のスタイルシートを個別に無効化したりすることも可能です。またスタイルエディタは、調査中の要素向けのスタイルシートへ開発者がすばやくアクセスできるツールである、インスペクタと連携しています。以下のスクリーンキャストで、スタイルエディタの機能を紹介します。

スタイルエディタのより詳細な情報については、MDN のドキュメントをご覧ください。

スクラッチパッド

スクラッチパッドには多くの用途がありますが、要するに JavaScript のライブエディタおよびプロトタイピングのツールです。開発者はスクラッチパッドを使用して、現行ページ内のオブジェクト、変数、スクリプトにアクセスできます。さらに表示中のページのスコープで、エディタ内に完成した関数を記述してテストを実施できます。そして、これらの変更内容は現行アプリケーションに付加および保存できます。

外部の JavaScript ファイルを読み込んでテストを行うこともできます。単純にコードを実行する、コードを実行して返されたオブジェクトを調査する、コードを実行してその結果をスクラッチパッド内にコメントとして出力するといった、いくつかの実行方法を開発者は使用できます。以下のスクリーンキャストで、スクラッチパッドの機能をいくつか説明します。スクラッチパッドはスクリプトを、ページで読み込まれたスクリプトと同じコンテキストで実行することに注意してください。スクリーンキャストの例では、この機能を示すために jQuery ライブラリとカスタムスクリプトをいくつか使用しています。

スクラッチパッドのより詳細な情報については、MDN のドキュメントをご覧ください。

JavaScript についてあまり詳しくない場合は、言語や技術について学ぶための資料の包括的な一覧を載せた MDN のドキュメントを確認するようにしてください。

もっと知る

これらのスクリーンキャストでは、ツールの主要な機能について簡単に紹介しています。すべての開発ツールの詳しい情報は、MDN のツール関連ドキュメントで確認してください。

次回予告

次回の記事では、レスポンシブデザインビューや App Manager によるリモートデバッグといった、モバイルデザインの機能に注目します。今後の記事で詳しい説明を見たい機能についての提案は、コメント欄への投稿でお寄せください。