console: timeStamp() 静的メソッド
非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
メモ: この機能はウェブワーカー内で利用可能です。
console.timeStamp() 静的メソッドは、単一のマーカーをブラウザーのパフォーマンスツール（Firefox バグ 1387528, Chrome）に追加します。これにより、コード内のポイントを、タイムライン上に記録されたほかのポイント、例えばレイアウトや描画のイベントなどと結びつけることができます。
任意で、引数を指定してタイムラインにラベル付することができ、このラベルはマーカーのそばに表示されます。
一部のブラウザーでは、この console.timeStamp() メソッドをさらに拡張し、パフォーマンストレースに反映される拡張性 API の一部として追加のオプション引数を指定することができます。詳細は Chrome の拡張性 API ドキュメントを参照してください。
構文
console.timeStamp(label);
console.timeStamp(label, start, end, trackName, trackGroup, color, data);
引数
color省略可 Experimental-
項目の表示色の文字列です。
"primary","primary-light","primary-dark","secondary","secondary-light","secondary-dark","tertiary","tertiary-light","tertiary-dark","error"のいずれかでなければなりません。 data省略可 Experimental-
追加データを表示させるオブジェクト。一部のブラウザーでは URL は自動的にリンクに変換されることがあります。
end省略可 Experimental-
終了時刻として使用する、事前に定義された
timeStampラベルまたはタイムスタンプ (DOMHighResTimeStamp) を参照する文字列です。 label省略可-
タイムスタンプのラベルです。
start省略可 Experimental-
開始時刻として使用する、事前に定義された
timeStampラベルまたはタイムスタンプ (DOMHighResTimeStamp) を参照する文字列です。 trackName省略可 Experimental-
タイムスタンプデータを表示させるために使用するカスタムトラックの名前
trackGroup省略可 Experimental-
タイムスタンプデータを表示させるために使用されるカスタムトラックのグループ
返値
なし (undefined)。
例
基本的な使い方
console.timeStamp("marker 1");
拡張性 API を使用して表示用の詳細情報を提供する
// 1. リッチデータをつけて期間イベントを作成
const start = performance.now() - 150;
const end = performance.now() - 20;
const durationData = {
processingTime: `${end - start}ms`,
info: "Check this URL: https://example.com for more.",
metrics: {
items: 5,
isCached: true,
},
};
console.timeStamp(
"My Timed Task", // label
start, // startTime
end, // endTime
"Tasks", // trackName
"My Extension", // trackGroup
"tertiary", // color
durationData, // data (object)
);
// 2. 開発者ツール拡張機能のディープリンクをつけてインスタントイベントを作成
const linkData = {
url: "ext://resource/123",
description: "View Resource 123",
otherDetail: "This data also appears in the JSON viewer",
};
console.timeStamp(
"Event with Link", // label
performance.now(), // startTime (instant)
undefined, // endTime (instant)
"Tasks", // trackName
"My Extension", // trackGroup
"primary-light", // color
linkData, // data (object)
);