JSでDOM処理の関数を作る際の事前確認

最近、JSの学習を始めていました。
ブラウザ上で動かす言語として、
処理を書く前に、以下のことをやると、のちに便利だと知りました。

例えば、inputテキストの値を取得する関数を作成したとします。

const onClickAdd = () => {
  const inputText = document.getElementById("add-text").value;
}

値を取得して、この後に、本処理を書くのですが、
書き切った後に、変数が正しく取れていないとか起こると、
その後の、原因調査が大変で時間を取られます。

なので、alert()を使用して、
視覚的に、取れているかを確認すると便利だと学びました。

const onClickAdd = () => {
  const inputText = document.getElementById("add-text").value;
  alert(inputText);
}

単に、JSだけで完結する変数や配列とかであれば、
node.jsで実行して、バックエンド側で確認することも楽なのですが、
htmlから取得した要素を使うdom操作とかだと、そうはいかなそう。

こういう、小さな確認が大事になる時もありますからね。
今回は以上。