DevTools tips — day 5: console.logの奇妙な振る舞い

DevTools tips — day 5: console.logの奇妙な振る舞い:

この記事はTomek Sułkowskiさんによる

フロントエンドエンジニア向けアドベントカレンダーの翻訳記事です。

とても勉強になったので許可を得て翻訳させていただきました。元記事はこちら。

---

休暇まであと24日です。私はこれからDevToolをより効果的に、そしてもっと楽しく使うためのコツを紹介する短い記事を書いていきたいと思います。昨日までで15個になりました。今日は1つだけですが、驚きの内容ですよ。

16. ログに表示されたobjectは私たちが想像しているものではない

これは本当に驚くべき内容で、console.logを使ったデバッグに少なくとも困惑するようになるでしょうし、最悪の場合は失敗してしまうかもしれません。

consoleにlogしたobjectは中身が表示されるまで参照で保存されます。

例えばobjectをlogして、変化させてもう一度logしてからコンソールを見ると、変更を加える前の最初のlogが...なんと2回目のものと同じ値を持っているのです！

もしこの説明でまだ理解出来なくても大丈夫です。流れをこの動画で確認すればよりすっきりと理解出来るはずです。

この現象がobjectがいつ変化したか確認しようとしているときに起きたら、と想像してみてください��

どう対処したらよいでしょうか？objectのコピー(参照を新しくする)をlogするか...真剣にデバッグする時はブレークポイントとSourceタブを代わりに使うかですね！安心してください、この点についてはアドベントカレンダー中に別の機会でお話します。

---

今日はここまで！いつも通り、なにか新しいことを学べたらぜひ

→ もっと多くの人の目に止まるように拍手��ボタンをお願いします！

→ 他の投稿も見逃さないようにTwitter (@sulco)をフォローしてください！