問題

個人開発をしていると、長いソースコードを分割してクラス化・コンポーネント化することを後回しにしがちです...。

いつかはやらなきゃいけない作業なんですが、ヒットしない可能性もある初期のプロダクトのソースだと保守性は犠牲にすることもありますね。

具体的には、以下のような多重なコールバックで処理を受け取っているようなところがどうしても増えます。

const onSubmit = async (formData) => {

    setTimeout(async function () {

      addDoc(bmc, formData)
        .then(async (docRef) => {

// 以下略
        }
    }
}

ということで、こうしたケースではクライアントサイドの処理のデバッグのためにconsole.logを多用することになります。

ただ、コピペで入れていくのがとても面倒です。消すのも面倒です。ということで、VSCodeのマーケットを検索したところ、以下の turbo-console-logを見つけました！

ロケットのマークがイカしてる。

実際に試す

インストール後表示される画面の説明には以下のようにあります。

I) Insert meaningful log message automatically Two steps:

Selecting or hovering the variable which is the subject of the debugging (Manual selection will always take over the hover selection)

Pressing ctrl + alt + L (Windows) or ctrl + option + L (Mac)

The log message will be inserted in the next line relative to the selected variable like this:

console.log("SelectedVariableEnclosingClassName -> SelectedVariableEnclosingFunctionName -> SelectedVariable", SelectedVariable)

日本語訳:

I) 意味のあるログメッセージを自動的に挿入する 2つのステップ：

デバッグの対象となる変数を選択するかホバーする（手動選択は常にホバー選択を引き継ぐ）

ctrl + alt + L (Windows) または ctrl + option + L (Mac) を押す。

次のように、選択した変数に関連する次の行にログメッセージが挿入されます：

console.log("SelectedVariableEnclosingClassName -> SelectedVariableEnclosingFunctionName -> SelectedVariable", SelectedVariable)

私の環境はMacなので、出力を行いたい変数を左クリック=> カーソルを合わせてctrl + option + L を実行します。

うまくいきましたね。

様々なオプション

他にも以下のことができるみたいです！

複数変数を出力 optionを押しながら変数選択、ctrl+option+L

optionを押しながらマウスの左クリックで複数の変数を選択した上で、ctrl + option + L (Mac) を押すと、一気にconsole.logを設置できます。

ファイルのconsole.logを全てコメントアウト option+shift+c

大量に追加されたconsole.logもこのコマンド一発で無効にできます。

ファイルのconsole.logのコメントアウトを取り消し option+shift+u

ファイル内の全てのconsole.logに対するコメントアウト をこのコマンド一発で無効にできるようです。

（実践の中で試したいと思います）

ファイルのconsole.logを全て削除 option+shift+d

全削除するにはこちらです。

（実践の中で試したいと思います）

まとめ

これは便利なライブラリですね。長年のconsole.logに対する問題点を一発で解消できそうでしたー。

ただ、根本的な問題は上にも書いた通り。

console.logを多用しないとデバッグできないソースコードの保守性の悪さなので、こまめに リファクタリングするように気をつけたいところですね。

この記事が何かのお役に立てれば幸いです。
最後までお読みいただきありがとうございました！

https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log