導入
フロントエンド開発において、アプリケーションのパフォーマンスチューニングは避けて通れない課題です。特に「どの処理にどれくらいの時間がかかっているのか」を特定するために、`console.time()` や `performance.mark()` を使っている方は多いでしょう。しかし、ブラウザの「パフォーマンスパネル」と連携して、さらに視覚的にタスクの実行タイミングを記録できる `console.timeStamp()` を活用しているエンジニアは意外と少ないのが現状です。本記事では、この隠れた名APIを使って、デバッグ効率を劇的に向上させる方法を解説します。
基礎知識
`console.timeStamp()` は、ブラウザの開発者ツールの「パフォーマンス（Performance）」タブのタイムライン上に、目印となるマーカー（イベント）を記録するメソッドです。
通常の `console.log` がコンソール上に文字を出力するのに対し、`console.timeStamp()` は「タイムライン上の特定地点にラベルを付与する」という役割を持ちます。これを使用することで、ブラウザがレンダリングやスクリプト実行をどのタイミングで行っているのかを、視覚的なチャートと照らし合わせながら詳細に分析することが可能になります。
実装/解決策
使い方は非常にシンプルです。引数にラベルとなる文字列を渡すだけで、パフォーマンス計測中にその名前のイベントが記録されます。
手順は以下の通りです。
1. ブラウザの「パフォーマンス」タブを開く。
2. 録画ボタン（Record）を押して計測を開始する。
3. 計測したい箇所で `console.timeStamp(‘任意のラベル名’)` を実行する。
4. 計測を停止し、パフォーマンスチャートを確認する。
サンプルプログラム
以下のコードは、ボタンクリック後の重い処理の前後を計測する例です。
// ボタンクリック時のイベントハンドラ
document.getElementById('heavy-task-btn').addEventListener('click', () => {
// パフォーマンス計測の開始地点を記録
console.timeStamp('重い処理:開始');
// 意図的に負荷をかける処理
performHeavyCalculation();
// パフォーマンス計測の終了地点を記録
console.timeStamp('重い処理:終了');
});
function performHeavyCalculation() {
let result = 0;
for (let i = 0; i < 100000000; i++) {
result += Math.sqrt(i);
}
console.log('計算完了:', result);
}
応用・注意点
実務で活用する際のポイントと注意点をまとめます。
1. 不要なコードの削除
本番環境に `console.timeStamp()` が残っていても大きなバグにはなりませんが、不要なログがブラウザのパフォーマンスチャートを汚す原因になります。ビルドツール（TerserやESBuildなど）のオプションで、本番環境ビルド時に `console` 系メソッドを自動削除するように設定することをお勧めします。
2. パフォーマンス計測との併用
`performance.mark()` や `performance.measure()` を組み合わせることで、より正確なミリ秒単位の数値計測が可能です。`console.timeStamp()` は「イベントの発生タイミング」を視覚的に把握するのには適していますが、精密な数値計算が必要な場合は、`Performance API` を併用するのがベストプラクティスです。
3. 開発者ツールの表示を確認
もしタイムライン上に何も表示されない場合は、パフォーマンスパネルの「Timings（タイミング）」セクションが折りたたまれていないか確認してください。ここをクリックすることで、記録したタイムスタンプが詳細に展開されます。
このAPIを活用して、感覚的なデバッグから「根拠のあるパフォーマンス改善」へとステップアップしましょう。