あるWebサイトで調べ物をしてる時にChromeのAuditsタブを使えば便利ですよー!と書いてあったので早速使おうとしたらAuditsタブがない。
そういえば昔のデベロッパーツールに比べるとタブの数が減った気が…
調べてみるとやはり新しいChromeでは各タブが変更・削除されて無くなっているようです。
タブ名が変更されたものが大半です。機能は無くなっていません。
デベロッパーツールに目的のタブがない
少し前のChromeのデベロッパーツール画面と見比べてみると以下の4つのタブが無くなっていました。
- Timeline
- Profiles
- Resources
- Audits
そして新たに以下のタブが増えています。
- Performance
- Memory
- Application
- Lighthouse
少し古いサイトを見ると無くなったタブで説明されているので、混同します。
機能自体が無くなったわけではなく、名前が変更されたり、他のタブに統合された形のようです。
Timelineタブがない
Timelineタブは画面の読み込みパフォーマンスを計測するタブでしたが、Chrome58からPerformanceタブに変更されています。
使い方は似ていますが、より簡単になっていると思います。
Record(記録)を押してから、Stopを押すまでに読み込まれた画面のパフォーマンスを優れたUIで解析することが出来ます。
Profilesタブがない
Profilesタブを使えばページでのCPUやメモリの使用率を解析することが出来ました。
Chrome58からこのProfilesタブは無くなっています。
(Performanceタブと類似した機能のためらしい。)
JavaScriptのCPU使用率を収集できる「Record JavaScript CPU Profile」という機能は非表示の場所に表示されたとありました。
一応Profilesタブで使えた古い機能も使えるようです。
Resourcesタブがない
ResourcesタブはWebページを構成しているファイルやcookieを解析できました。
いつから変更されたのか不明ですが、現在のChromeではApplicationタブに統合されたようです。
google内にページは見つけれませんでしたが、Stack Overflowの質問から。
Auditsタブがない
Auditsタブは主にSEOに影響を及ぼす内容でページの改善策を提案してくれるタブでした。
Chrome83以降Lighthouseに変更されています。
同じようなサービスではGoogleの「PageSpeed Insights」が有名ですが、もう少し細かく別の視点でページを評価してもらえます。
以前「run audits」を押していたところが「Generate report」に変わっています。
検証したいページを開き、このタブでGenerate reportを押して少し待つと診断結果を見ることが出来ます。
Chromeのバージョン確認
不要かと思いますが、一応。
自分が使っているChromeのバージョンを確認するには以下の方法で可能です。
Chromeの画面右上メニュー > ヘルプ > Google Chromeについて
または
chrome://settings/help
とURL欄に入力してもジャンプできます。
基本的に最新バージョンをお使いのことだと思います。
まとめ
検索しても日本語のページが無かったので記事にしてみました。
Auditsタブが表示されない!何か設定を変更しないといけないのか!?
と思って結構調べたのですが、まさかの名前変更でした…
なぜこんなにややこしいことをするのか…
インターネット上には古い情報のページもあって、検索結果で上位に表示されるのは古いページの可能性もあるのにね~