ニュース

ここ数年UIに変化のなかった「Microsoft Edge」の開発者ツール、大刷新へ

「Focus Mode」と呼ばれるシンプル・モダンなUIを試験実装

2022年4月5日 15:18

「Microsoft Edge」の開発者ツール（DevTools）

　「Microsoft Edge」に搭載されている開発者ツール（DevTools）のユーザーインターフェイスは、基本的に「Firebug」を踏襲した「Google Chrome」とほぼ共通のものとなっており、ここ数年大きく変わっていない。しかしその一方で、機能の拡充に伴いパネル類の数は大きく増えており、操作性は限界を迎えつつある。そこで、Microsoftは「DevTools」のユーザーインターフェイス刷新を考えているようだ。

　Edge Developer Experienceチームに所属するPatrick Brosset氏が3月30日（日本時間）、Twitterアカウントで明らかにしたところによると、この新しいユーザーインターフェイスは「Focus Mode」と呼ばれており、機能を損なうことなくユーザーインターフェイスを簡素化することを目的に設計されている。

　まだ試験的機能という扱いだが、「Edge 96」から用意されているようで、現行の安定版「Edge」でも設定画面から有効化できる。

新しいユーザーインターフェイス「Focus Mode」は設定画面から有効化できる
「Focus Mode」（手前）と従来の「DevTools」（奥）

　従来のユーザーインターフェイスとの最大の違いは、メインのタブが「アクティビティ バー」に置き換えられていることだ。アクティビティ バーは縦置きも横置きも可能で、ドッキング状態に応じて自動で切り替えることもできる。バーに好みのツールを登録し、切り替えながら利用するスタイルは変わらないが、バーに表示されるのはツールの名前ではなく、アイコンが主体となる（水平表示の場合はツール名も表示）。そのため、登録するツールの数が増えても表示の簡潔さは保たれる。

メインのタブがーが「アクティビティ バー」に

　また、コンソールの警告・エラーや修正を推奨する問題の表示も変更されている。従来はタブバーに個数が小さくまとめて表示されているだけだったが、アクティビティ バーではそれぞれのツールアイコンにインジケーターが表示されるスタイルとなっており、どこに問題があるのかがわかりやすい。

コンソールの警告・エラーや修正を推奨する問題の表示

　最下部にはドロワーの存在を示すバーがあり、右下の矢印アイコンをクリックすることで開閉ができる。ドロワーはいわば「DevTools」のセカンドパネルで、コンソールなど好みのツールをしまっておき、［Esc］キーで簡単に出し入れできるようになっている便利な機能だが、存在に気づいていない開発者も少なからずいるのではないだろうか。

右下の矢印アイコンをクリックしてドロワーを開閉。もちろん［Esc］キーも利用可能

　そのほかにも、メニュー構造の見直しやアイコンの追加などが行われており、モダンかつシンプルないでたちとなっている。