1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

console.logでネストが深くてログが見れない時の対処法

Posted at

はじめに

検証ツールのConsoleでconsole.logの結果を見る時は、問題なくログを見れると思います。ですが、出力したいログのネストが深いとターミナルで出力されないケースがあります。

見れませんね...

[Object]と出力されてしまってます。この中身を見れるようにしたいと思います。

スクリーンショット 2022-02-18 23.38.02.png

ネストが深い場合、出力したいログをJSON形式にしましょう

console.log(JSON.stringify('出力したいログ', null, 2))

実行結果
スクリーンショット 2022-02-18 23.38.45.png

JSON.stringifyの解説をサラッとしたいと思います。第一引数は、JSON 文字列に変換する値です。
第二引数は、replacerです。JSONにする際に、出力内容をフィルターしたりできます。null,undefinedや文字列を渡すと、すべてのオブジェクトのプロパティを出力されます。特にフィルターする必要がなければnullでいいと思いますが、今回は試してみます。

replacerは関数と配列どちらか場合によって指定してください!

出力したいプロパティを配列に入れる
const keys = ['type', 'title']
console.log(JSON.stringify('出力したいログ',keys, 2))

ログから、answerListというプロパティが消えました。
スクリーンショット 2022-02-19 0.22.47.png

ちなみに、JSON.stringifyの第3引数は、インデントです。お好みで指定してください。

おまけ

console.logより、console.traceをおすすめしたいです。スタックトレースが表示されているのでどこでログが出力されるか一目でわかります。

スクリーンショット 2022-02-19 0.26.06.png

console.log('=====log=====', log)

こんな感じに、ログを書く必要がなくなりますw

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?