console.log() だけじゃない
JavaScript 的な開発をしているときのデバッグのお供と言ったらブラウザーの DevTools 等で簡単に確認できる console.log() さんなわけですけども、log() だけじゃねーぞっていうお話。
ほとんど知らないやつばっかりでした。dir() とか table() とか今度使ってみようと思います。
便利だけどあれな面もね
でまぁ、console.log() って、古の print デバッグのようなのっていうかそのものなんですよね。ついつい気軽に埋め込んで、要が済んでしまうと埋めたことを忘れてしまう存在であったりもするんですよね。或いは、これからも埋め込んでおきたかったりとか。
そんなとき、何が困るかっていうと Production 環境なんですよ。一応開発時のデバッグ的なログですから、利用時に出力されるのはあまり良くないです。望ましくないです。恥ずかしいです。わざわざ DevTools を開いて何やら確認する人は少ないと思いますけれど（ボクはやりますが）、できる事なら出力しないでいて欲しい。そっとして欲しい。無かったことにして欲しい。
Angular で無効にしたい
じゃあ、どうするか。自力で頑張るのもいいし、機械に頑張ってもらうのもいいのだけど、JavaScript は何もかもを上書きできるというヤバい素敵仕様なので、埋め込んでいる console.log() はそのままに console.log() の方を置き換えてしまえばいいんですって、そう、何もしない空の関数とかに。
window.console.log = function () {}とかを必要に応じて最初に実行してあげれば良いと思います。
で、Angular だと production build を行うかどうかを切り替えるために最初に何やら実行する仕組みが main.ts にあったりするので、
if (environment.production) {
enableProdMode();
if (window) {
window.console.log = () => {};
}
}そこに太字の部分を追記して寄生したりしていますねー。これで開発時には何も変わりなく出力されますけども、Production 環境時にはダンマリを決め込むっていう。いいね！
前述の dir() とか table() も使うならそれにも同じように突っ込んでおけばいいし、ちょっと数行追加するだけであとは手間無しなのでなかなかいいんじゃないかなー。
ポチップ