https://qiita.com/ashketcham/items/06e50b3f7f6238d9b51b?utm_source=Qiitaニュース&utm_campaign=584f50ab74-Qiita_newsletter_518_06_08_2022&utm_medium=email&utm_term=0_e44feaa081-584f50ab74-34388437

この記事について

Webエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。

そんな脳筋な過去の自分に教えてやるための記事です。

console.log({変数名});

「いきなりconsole.log();の紹介かい！！！」って思われるかもしれませんが、この技を知ったときは「なんで知らんかったんや。。。」って思うくらい便利だったので最初に紹介します。

以下のようなHTMLがある場合

<form>
  <input type="text" value="名無しの権兵衛" id="name">
  <input type="text" value="80歳" id="age">
  <input type="text" value="バスケ" id="sport">
</form>

それぞれのinputの要素・値を取得します。

let nameForm = document.getElementById('name');
let ageForm = document.getElementById('age');
let sportForm = document.getElementById('sport');

let name = nameForm.value;
let age = ageForm.value;
let sport = sportForm.value;

上記で取得したinput要素の値を確認しようと思ったら、どれがどのinput要素の値なのかが分かるようにconsole.log(変数名: ${変数});と、変数展開して書いていたが、書くのが非常に面倒やった。。。

console.log(`name: ${name}`);
console.log(`age: ${age}`);
console.log(`sport: ${sport}`);

わざわざコロン区切りに書かなくてもconsole.log({変数名});で同じ出力結果になる！！！！

console.log({name});
console.log({age});
console.log({sport});

@fukken さんにご教示頂きました。 知らないことを学べるので、このような補足コメントは嬉しいです。ありがとうございました。

console.time();

処理にかかっている時間が知りたいなーという時は、該当の処理の場所をconsole.time();とconsole.timeEnd();で挟んでやる！！！ そうすることで、タイマー開始からの経過時間がミリ秒単位で出力される。

console.time();
let input = document.getElementsByClassName('input');
console.log(input)
console.timeEnd();