Worker のメモリ使用量を把握すると、パフォーマンスを最適化し、Worker のメモリ制限 に達したときの Out of Memory（OOM）エラーを避け、メモリリークを修正できます。
DevTools のスナップショットで、メモリ使用量をプロファイリングできます。メモリスナップショットでは、使用量の概要、データ型ごとの割り当て量、メモリ上の特定オブジェクトの詳細を確認できます。
DevTools でメモリをプロファイリングするとき、本番で見ている挙動を再現しにくいことがあります。本番に近づけるには、ローカルの Worker へ送るリクエストを本番のリクエストに似せます。大量のリクエストを送る、特定のルートへリクエストする、--remote フラグ で本番に近いデータを使う、といった方法があります。
メモリスナップショットを生成する手順です。
wrangler devを実行して Worker を起動します- ターミナルで
Dを押し、DevTools を開きます - 「Memory」タブを選びます
- Worker へリクエストを送り、メモリの割り当てを開始します
- 必要に応じてデバッガーを使い、適切なタイミングで実行を一時停止します
Take snapshotを選びます
これで Worker のメモリを調査できます。
メモリスナップショットの読み方を、例で説明します。次の Worker があるとします。
let responseText = "Hello world!";
export default {
async fetch(request, env, ctx) {
let now = new Date().toISOString();
responseText = responseText + ` (Requested at: ${now})`;
return new Response(responseText.slice(0, 53));
},
};このコードは最初は問題なく動いていました。しかし時間が経つと、レスポンスが遅くなり、Out of Memory エラーが出るようになりました。DevTools を使えば、これがメモリリークかどうか調べられます。
まず、上記のとおり wrangler dev の実行後に D キーを押して DevTools を開きます。次に「Memory」タブへ移動します。
続いて、リクエストを送って Worker に大量のトラフィックを発生させます。curl を使うか、ブラウザーを繰り返し再読み込みします。ほかの Worker では、メモリリークを再現するために、より具体的なリクエストが必要な場合があります。
その後、「Take Snapshot」ボタンをクリックして結果を確認します。
まず、ドロップダウンで「Statistics」を選び、何がメモリを使っているかの全体像を把握します。
この統計を見ると、文字列に 67 kB と多くのメモリが使われています。これがメモリリークの原因である可能性が高いです。さらにリクエストを送って別のスナップショットを取ると、この数値が増えます。
メモリ概要は、使用量の多い順にデータ型を並べます。「(string)」をクリックすると、ほかよりはるかに大きい文字列が見えます。テキストを見ると、「Requested at」と日付を繰り返し連結しており、グローバル変数を、どんどん大きくなる文字列で上書きしています。
responseText = responseText + ` (Requested at: ${now})`;DevTools の Memory Snapshotting で、メモリリークの原因になっているオブジェクトとコード行を特定できました。あとは小さなコード変更で修正できます。
Memory Snapshotting の詳しい使い方は、Google の Memory Heap Snapshots のドキュメント ↗ を参照してください。
CPU 使用量の把握に DevTools を使う方法は、CPU プロファイリングのドキュメント を参照してください。