この記事は Mozilla Tech に投稿された “Introducing debugger.html” の抄訳です。

プロジェクトに関わっていると、現在と未来とを股にかけている感じがすることがあります。目の前にはとても大きな可能性が横たわり、それが日々高まっていく感覚。Firefox の開発ツールチームの最新プロジェクトである debugger.html に関わっていると、それを実感します。debugger.html とは Firefox とウェブのために設計された、新しい JavaScript デバッガーで、いずれ Firefox に統合され、現在のデバッガを置き換える予定です。これを作る過程で、デバッガー自身の実装、メンテナンス、そして使い方を考え直しています。

devtools-html/debugger.html で開発されている debugger.html

このデバッガーはもうすぐ Nightly 版の Firefox で利用できるようになります（Nightly 版 Firefox のダウンロードはこちら)。

このプロジェクトが始まってすぐのころ、プロジェクトの継続を諦め 1 からの作り直しを決定する理由について考えることに注力しました。このことについて デバッガーのリードである James Long が React Rally で素晴らしい講演をしています。これまで開発してきたデバッガーをリファクタリングすることもできました。そしてFirefox の他のチームが実際にリファクタリングをしていました。これには様々な利点があります。そのチームはウェブコンソールを同じようなアーキテクチャへとリファクタリングしています。しかし私たちのチームは、コードを 1 から書き直すという異なるアプローチを選択しました。Firefox の中のコードをリファクタリングすることを選択したコンソールと、Firefox の外の世界で生きることを選んだデバッガー。両方のチームは、それぞれのやり方の利点と困難さについて知見をためています。

debugger.html は React と Redux というモダンなウェブアプリのアーキテクチャを利用して、スクラッチからデバッガを作成しています。2016 年にプロジェクトは始まりました。その時点でレポジトリは空っぽでしたが、チームはデバッガーやツールの開発経験が豊富なメンバーで満たされていました。これまでのデバッガーは XUL と呼ばれる（ディナはいません。ズールだけです）、オープンではありますが、事実上プロプライエタリで、Firefox だけがサポートするマークアップ言語で作成されています。変更の困難さのほとんどは、この XUL に起因していました。なぜなら、XUL にはモデルとビューコンポーネントが入り組んでいて、簡単にできるはずの単純な変更も許さないようになっていたからです。Firefox の開発ツールは全て XUL から離れ、再利用性の高い React コンポーネントと Redux のストアモデルを採用したアーキテクチャへと移ろうとしています。コードをより小さなモジュールへと単純化が可能なこの変更によって、開発ツールの振る舞いの予測や、コードの理解、テストが容易になり、開発がより簡単になることでしょう。

また debugger.html は Firefox での利用だけを想定したものではありません。もちろん Firefox に向けた開発を優先してはいますが、複数のプラットフォームをターゲットとできるようにモデルを一般化し続けてもいます。製品としてリリースするには至っていませんが、Chrome Debugging Protocol 経由で Chrome のタブや Node のプロセスにアタッチすることも可能です。また再利用性の高いコンポーネントを利用して実装していることにより、エディタへの組み込んだデモや CLI のデモも行なっています。必要とされる UI コンポーネントは一部だけだとしても、アプリケーションモデルは意図したとおりに働き、多くの再利用の可能性を実現するでしょう。

ウェブ開発者ならこの新しいデバッガーを違和感なく使え、その新しい点にもすぐに気づくことでしょう。

ソースパネルはデバッガーの左側に配置されています。ここにはソースコードがフォルダごとにまとめられており、従来よりもより簡単にデバッグするソースコードを探し出せます。

右側にコールスタックや、スコープ、ブレークポイントといったデバッグに必要な情報が、使いやすくまとめられています。

すべての Mozilla のコードと同様、debugger.html のコードはオープンソースで、手がつけやすくなっています。debugger.html プロジェクトは Github 上にあり、必要に応じて更新できるよう、Firefox と密接に関連しています。プロジェクトのサイズは小さく、焦点を絞ったもので、コードのすぐそばに説明が書かれています。すでに数々の貢献者がいて、プロジェクトが見つけやすく、管理しやすく、取り組みやすいものであることを証明しています。

これは第一歩にすぎません。Firefox の開発ツールが持つ全ての機能が、ここにまとめられる予定です。今後の数ヶ月は、開発に参加したい人が、開発を始めやすいよいうにする作業に注力する予定です。また他のプラットフォームをどのように統合するかについて調査もする予定です。そして、Firefox とその他のプラットフォームに向けてのリリース方法について研究をする予定です。

debugger.html は開発者によって、開発者のために開発されているデバッガで、デバッグ方法の改善に興味のある全ての人に向けてデザインされています。このようにオープンなやり方で開発されているツールは、他にはありません。あなたの貢献がツールをよりよくします。ぜひ GitHub で、開発に参加してください。

Hacks ブログにも debugger.html についての情報が掲載されています。技術的な詳細はそちらを参照してください。