console.log(); しか使えなかった自分へ。。。 - Qiita

この記事について 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="バスケ"

[arapro]

デバッガ使用と思わせてからのconsole一点突破

[tyhe]

{変数} で {変数名:値} のオブジェクトが出来るのね。知らんかった。このサンプルの場合は console.log({name, age, sport}) とするのがスマートだね。

[fukken]

{name: name} を {name} と書けるのはconsoleの機能じゃなくてES2015のオブジェクト初期化時の略記法（つまりconsoleに限らずモダンブラウザならどこでも使える）なので、念の為。 https://jsprimer.net/basic/object/

[kako-jun]

エラーだけconsole.error()にすると、赤くなって便利です。あと、console.log(`hoge: ${hoge}`);は、console.log("hoge:", hoge);とも書けるよー（間に半角スペースが自動で入る） ／ 直接コメントに書いた

[sds-page]

alert一点突破やで

[pwatermark]

何のオブジェクトだか分からんもんはひとまずconsole.dir()に突っ込むんやで

[fa11enprince]

logのときは`${変数}`じゃなくてカンマで書き並べるのが良い。`${変数}`だと変数が{ a: 'somestring', b: 42, c: false }のようなときに、[object Object]と悲しい結果になりがち。console.log('ここなんか怪しい!!', foo, bar)ってのがいいよ。

[Falky]

これ系、必要な時に全部忘れてるんだよな

[shinagaki]

debugger ってスクリプトに残してくと、嫌がらせになるのでオススメ

[iwasiman]

自分もconsole.log以外よく忘れちゃいます。

[sharaku3eyes]

good

[Rinta]

最近はjsの仕事もあるので助かる。

[haususuahahdh]

`debbuger;` って書くとブレークポイントになって止めてくれるのも便利だよ

[lovelymakichin]

“const isEven = num => num % 2 === 0”

[mabushii_sign]

全然知らなかった！

[clubman023]

ためしてみよう

[apipix]

こういうのでいいんだよなあ。小さい環境だと。

[nmcli]

console使うときはちょっと攻めてみよう……

[youichirou]

.logしか知らんかった!。そんな便利な関数があったとは!

[xlc]

サーバサイドの人だね。クライアント側ならログを見る時点で開発ツールを起動してるので、デバッガを知らない訳がない。

[ka-ka_xyz]

console.log(`log messages. paramName: [${JSON.stringify(paramName)}]`)で済ませてる。(追記。ブラウザを選ぶ的なブコメがあるけど、もうすぐ終わるIE以外であれば大丈夫っしょ https://developer.mozilla.org/ja/docs/Web/API/console

[aceraceae]

console.log は便利だけど呼び出された時点じゃなくて見た時点の値だから内容が書き換わるときは気をつけないとならなくてちょっとめんどくさい。

[katsyoshi]

宗教的上の理由でchromeは使えないんですよ

[blogpants]

うおー！console.logそんなに兄弟みたいのおったん！？(´∇｀)ﾏｼﾞｶ

[kamayan1980]

「霹靂一閃！」「霹靂一閃！」を思い出しました。

[KoshianX]

おお、console オブジェクトってけっこういろいろあるんだな

[kuracom]

console.table 知らなかった…これは助かる

[W53SA]

https://developer.chrome.com/docs/devtools/console/utilities/

[kkobayashi]

へー便利やん！／console.なんちゃらって他にも色々あるのね

[nharuki]

これは知らないことだらけだった…

[strawberryhunter]

{var}で変数名がキーになるのはこう使うと便利なのか。

[Shinwiki]

覚えるより原始的にちょい見れればいい程度の頻度でしか使わんしなぁ。。

[tk_musik]

これブラウザの仕様に依存するんじゃない？標準大好きブクマカ的にはどうなんだろう。

[helldeath]

知らなくて目からうろこ。

[Mabuo_H]

debuggerかと思いきや。