ニュース
「Microsoft Edge」の開発者ツールはパーソナライズも充実 ～日本語化、テーマ、ツールレイアウト
使いこなしてWebデバッグを実りあるものにしよう
2021年9月16日 17:09
「Microsoft Edge」の開発者ツール（DevTools）はデバッグに必要な機能だけではなく、自分好みにカスタマイズするパーソナライズ機能も充実している。米Microsoftは9月14日（現地時間）、その一部を紹介する記事を公式ブログ「Microsoft Edge Blog」で公開した。
ツールの追加・削除・移動
「Edge」の開発者ツールは［F12］キーでアクセス可能。これは「EdgeHTML」ベースの古い「Edge」から受け継がれているキーボードショートカットだが、「Google Chrome」に合わせて［Ctrl］＋［Shift］＋［I］キーで開くことも可能だ（［I］キーは「Inspect」（調査する）からきているものと思われる）。
この開発者ツールは約30のツールから成っており、よく使うものをタブバーの［+］ボタンから追加して、他のツールと切り替えながら利用する仕組みになっている。しかし、タブバーのスペースは限られており、すべてのツールを表示しておくには足りない。
そこで、「Edge」ではそれぞれのタブに［×］ボタンが設けられており、簡単にタブバーからツールを取り除けるようになっている。これは「Chrome」でも利用可能。ただし、［要素］、［コンソール］、［ソース］のタブだけは消すことができない。もっともこれらのツールは基本中の基本ともいえるもので、非表示にしたい開発者はあまりいないだろう。
最後にもう一つ覚えておきたいのは、［Esc］キーでトグルできるドロワー（引き出し）パネルだ。ドロワーは有効にしたときだけ開発者ツールパネルの下部に現れるので、時々使いたいツールをしまっておくのに便利。「Edge」ではタブの右クリックメニューからツールをドロワーへ移動させることができるので、利用頻度の低いツールはドロワー送りにしておくとよいかもしれない。なお、逆にドロワーから通常のパネルへ移動させることも可能。
ツールについて学ぶ
タブバーの［+］ボタンからツールを使うときに感じるのは、実にさまざまなツールが「Edge」の開発者ツールに備わっているということだ。なかには使い方がさっぱりわからないものもある。
そんなときは［DevTools のカスタマイズと制御］（横3つの点アイコン）－［ヘルプ］－［DevTools のヒントを切り替える］コマンド（［Ctrl］＋［Shift］＋［H］キー）を利用してみよう。マウスカーソル下のツールパネルがハイライトされ、当該ツールの役割をツールチップで解説してくれる。ドキュメントへのリンクも完備している上、なかには動画付きのものもあり、なかなか親切だ。
言語の変更
「Edge」の開発者ツールは早くから多言語対応しており、日本語でも快適に利用できる。初期設定ではOSの言語がそのまま反映されるが、とくに希望する言語があるならば設定画面（［F1］キー）で表示言語をカスタマイズできる。
ちなみに、この機能は「Chrome」にも導入予定だ。
カラーテーマのカスタマイズ
「Edge」の開発者ツールはかつて明暗2つのテーマのみをサポートしていたが、最近のバージョンではさらに9つのテーマを選択できる。［Ctrl］＋［Shift］＋［P］キーを押してコマンドパレットを開き、「外観」「テーマ」などと入力すれば切り替え可能なテーマがサジェストされる（ここはローカライズしてほしくないところだ）。いずれも「Visual Studio Code」にプリインストールされているものなので、両者のテーマを合わせることもできる。
なお、以前は「Microsoft Edge Tools for VS Code」拡張機能と組み合わせて利用すると、「Visual Studio Code」とそれに埋め込まれる「Edge」の開発者ツールのテーマが食い違うことがあるのが不満点として指摘されていたが、それは「Edge 95」で解消されるとのこと。
