Chrome DevTools 128の拡張ネットワーク トラックが良さそう
Chrome DevTools 128について
今回のversionで、パフォーマンスパネルの更新やLighthouseパネルでの使用されるLighthouseのversionupなどが行われています。
今回は、パフォーマンスパネルの更新に絞って取り上げていきます。
拡張ネットワーク トラック
下記環境を用意して、新機能を見ていきます。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Devtool playground</title>
</head>
<body>
<script src="sample1.js" ></script>
<script src="sample1-defer.js" defer></script>
<h1>Devtool playground</h1>
</body>
</html>
sample1.js
(async() => {
console.log('sample1.js loaded');
// Load sample2.js
const script2 = document.createElement('script');
script2.src = 'sample2.js';
document.body.appendChild(script2);
// Fetch and insert /sample3 response into DOM
fetch('/sample3')
.then(response => response.text())
.then(html => {
const div = document.createElement('div');
div.innerHTML = html;
document.body.appendChild(div);
});
})()
server.js
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static('public'));
app.get('/sample3', (req, res) => {
res.send(`
<script src="sample3.js"></script>
`);
});
app.get('/sample3-defer', (req, res) => {
res.send(`
<script src="sample3-defer.js"></script>
`);
});
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
sample1-defer.jsなどの中身としては、sample1.jsと変わりません。
名称を変更し、deferとそれ以外の読み込みでの違いを見ていきます。
イニシエーターの表示
以前までは、ネットワークパネルで下記のように見ることができました。
今回のversionからは、パフォーマンスパネルのネットワークトラックで
選択したネットワークリクエストを軸に視覚的に表示できるようになります。
レンダリングブロックの表示
今回検証用のスクリプトの読み込みを、defaultとdeferで分けていますが、
この二つは、HTMLParserへの影響が異なります。
参考:
今回のversionからは、パフォーマンスパネルで視覚的に見ることができるようになりました。
ネットワークトラックの内訳表示の改善
以前のネットワークトラックでは、所要時間として内訳を見ることができましたが、
今回のversionからは、よりネットワークトラックの箱ひげ図を表した詳細を確認することができます
また今回のversionから、以前の所要時間を見ることができた
サマリータブは削除されます。
ネットワークトラックからネットワークパネルへのジャンプ機能
今までは、ネットワークトラックからネットワークパネルに飛ぶのは、
同名を検索するなど泥臭いことが必要でしたが、今回のversionから直接飛ぶことができるようになります。
Performance API周りとの連携
performance.measure('sample1', 'sample1:start', 'sample1:end')
以前までも、performance.measure()で記録したものはパフォーマンスパネルに表示されていました。
timestampの追加
今回の更新によって、timestampの表記が追加されました。
Performance APIによるCustom trackの追加
performance.mesuareなどにあるmeasureOptionを利用して、ExtensionTrackEntryPayloadを渡すとCustomtrackを追加できます
export interface ExtensionTrackEntryPayload {
// An identifier for the data type contained in the payload. Defaults to “track-entry” when
// undefined
dataType?:"track-entry";
// The color the entry will be displayed with in the timeline. Can only be a value from the
// palette defined in DevToolsColor. If not defined, it defaults to “primary”.
color?: DevToolsColor;
// The name (and identifier) of the extension track the entry belongs to. Entries intended to
// be displayed to the same track should contain the same value in this property.
track: string;
// The track group an entry’s track belongs to.
// Entries intended to be displayed in the same track must contain the same value in this property
// as well as the same value in the `track` property.
trackGroup?: string;
// key-value pairs added to the details drawer when the entry is selected.
properties?: [string, string][];
// A short description shown over the entry when hovered.
tooltipText?: string;
}
type DevToolsColor = "primary"|"primary-light"|"primary-dark"|"secondary"|"secondary-light"|"secondary-dark"|"tertiary"|"tertiary-light"|"tertiary-dark"|"error"
DevTools128で下記のデモページが提供されています
こちらで、確認すると下記のようにネットワークトラックや、メインスレッドトラックと同様に個人が設定したトラックが表示されるのがわかります。
Discussion