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

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

そういえば昔のデベロッパーツールに比べるとタブの数が減った気が…
調べてみるとやはり新しいChromeでは各タブが変更・削除されて無くなっているようです。

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

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

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

・Timeline
・Profiles
・Resources
・Audits

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

・Performance
・Memory
・Application
・Lighthouse
GoogleChromeタブの仕様変更_001

Chrome ver91のツールバー

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

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タブが表示されない!何か設定を変更しないといけないのか!?
と思って結構調べたのですが、まさかの名前変更でした…

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

-Webブラウザ
-

© 2021 ソロ学