Microsoft Edge 151へ更新したあと、DevTools上部のアイコンが消え、「NetworkやPerformanceなどのツールが削除されたのでは」と戸惑うかもしれません。
結論からいうと、削除されたのはツールを示すアイコンだけです。Microsoft Edge DevTools 151では、上部のActivity barに並ぶツールタブと、［More tools］メニュー内のアイコンが表示されなくなりました。すべてのツールは引き続き利用でき、ツール自体の機能にも変更はありません。通常は復旧作業や設定変更を行う必要はありません。(Microsoft Learn)
Edge 151 DevToolsでアイコンが消えても機能は削除されていない
Microsoftが2026年7月30日（UTC）に更新した公式情報によると、Microsoft Edge DevTools 151では、次の2か所からツールアイコンが削除されました。
- DevTools上部にあるActivity barのツールタブ
- ［More tools］メニューに表示される各ツールの項目
変更されたのはツールの見た目だけです。Elements、Console、Sources、Network、Performance、Memory、Applicationなど、従来利用できたツールは引き続き開けます。(Microsoft Learn)
変更点を整理すると、次のようになります。
| 確認項目 | Edge 151より前 | Edge 151 | 影響 |
|---|---|---|---|
| Activity barのツールタブ | ツール名とアイコン、またはアイコンを表示 | ツールアイコンを削除 | ツール名を見て選択する |
| ［More tools］メニュー | ツール名とアイコンを表示 | ツールアイコンを削除 | メニュー内の名称から選択する |
| ツールの利用可否 | 各ツールを利用可能 | 引き続き利用可能 | 変更なし |
| デバッグ機能 | 従来の機能を利用可能 | 従来どおり利用可能 | 変更なし |
従来のDevToolsでは、表示領域が狭いとツール名が省略され、アイコン中心の表示になる場合がありました。Edge 151ではツールアイコンが削除されたため、これまでアイコンの形や色でツールを見分けていた利用者ほど、変更を大きく感じやすくなります。(Microsoft Learn)
今回削除されたのは「ツールを示すアイコン」
今回の変更を理解するうえで重要なのは、DevToolsの機能削除ではなく、ツール選択部分のデザイン変更だという点です。
公式情報で明示されている対象は、Activity barのツールタブと［More tools］メニューに表示されていたツールアイコンです。DevTools全体がテキストだけの画面になったわけでも、検証やデバッグに必要な機能が廃止されたわけでもありません。(Microsoft Learn)
たとえば、次のような作業はEdge 151でも従来どおり行えます。
- ElementsでHTMLやCSSを確認、編集する
- ConsoleでJavaScriptを実行する
- SourcesでJavaScriptにブレークポイントを設定する
- Networkで通信内容や読み込み時間を確認する
- Performanceでページの動作を記録、分析する
- ApplicationでCookieやストレージを確認する
- Device Emulationでスマートフォン表示を検証する
「Networkのアイコンが見つからない」という場合も、Networkツールがなくなったわけではありません。表示されている「Network」という名称を選択するか、［More tools］やCommand Menuから開けば利用できます。
アイコンがなくなったツールを開く方法
Edge DevTools 151でも、ツールを開く基本操作は変わりません。アイコンではなく、ツール名を基準に探すのがポイントです。
Activity barからツール名を選択する
最初に、通常の方法でDevToolsを開きます。
WindowsまたはLinuxでは、次のいずれかを利用できます。
- Webページを右クリックして［検証］を選択する
F12を押すCtrl＋Shift＋Iを押す
macOSでは、Command＋Option＋Iで開けます。(Microsoft Learn)
DevTools上部のActivity barには、Elements、Console、Sources、Networkなどのツール名が表示されます。目的の名称を選択してください。
以前のアイコンを探すのではなく、次のように作業内容とツール名を対応させると迷いにくくなります。
| やりたいこと | 選択するツール |
|---|---|
| HTMLやCSSを調べる | Elements |
| JavaScriptのエラーを確認する | Console |
| JavaScriptをデバッグする | Sources |
| API通信や画像の読み込みを調べる | Network |
| ページ表示の遅さを調べる | Performance |
| メモリ使用量を分析する | Memory |
| Cookieやローカルストレージを確認する | Application |
| HTTPSや証明書を確認する | Security |
| CSSの変更内容を一覧で確認する | Changes |
| 描画状態やメディア設定を検証する | Rendering |
［More tools］からツールを開く
Activity barに目的のツール名がない場合は、上部の［More tools］を開きます。
Edge 151では、［More tools］内に従来表示されていたツールアイコンがなくなっていますが、ツール名の一覧は引き続き表示されます。目的の名称を選択すれば、そのツールがActivity barに開きます。(Microsoft Learn)
DevToolsの横幅が狭い場合、開いているツールや固定されたツールの一部がActivity barに収まらず、［More tools］側へ移動することがあります。そのため、上部に名称がないからといって、ツールが削除されたとは限りません。(Microsoft Learn)
見つけにくいときは、DevToolsの幅を広げるか、別ウィンドウとして切り離してから確認すると探しやすくなります。
Command Menuからツール名を検索する
ツールが多く、メニューから探しにくい場合はCommand Menuが便利です。
WindowsまたはLinuxでは、DevToolsにフォーカスを合わせた状態で次のキーを押します。
Ctrl＋Shift＋P
macOSでは、次のキーを押します。
Command＋Shift＋P
検索欄に目的のツール名を入力し、表示された「Show」コマンドを選択します。たとえばNetworkツールを開きたい場合は、「Network」と入力し、「Show Network」などの該当コマンドを選びます。(Microsoft Learn)
Command Menuは、アイコンの有無に影響されません。日常的にDevToolsを使う場合は、［More tools］の一覧から探すより速く目的のツールへ移動できます。
Quick Viewで2つのツールを同時に表示する
DevToolsにフォーカスがある状態でEscを押すと、画面下部または右側にQuick Viewを表示できます。
Quick View側の［More tools］から別のツールを選択すると、Activity barで開いているツールと同時に表示できます。たとえば、上部でNetworkを確認しながら、下部でConsoleを表示するといった使い方が可能です。(Microsoft Learn)
Quick Viewのツールも、必要に応じてActivity barへ移動できます。ツールのタブを右クリックし、［Move to top Activity Bar］を選択します。反対に、Activity barのツールをQuick Viewへ移動することも可能です。(Microsoft Learn)
ツールが本当に見つからないときの確認ポイント
アイコン削除とは別の理由で、目的のツールが見つからないこともあります。次の順番で確認すると、原因を切り分けやすくなります。
| 症状 | 考えられる原因 | 対処方法 |
|---|---|---|
| アイコンだけが見当たらない | Edge 151の仕様変更 | ツール名から選択する |
| Activity barにツール名がない | 表示領域不足や未固定 | ［More tools］を確認する |
| 下部にツールが表示されている | Quick Viewで開いている | タブを右クリックしてActivity barへ移動する |
| 以前使ったツールが見つからない | タブ配置が変更されている | Command Menuでツール名を検索する |
| DevToolsの表示全体がおかしい | 設定やカスタマイズの影響 | 初期設定への復元を検討する |
| 会社のPCだけ表示が異なる | Edgeのバージョンや更新状況が異なる | edge://settings/helpでバージョンを確認する |
DevToolsのタブを初期状態へ戻す
ツール配置を大幅に変更しており、どこに何があるか分からなくなった場合は、標準状態への復元が有効です。
- DevToolsを開く
- ［Customize and control DevTools］を開く
- ［Settings］を選択する
- ［Preferences］を開く
- ［Restore defaults and refresh］を選択する
実行するとDevToolsが再読み込みされ、Activity barとQuick Viewの標準タブが復元されます。(Microsoft Learn)
ただし、DevToolsで変更したテーマやショートカット、各種設定も初期状態へ戻る可能性があります。単にアイコンが消えただけであれば、初期化は必要ありません。まずは［More tools］またはCommand Menuで目的のツールを検索してください。
手順書や社内マニュアルはアイコン基準から名称基準へ変更する
今回の変更で影響を受けやすいのは、アイコンの画像や位置だけを使ってDevToolsの操作を説明している手順書です。
たとえば、次のような説明はEdge 151以降では伝わりにくくなります。
上部にある電波のようなアイコンをクリックします。
代わりに、ツール名と代替操作を含めて説明します。
DevTools上部の［Network］を選択します。表示されていない場合は［More tools］から［Network］を選ぶか、
Ctrl＋Shift＋Pを押して「Network」と検索します。
この書き方であれば、アイコンや配置が再び変更されても手順が通用しやすくなります。
社内マニュアルや研修資料を更新するときは、次の3点をセットで記載するのが実用的です。
- 正式なツール名
- ［More tools］から開く方法
- Command Menuのショートカット
スクリーンショットだけに依存せず、ツール名を文章で明記することが、今回のようなUI変更への有効な対策になります。
よくある疑問
アイコンが消えたのは不具合ですか
Activity barのツールタブと［More tools］メニューからアイコンが消えたのであれば、Microsoft Edge DevTools 151で告知された変更です。ツールが正常に開ける場合は、不具合として再インストールや設定初期化を行う必要はありません。(Microsoft Learn)
NetworkやPerformanceは廃止されたのですか
廃止されていません。Microsoftは、すべてのツールが引き続き利用でき、機能は変更されていないと説明しています。(Microsoft Learn)
設定で以前のアイコン表示に戻せますか
少なくともMicrosoftのEdge 151公式案内には、ツールアイコンを元に戻すための標準設定は示されていません。
DevToolsの設定初期化はタブ配置などを標準状態へ戻す機能であり、Edge 151で削除されたアイコンを復元する操作ではありません。アイコン表示だけを目的に、実験的なフラグを変更したり、Edgeを旧バージョンへ固定したりするのは避けたほうがよいでしょう。
アイコンがないと作業しにくい場合はどうすればよいですか
まずはCommand Menuを利用し、ツール名で開く操作へ切り替えるのが現実的です。
Microsoftは、アイコンが作業上重要だった利用者に対し、公式案内に掲載されたChromiumの課題ページからフィードバックを送るよう案内しています。(Microsoft Learn)
Edge 151ではツール名を基準にDevToolsを操作する
Microsoft Edge DevTools 151で削除されたのは、Activity barと［More tools］メニューに表示されていたツールアイコンです。Elements、Console、Network、Performanceなどのツールそのものは削除されておらず、機能も従来どおり利用できます。
アイコンが見当たらないときは、次の順番で確認してください。
- Activity barに表示されたツール名を探す
- ［More tools］の名称一覧を確認する
Ctrl＋Shift＋PでCommand Menuを開く- ツール名を入力して「Show」コマンドを実行する
- 必要な場合だけDevToolsの標準設定を復元する
社内資料や操作マニュアルでは、アイコンの形ではなく「Network」「Sources」などの正式名称を記載し、［More tools］とCommand Menuによる代替操作も併記しておくと、今後のUI変更にも対応しやすくなります。
コメント