ウェブを開発する人のために
開発者目線で作られた唯一のブラウザー
Firefox Developer Edition は自動的に Mozilla へフィードバックを送信します。 詳しくはこちら
-
開発者のために作りました
開発者のために作られた唯一のブラウザーです。作成、テスト、サイズの変更といった、開発のワークフローで必要とされる機能をすべて持っています。
-
ブラウザー対応テストも簡単に
インストールされたアドオンを利用すれば、Firefox Developer Edition を操作するだけで、他のブラウザーや、他の端末上で動作しているコードの調査やデバッグができます。
-
デザイナーにも使って欲しい
レスポンシブデザインビューとスタイルエディターと組み合わせれば、画面サイズにあわせたレンダリング結果をその場で確認しながら CSS を編集できます。ピクセルパーフェクトな実装の大きな助けになります。
なじみのツール、だけじゃない
Firefox Developer Edition の開発ツールはおなじみのものだけではありません。強力で開発力をぐっと向上させるものが新たに搭載されています。Firefox ならではのツールを使って、より効率よく、より良い開発を。
-
視覚編集ツール
ページ上で再生されている CSS と HTML のアニメーションを、調査パネルから視覚的に編集できます。定規と計測ツールを使えば、あらゆる要素の整列やサイズ、パティングも確認できます。
視覚編集ツールの詳細はこちら -
DevTools Challenger
Developer Edition の視覚アニメーションツールと CSS 編集ツールを使って、深海を冒険し、奇妙な生き物たちと交流してみましょう。
DevTools Challenger を試す -
パフォーマンスツール
フレームレートや、メモリー消費量、JavaScript プロファイラーとタイムライン表示。これらのツールを使えば、パフォーマンスを下げている要因の特定と、その解消がより簡単になります。
パフォーマンスツールの詳細はこちら -
ページインスペクター
ウェブページで利用されている HTML と CSS を確認できます。これに加えて、文書の構造やレイアウトの変更も可能です。
ページインスペクターの詳細はこちら -
Web Audio エディター
Web Audio API で作成されるオーディオグラフをリアルタイムで調査でき、ノードが期待通りに接続していることの確認が容易になります。
Web Audio エディターの詳細はこちら -
ウェブコンソール
ウェブページに関するログが出力されるコンソールです。JavaScript も実行できるため、ウェブページのコンテンツを操作できます。
ウェブコンソールの詳細はこちら -
JavaScript デバッガー
ステップ実行により JavaScript のコードの振る舞いを検証したり、状態を書き換えることでバグの発見と原因の特定が容易になります。
JavaScript デバッガーの詳細はこちら -
ネットワークモニター
ブラウザーとサーバー間のすべての通信を監視できます。通信時間や、引数、ヘッダーといった各リクエストの詳細も見られます。
ネットワークモニターの詳細はこちら -
スタイルエディター
ウェブページで利用されている CSS を編集できます。また新しく CSS を作成することや、既存の CSS をページに適用することもできます。
スタイルエディターの詳細はこちら -
レスポンシブデザインビュー
画面サイズを変更しながら表示テストを行えます。もうブラウザーのウィンドウサイズを変更する必要はありません。
レスポンシブデザインビューの詳細はこちら -
Valence
ブラウザーや端末をまたがる開発や互換性のテストを効率よく行えるアドオンです。このアドオンは標準でインストールされます。
Valence の詳細はこちら