console.log() の代わりにdevtoolsのLogpointsを使う - Qiita

Logpointsを使おう Webフロントエンドの開発をする際、デバッグ目的で「特定の処理が実行された」ということを確認するために console.log() を使うことは多いと思います。しかし、Google Chrome や Microsoft Edge で利用可能な Logpoints を利用することで、 console.log() を使わずともコンソールにメッセージを出力することが可能です。 なぜLogpointsを使うの？ Logpoints を使うのには以下のメリットがあります。 デバッグや動作確認のためにコードを変更する必要が無い console.log() を誤ってcommitに含めてしまう心配が無い console.log() を入れた後に再ビルドやホットリロードを待つ必要が無い どうやってLogpointsを使うの？ logpoints は以下のように使用します。 Chr

[shingo-sasaki-0529]

ソースタブから該当箇所を見つけるのが面倒そう

[chiroruxx]

それをブラウザからではなくエディタから設定したい。

[yarumato]

“Logpointsを使う利点：コードを変更不要。console.log() をcommitする心配が無い。console.log() を入れた後にリロード不要。　devtools＞Sourcesタブ＞ファイルを開きログ出力したい行番号で右クリックして Add logpoint..”

[nakag0711]

なるほど、ブレークポイントで値確認するだけならこれでいいわけね

[Shinwiki]

“Google Chrome や Microsoft Edge で利用可能” 肝心のFirefoxの名前が見当たらないが？で、あんまし特定のもんに頼るとまたIE6対応みたいな地獄を招くぞよ？

[taku-o]

便利な機能。でもやってみたら、ビルドツールでコードが圧縮されてて、活かしにくかった。

[masa8aurum]

該当箇所を見つけるのが面倒というのはそうかも。一度 `debugger;`を仕込んで止めると楽かも？

[murasuke]

昔からどのデバッガにもある機能の割に、知名度がない、トレースポイント

[Outrast]

便利そう... だけど、結局エディタから該当箇所を見つけるのが一番簡単なので、自分は使うことは無さそうだなぁ。。

[outlettoyosugo]

console.log() を誤ってcommitに含めてしまう心配が無い

[gomer-pyle]

viteだとリロードの必要も無くてね