[小ネタ] ログポイント機能でChromeで表示中のページにロギングを挿入する

はじめに

こんにちは。
Chrome大好きなshoitoです。

WebサイトやWebアプリケーションを作っていて、この変数の値はどうなってるかな？
console.log() を埋め込んで値を見てみよう。またはブレークポイントを仕掛けて値を見てみよう。という経験のある方も多いと思います。

今回紹介するログポイントを使うと、Chromeのデベロッパーツール上から表示しているページに簡単にロギングを挿入できます。Stackdriver LoggingにあるログポイントのChromeデベロッパーツール版といった印象でしょうか。

ログポイントは What's New In DevTools (Chrome 73) の新機能で紹介されています。
https://developers.google.com/web/updates/2019/01/devtools

デバッグ ログポイントの使用 - Stackdriver Logging
https://cloud.google.com/debugger/docs/logpoints?hl=ja

なお、ログポイントはChromeのv73から追加されている機能であるため、ChromeのStableチャンネル(v72)ではまだ使えません(2019-02-05時点)。
試したい方はDevチャンネルやCanaryビルドで使えます。

Chrome Release Channels
http://www.chromium.org/getting-involved/dev-channel

ログポイントの使い方

1. Chromeでロギングを挿入したいページでデベロッパーツールを開きます。
2. ログポイントを追加したい行番号を右クリックして Add logpoint... を選択します。
3. ブレークポイントエディタが表示されるので、ログを記録したい式を入力します。
   ここでは `n is ${n}` と入力して、nの値を確かめています。該当行に console.log(`n is ${n}`) がある場合と同じ動作になります。
   

これで上記でログポイントが追加された行が実行されたときに、コンソールにログが出力されます。
(この画像では上部メニューのリンクをクリックしたときのページスクロール位置を出力している)

さいごに

ログポイントは、ブレークポイントを仕掛けて、止めて、値を確認するという手間いらずで良いですね。

追加したログポイントはブラウザを閉じても保持されるため、ブラウザを開くたびに同じログポイントを設定する手間はありません。
Stackdriver Loggingのログポイントの場合は追加後24時間保持されるようですが、Chromeのログポイントの保持期間はどれくらいか把握できてないので調べてみます。