【Chrome】auditsやResources等がない！デベロッパーツールのバージョンアップで無くなったタブについて。

あるWebサイトで調べ物をしてる時にChromeのAuditsタブを使えば便利ですよー！と書いてあったので早速使おうとしたらAuditsタブがない。

そういえば昔のデベロッパーツールに比べるとタブの数が減った気が…

調べてみるとやはり新しいChromeでは各タブが変更・削除されて無くなっているようです。

タブ名が変更されたものが大半です。機能は無くなっていません。

この記事の目次

デベロッパーツールに目的のタブがない

少し前のChromeのデベロッパーツール画面と見比べてみると以下の4つのタブが無くなっていました。

そして新たに以下のタブが増えています。

Chrome ver91のツールバー

少し古いサイトを見ると無くなったタブで説明されているので、混同します。
機能自体が無くなったわけではなく、名前が変更されたり、他のタブに統合された形のようです。

Timelineタブは画面の読み込みパフォーマンスを計測するタブでしたが、Chrome58からPerformanceタブに変更されています。

使い方は似ていますが、より簡単になっていると思います。
Record（記録）を押してから、Stopを押すまでに読み込まれた画面のパフォーマンスを優れたUIで解析することが出来ます。

Profilesタブを使えばページでのCPUやメモリの使用率を解析することが出来ました。
Chrome58からこのProfilesタブは無くなっています。
（Performanceタブと類似した機能のためらしい。）

JavaScriptのCPU使用率を収集できる「Record JavaScript CPU Profile」という機能は非表示の場所に表示されたとありました。
一応Profilesタブで使えた古い機能も使えるようです。

外部リンク

ResourcesタブはWebページを構成しているファイルやcookieを解析できました。
いつから変更されたのか不明ですが、現在のChromeではApplicationタブに統合されたようです。

google内にページは見つけれませんでしたが、Stack Overflowの質問から。

外部リンク

Auditsタブは主にSEOに影響を及ぼす内容でページの改善策を提案してくれるタブでした。
Chrome83以降Lighthouseに変更されています。

同じようなサービスではGoogleの「PageSpeed Insights」が有名ですが、もう少し細かく別の視点でページを評価してもらえます。

以前「run audits」を押していたところが「Generate report」に変わっています。
検証したいページを開き、このタブでGenerate reportを押して少し待つと診断結果を見ることが出来ます。

外部リンク

不要かと思いますが、一応。
自分が使っているChromeのバージョンを確認するには以下の方法で可能です。

Chromeの画面右上メニュー＞ヘルプ＞ Google Chromeについて

または

chrome://settings/help

とURL欄に入力してもジャンプできます。
基本的に最新バージョンをお使いのことだと思います。

検索しても日本語のページが無かったので記事にしてみました。

Auditsタブが表示されない！何か設定を変更しないといけないのか！？
と思って結構調べたのですが、まさかの名前変更でした…

なぜこんなにややこしいことをするのか…
インターネット上には古い情報のページもあって、検索結果で上位に表示されるのは古いページの可能性もあるのにね～