Microsoft Edge 151へ更新したあと、DevToolsのwebhintが見つからなくなっても、設定ミスや一時的な不具合ではありません。Microsoft Edge DevTools 151ではwebhint実験が削除され、サイト監査にはLighthouseを使用するよう案内されています。 そのため、webhintを復元しようとするのではなく、監査手順をLighthouseへ切り替えるのが基本対応です。公式情報は2026年7月30日に更新されており、回避策のある仕様変更として対処できます。(Microsoft Learn)
Edge 151でwebhintが消えたのは不具合ではなく仕様変更
Microsoft Edge DevTools 151では、これまで実験機能として提供されていたwebhintが削除されました。Microsoftのリリース情報には、サイトを監査する場合はLighthouseを使用するよう明記されています。(Microsoft Learn)
状況を整理すると、次のとおりです。
| 確認項目 | 内容 |
|---|---|
| 対象 | Microsoft Edge DevTools 151 |
| 変更内容 | webhint実験の削除 |
| 原因 | 製品側の仕様変更 |
| Webサイトへの影響 | 公開中のサイトの表示や動作には影響しない |
| 開発作業への影響 | DevTools上のサイト監査手順を変更する必要がある |
| Microsoft推奨の代替手段 | Lighthouse |
| 対応状況 | 回避策あり |
影響を受けるのは、Edge DevTools内のwebhintを使ってアクセシビリティ、パフォーマンス、互換性などを確認していた開発者です。Webサイトそのものから機能が削除されたわけではなく、閲覧者側でページが表示できなくなる変更でもありません。
webhintを再表示させる設定はない
今回の変更は、webhintが一時的に無効化されたのではなく、Edge DevToolsから実験機能自体が削除されたものです。
そのため、次のような操作を行っても、Edge 151の標準DevTools内にwebhintが戻るとは考えにくいでしょう。
- DevToolsの設定を初期化する
- Edgeのキャッシュを削除する
- DevToolsを閉じて開き直す
- Experimentsの項目を探す
- Edgeを再インストールする
edge://flagsから関連する設定を探す
Microsoftはwebhintの再有効化手順を案内していません。社内手順書や過去の記事に「DevToolsのExperimentsからwebhintを有効化する」と書かれている場合、その手順はEdge 151以降には適用できない可能性があります。
webhintを使うためだけにEdgeを古いバージョンへ戻す方法も現実的ではありません。ブラウザーの更新を止めるのではなく、監査ツールを切り替える方が安全で、今後の運用も簡単です。
Edge 151ではLighthouseを使ってサイトを監査する
Lighthouseは、Webページの品質を自動的にチェックするオープンソースの監査ツールです。主にパフォーマンス、アクセシビリティ、SEO、ベストプラクティスなどを確認し、問題点と改善方法をレポートとして表示します。Microsoftは、Edge DevToolsから削除されたwebhintの代替として、このLighthouseを案内しています。(Microsoft Learn)
Edge DevToolsでLighthouseを実行する手順
- Microsoft Edgeで監査したいページを開きます。
F12キー、またはCtrl＋Shift＋Iキーを押してDevToolsを開きます。- 上部にある「Lighthouse」タブを選択します。
- タブが見つからない場合は、DevTools右上のメニューから「More tools」を開き、「Lighthouse」を探します。
- 必要に応じてモバイルまたはデスクトップなどの監査条件を選択します。
- パフォーマンス、アクセシビリティ、SEOなど、確認したいカテゴリーを選択します。
- 「Analyze page load」などの実行ボタンをクリックします。
- 生成されたレポートを確認し、指摘項目を修正します。
ボタン名や日本語表示は、Edgeの言語設定やDevToolsの更新状況によって多少異なることがあります。Lighthouseでは、監査に失敗した項目ごとに問題の理由や改善方法への案内が表示されるため、点数だけでなく個別の指摘内容を確認することが重要です。(Chrome for Developers)
Lighthouseタブが見つからない場合
Lighthouseが上部タブに表示されていない場合でも、すぐに「利用できない」と判断する必要はありません。
まず、次の順番で確認します。
- DevTools右上のメニューを開く
- 「More tools」からLighthouseを探す
- DevToolsを一度閉じて開き直す
- Edgeのバージョンを確認する
- 組織のポリシーや管理設定でDevTools機能が制限されていないか確認する
公開済みのWebページであれば、ブラウザー内のLighthouse以外にPageSpeed Insightsを使う方法もあります。ローカル環境、開発中のページ、ログイン後のページを調べる場合は、DevToolsまたはコマンドライン版のLighthouseが適しています。LighthouseはDevTools、コマンドライン、Nodeモジュール、Web UIなど複数の方法で実行できます。(Chrome for Developers)
webhintとLighthouseは完全に同じツールではない
MicrosoftはLighthouseへの切り替えを推奨していますが、webhintとLighthouseは目的や検査項目が完全に一致するわけではありません。
| 比較項目 | webhint | Lighthouse |
|---|---|---|
| 主な位置付け | Web開発向けのカスタマイズ可能なLint・検査ツール | Webページ品質の自動監査ツール |
| パフォーマンス | 対応 | 対応 |
| アクセシビリティ | 対応 | 対応 |
| SEO | 構成による | 主要カテゴリーとして対応 |
| ベストプラクティス | 対応 | 対応 |
| クロスブラウザー互換性 | 主要な用途の一つ | 同じ形式ですべてを代替するものではない |
| 独自ルールの構成 | 比較的柔軟 | CLIやプラグインなどで拡張可能 |
| Edge DevTools 151内での利用 | 削除 | Microsoft推奨の代替手段 |
webhintは、アクセシビリティ、速度、ブラウザー互換性などについて、コードがベストプラクティスに沿っているかを確認するLintツールとして提供されています。一方、Lighthouseは実際のページを監査し、パフォーマンスやアクセシビリティ、SEOなどの結果をレポート化することを得意とします。(Chrome for Developers)
したがって、これまでのwebhintの結果と、Lighthouseの点数をそのまま比較することはできません。Lighthouseへ移行した時点で新しい基準値を取得し、それ以降の変化を追跡する運用が適切です。
Lighthouseの結果を見るときの注意点
Lighthouseでは0から100までのスコアが表示されますが、100点を取ることだけを目的にすると、実際のサイト改善から外れてしまう場合があります。
点数よりも指摘内容を優先する
最初に確認したいのは、次のような利用者への影響が大きい問題です。
- ページの主要部分が表示されるまでに時間がかかる
- 画像や広告の読み込みでレイアウトが大きくずれる
- 文字と背景のコントラストが不足している
- ボタンやリンクに判別できる名前が付いていない
- JavaScriptの処理がメインスレッドを長時間占有している
- 不要に大きな画像やスクリプトを読み込んでいる
単に「スコアが5点上がる修正」を選ぶのではなく、利用者の操作や表示速度を実際に改善できる項目から対応します。
同じ条件で複数回計測する
Lighthouseの結果は、端末の負荷、通信状態、キャッシュ、バックグラウンド処理などの影響を受けることがあります。
変更前後を比較するときは、次の条件をそろえます。
- モバイルとデスクトップのどちらで測るか
- 監査対象のURL
- ログイン状態
- キャッシュの状態
- 実行する監査カテゴリー
- テストに使用する端末
- 拡張機能の有無
1回だけの結果で判断せず、複数回実行して大きな傾向を見る方が確実です。
webhint固有のチェックが必要ならCLIを検討する
Edge DevToolsから削除されたのは、DevTools内のwebhint実験です。webhintというツールのすべての利用方法が、同時に廃止されたという意味ではありません。
webhintの公式リポジトリでは、コマンドラインから次のように実行する方法が案内されています。(GitHub)
npx hint https://example.comプロジェクトへ開発用依存関係として追加する場合は、次のような構成も可能です。
npm install hint --save-devただし、Microsoftのドキュメントでは、webhintのVisual Studio Code拡張機能は2022年4月以降メンテナンスされていないと案内されています。新しい開発環境の標準ツールとして導入する場合は、更新状況や依存パッケージを確認したうえで判断してください。(Microsoft Learn)
実務では、次のように使い分けると分かりやすくなります。
| 目的 | 選択する手段 |
|---|---|
| Edge上ですぐにページを監査したい | Lighthouse |
| パフォーマンスやアクセシビリティを定期確認したい | Lighthouse CLIまたはLighthouse CI |
| webhint固有のルールを継続利用したい | webhint CLI |
| 公開ページを手軽に調べたい | PageSpeed Insights |
| ローカル環境やログイン後ページを調べたい | DevTools版LighthouseまたはCLI |
チームや社内環境で変更しておくべきこと
個人でLighthouseを開けるようにするだけでなく、開発チームの運用も見直しておく必要があります。
手順書からwebhintの操作を削除する
次のような記載が残っていないか確認します。
- DevToolsのExperimentsでwebhintを有効にする
- webhintタブを開く
- webhintのカテゴリー別スコアを記録する
- webhintの画面を使って検収する
該当箇所は、Lighthouseの起動方法と監査カテゴリーの選び方に置き換えます。画面キャプチャを掲載している場合は、Edge 151のDevTools画面で撮り直した方が混乱を防げます。
新しい基準値を記録する
webhintからLighthouseへ切り替えた直後は、既存の評価結果との単純比較を避けます。
移行時点で、主要ページについて次の値を記録しておくと、その後の改善や悪化を追跡しやすくなります。
- Performance
- Accessibility
- Best Practices
- SEO
- 監査日
- Edgeのバージョン
- モバイルまたはデスクトップ
- 対象URL
- 主な指摘事項
「以前のwebhintで問題がなかったから、Lighthouseでも問題がないはず」と判断せず、新しい監査基準で確認し直すことが重要です。
CIや自動テストは別に確認する
Edge DevToolsのwebhint削除は、DevTools上の機能変更です。CI/CDでwebhint CLIを直接実行している場合、その処理がただちに同じ理由で停止するとは限りません。
ただし、webhint関連パッケージの更新状況やNode.jsとの互換性は別問題です。次の項目を確認してください。
package.jsonにwebhint関連パッケージが含まれているか- CIのログに警告やエラーが出ていないか
- Node.js更新後も正常に動作するか
- Lighthouseへ統合できる検査項目があるか
- webhint固有のルールを残す必要があるか
DevToolsの移行とCIの移行を一度に行う必要はありません。まずEdge上の手動監査をLighthouseへ切り替え、その後に自動テストの整理を進めると安全です。
Edge 151のwebhint削除に関するよくある疑問
Edge 151でwebhintを有効に戻せますか
Microsoftは、Edge 151で削除されたwebhint実験を再有効化する方法を案内していません。設定変更で戻すのではなく、Lighthouseへ切り替えるのが公式に示された対応です。(Microsoft Learn)
webhintが消えるとWebサイトに問題が起きますか
Webサイトの表示やサービス提供には直接影響しません。変更されるのは、開発者がEdge DevTools内でサイトを監査する方法です。
Lighthouseだけですべて代替できますか
一般的なパフォーマンス、アクセシビリティ、SEO、ベストプラクティスの監査では、Lighthouseが有力な代替手段になります。ただし、webhint固有のクロスブラウザー互換性ルールや独自設定まで、完全に同じ結果になるわけではありません。
必要なチェック項目を整理し、Lighthouseで不足する部分だけを別のツールで補う方法が現実的です。
webhintのVS Code拡張機能を使えばよいですか
既存環境で動作している場合でも、将来の標準手段として安易に置き換えるのは避けた方がよいでしょう。Microsoftは、webhintのVisual Studio Code拡張機能が2022年4月以降メンテナンスされていないと説明しています。(Microsoft Learn)
Edge 151では監査手順をLighthouseへ移行する
Microsoft Edge DevTools 151でwebhintが表示されなくなったのは、不具合ではなく正式な仕様変更です。DevToolsのリセットやEdgeの再インストールを繰り返す必要はありません。
まずは監査対象のページをEdgeで開き、DevToolsのLighthouseパネルからレポートを実行してください。そのうえで、社内手順書、検収項目、監査結果の保存方法をLighthouse基準へ更新します。
webhint固有のルールが本当に必要な場合だけ、CLIによる継続利用を検討します。基本のページ監査はLighthouseへ集約し、不足する検査だけを別ツールで補う構成にすると、Edgeの今後の更新にも対応しやすくなります。
コメント