본문 바로가기
개발자의 공부방/Frontend

JS] console.log JSON Depth 표기 하는 방법.

by 쥬니준 2022. 6. 10.
728x90
반응형

보통 로그를 작성할 때 JSON.stringify를 사용하면 아래와 같이 사용한다.

// 콘솔 로그 작성
console.log('==> log : ', JSON.stringify(events));

출력 결과물은 아래와 같이 정신없이 나온다...

==> events_2, [{"blockNumber":12326143,"blockHash":"0x31aed0d4af44d396f6b33c86e363278496bbdacb2c0ac7a73f77044778d880c5","transactionIndex":8,"removed":false,"address":"0x229B066b8b9D198802C82b6B68397E1Da138c6F0","data":"0x","topics":["0x342827c97908e5e2f71151c08502a66d44b6f758e3ac2f1de95f02eb95f0a735","0x000
0000000000000000000000000000000000000000000000000000000000000","0x000000000000000000000000b21fe4a443e6b5708a543d7595b934c6c25f4ac1"],"transactionHash":"0x9b8e7e8857246fcd927cbf96e74a0020920e78422e25e929590346a91b0a6d42","logIndex":13,"event":"OwnerSet","eventSignature":"OwnerSet(address,address)","args":["0x
0000000000000000000000000000000000000000","0xB21Fe4a443e6B5708a543d7595B934c6c25F4Ac1"]},{"blockNumber":12326253,"blockHash":"0x7df81f7e591772abe608a0cc160459cf4461b6735421106c0ea5ce6880cc951d","transactionIndex":6,"removed":false,"address":"0x229B066b8b9D198802C82b6B68397E1Da138c6F0","data":"0x0000000000000
000000000000000000000000000000000000000000000000001","topics":["0xa99810881a93abbd4cc5a11046b2e42ed4e5b27451247692031d45cb29eaf3a1"],"transactionHash":"0x68b065600f1ad406d50211442d66aba75eefc65f649003260a2b98ddeaad80f5","logIndex":11,"event":"Withdrawls","eventSignature":"Withdrawls(uint256)","args":[{"type"
:"BigNumber","hex":"0x01"}]},{"blockNumber":12338364,"blockHash":"0x1223680617a58ae45b64eb493aa22e51052e1036df700ca58a55686c922ae31e","transactionIndex":11,"removed":false,"address":"0x229B066b8b9D198802C82b6B68397E1Da138c6F0","data":"0x0000000000000000000000000000000000000000000000000000000000000002","topic
s":["0xa99810881a93abbd4cc5a11046b2e42ed4e5b27451247692031d45cb29eaf3a1"],"transactionHash":"0xb0ea1a21a6a71e692704d65fb9a5320f8d68f987690a0f10167b3cc12b893c63","logIndex":15,"event":"Withdrawls","eventSignature":"Withdrawls(uint256)","args":[{"type":"BigNumber","hex":"0x02"}]},{"blockNumber":12347574,"block
Hash":"0x585af563c625993271f5d4a232d4f2ea5da6b06cdaddfca55cd2c23ae872636b","transactionIndex":27,"removed":false,"address":"0x229B066b8b9D198802C82b6B68397E1Da138c6F0","data":"0x","topics":["0x342827c97908e5e2f71151c08502a66d44b6f758e3ac2f1de95f02eb95f0a735","0x000000000000000000000000b21fe4a443e6b5708a543d7
595b934c6c25f4ac1","0x0000000000000000000000005d4e85d19b7c462ebe4ff120b4bed3885f927219"],"transactionHash":"0x337a695ddfd9561fb27ca054babf1f732c139e7240806f8e3560bd7cdc5f5781","logIndex":54,"event":"OwnerSet","eventSignature":"OwnerSet(address,address)","args":["0xB21Fe4a443e6B5708a543d7595B934c6c25F4Ac1","0
x5d4E85d19B7c462ebe4fF120B4BEd3885f927219"]},{"blockNumber":12347604,"blockHash":"0x5a17930d86d8f0f4f7248ea3b657069e1ea7940170a6d1fe7dc7e5a682a9d204","transactionIndex":22,"removed":false,"address":"0x229B066b8b9D198802C82b6B68397E1Da138c6F0","data":"0x","topics":["0x342827c97908e5e2f71151c08502a66d44b6f758e
3ac2f1de95f02eb95f0a735","0x0000000000000000000000005d4e85d19b7c462ebe4ff120b4bed3885f927219","0x000000000000000000000000b21fe4a443e6b5708a543d7595b934c6c25f4ac1"],"transactionHash":"0xeeefce6dc19c7b72d3743949aad0e134ca6854a266d9e99ef3be837d97668dad","logIndex":35,"event":"OwnerSet","eventSignature":"OwnerSe
t(address,address)","args":["0x5d4E85d19B7c462ebe4fF120B4BEd3885f927219","0xB21Fe4a443e6B5708a543d7595B934c6c25F4Ac1"]},{"blockNumber":12353018,"blockHash":"0xf72d25a6ac29d11094045eb246b38c991ea63732c5adac9b2cf31600f329ab09","transactionIndex":3,"removed":false,"address":"0x229B066b8b9D198802C82b6B68397E1Da1
38c6F0","data":"0x0000000000000000000000000000000000000000000000000000000000000001","topics":["0xa99810881a93abbd4cc5a11046b2e42ed4e5b27451247692031d45cb29eaf3a1"],"transactionHash":"0x6b5d7bb64b840ca0542cfeeea402f988a6c2c80f8aec1e16631477bba5eb4bee","logIndex":10,"event":"Withdrawls","eventSignature":"Withd
rawls(uint256)","args":[{"type":"BigNumber","hex":"0x01"}]},{"blockNumber":12355117,"blockHash":"0xfd2abc30774e1248d483f794005bd0cb9ed2efdf5d4c33403df7320c4a91badf","transactionIndex":17,"removed":false,"address":"0x229B066b8b9D198802C82b6B68397E1Da138c6F0","data":"0x","topics":["0x342827c97908e5e2f71151c085
02a66d44b6f758e3ac2f1de95f02eb95f0a735","0x000000000000000000000000b21fe4a443e6b5708a543d7595b934c6c25f4ac1","0x0000000000000000000000005d4e85d19b7c462ebe4ff120b4bed3885f927219"],"transactionHash":"0x601f5733bf01a4da5c4d19c06e5be76cf191ef33c59839653c5c681ff83899d2","logIndex":21,"event":"OwnerSet","eventSign
ature":"OwnerSet(address,address)","args":["0xB21Fe4a443e6B5708a543d7595B934c6c25F4Ac1","0x5d4E85d19B7c462ebe4fF120B4BEd3885f927219"]},{"blockNumber":12355183,"blockHash":"0x4f44e7817e62a38b7948075f89f3fe5684f3a7362ec5e8c82d5bb8335c4a28dc","transactionIndex":16,"removed":false,"address":"0x229B066b8b9D198802
C82b6B68397E1Da138c6F0","data":"0x0000000000000000000000000000000000000000000000000000000000000001","topics":["0xa99810881a93abbd4cc5a11046b2e42ed4e5b27451247692031d45cb29eaf3a1"],"transactionHash":"0x1c5e3074ada330db3e26e3fe7f78040543efa16fb1f1b4751bf92efac7b57b99","logIndex":18,"event":"Withdrawls","eventS
ignature":"Withdrawls(uint256)","args":[{"type":"BigNumber","hex":"0x01"}]}]

 

위 처럼 나오는 JSON을 댑스가 있도록 표기하는 방법을 알아보자.

 

// JSON 표기 로그 작성
console.log(`==> JSON : , ${JSON.stringify(events, null, 4)}`);

 

출력결과물

짠? 아래와 같이 예쁘게 알아볼 수 있게 나오는 것을 확인할 수 있다!!

==> JSON : , [
    {
        "blockNumber": 12326143,
        "blockHash": "0x31aed0d4af44d396f6b33c86e363278496bbdacb2c0ac7a73f77044778d880c5",
        "transactionIndex": 8,
        "removed": false,
        "address": "0x229B066b8b9D198802C82b6B68397E1Da138c6F0",
        "data": "0x",
        "topics": [
            "0x342827c97908e5e2f71151c08502a66d44b6f758e3ac2f1de95f02eb95f0a735",
            "0x0000000000000000000000000000000000000000000000000000000000000000",
            "0x000000000000000000000000b21fe4a443e6b5708a543d7595b934c6c25f4ac1"
        ],
        "transactionHash": "0x9b8e7e8857246fcd927cbf96e74a0020920e78422e25e929590346a91b0a6d42",
        "logIndex": 13,
        "event": "OwnerSet",
        "eventSignature": "OwnerSet(address,address)",
        "args": [
            "0x0000000000000000000000000000000000000000",
            "0xB21Fe4a443e6B5708a543d7595B934c6c25F4Ac1"
        ]
    },
    {
        "blockNumber": 12326253,
        "blockHash": "0x7df81f7e591772abe608a0cc160459cf4461b6735421106c0ea5ce6880cc951d",
        "transactionIndex": 6,
        "removed": false,
        "address": "0x229B066b8b9D198802C82b6B68397E1Da138c6F0",
        "data": "0x0000000000000000000000000000000000000000000000000000000000000001",
        "topics": [
            "0xa99810881a93abbd4cc5a11046b2e42ed4e5b27451247692031d45cb29eaf3a1"
        ],
        "transactionHash": "0x68b065600f1ad406d50211442d66aba75eefc65f649003260a2b98ddeaad80f5",
        "logIndex": 11,
        "event": "Withdrawls",
        "eventSignature": "Withdrawls(uint256)",
        "args": [
            {
                "type": "BigNumber",
                "hex": "0x01"
            }
        ]
    },
    {
        "blockNumber": 12338364,
        "blockHash": "0x1223680617a58ae45b64eb493aa22e51052e1036df700ca58a55686c922ae31e",
        "transactionIndex": 11,
        "removed": false,
        "address": "0x229B066b8b9D198802C82b6B68397E1Da138c6F0",
        "data": "0x0000000000000000000000000000000000000000000000000000000000000002",
        "topics": [
            "0xa99810881a93abbd4cc5a11046b2e42ed4e5b27451247692031d45cb29eaf3a1"
        ],
        "transactionHash": "0xb0ea1a21a6a71e692704d65fb9a5320f8d68f987690a0f10167b3cc12b893c63",
        "logIndex": 15,
        "event": "Withdrawls",
        "eventSignature": "Withdrawls(uint256)",
        "args": [
            {
                "type": "BigNumber",
                "hex": "0x02"
            }
        ]
    },
    {
        "blockNumber": 12347574,
        "blockHash": "0x585af563c625993271f5d4a232d4f2ea5da6b06cdaddfca55cd2c23ae872636b",
        "transactionIndex": 27,
        "removed": false,
        "address": "0x229B066b8b9D198802C82b6B68397E1Da138c6F0",
        "data": "0x",
        "topics": [
            "0x342827c97908e5e2f71151c08502a66d44b6f758e3ac2f1de95f02eb95f0a735",
            "0x000000000000000000000000b21fe4a443e6b5708a543d7595b934c6c25f4ac1",
            "0x0000000000000000000000005d4e85d19b7c462ebe4ff120b4bed3885f927219"
        ],
        "transactionHash": "0x337a695ddfd9561fb27ca054babf1f732c139e7240806f8e3560bd7cdc5f5781",
        "logIndex": 54,
        "event": "OwnerSet",
        "eventSignature": "OwnerSet(address,address)",
        "args": [
            "0xB21Fe4a443e6B5708a543d7595B934c6c25F4Ac1",
            "0x5d4E85d19B7c462ebe4fF120B4BEd3885f927219"
        ]
    },
    {
        "blockNumber": 12347604,
        "blockHash": "0x5a17930d86d8f0f4f7248ea3b657069e1ea7940170a6d1fe7dc7e5a682a9d204",
        "transactionIndex": 22,
        "removed": false,
        "address": "0x229B066b8b9D198802C82b6B68397E1Da138c6F0",
        "data": "0x",
        "topics": [
            "0x342827c97908e5e2f71151c08502a66d44b6f758e3ac2f1de95f02eb95f0a735",
            "0x0000000000000000000000005d4e85d19b7c462ebe4ff120b4bed3885f927219",
            "0x000000000000000000000000b21fe4a443e6b5708a543d7595b934c6c25f4ac1"
        ],
        "transactionHash": "0xeeefce6dc19c7b72d3743949aad0e134ca6854a266d9e99ef3be837d97668dad",
        "logIndex": 35,
        "event": "OwnerSet",
        "eventSignature": "OwnerSet(address,address)",
        "args": [
            "0x5d4E85d19B7c462ebe4fF120B4BEd3885f927219",
            "0xB21Fe4a443e6B5708a543d7595B934c6c25F4Ac1"
        ]
    },
    {
        "blockNumber": 12353018,
        "blockHash": "0xf72d25a6ac29d11094045eb246b38c991ea63732c5adac9b2cf31600f329ab09",
        "transactionIndex": 3,
        "removed": false,
        "address": "0x229B066b8b9D198802C82b6B68397E1Da138c6F0",
        "data": "0x0000000000000000000000000000000000000000000000000000000000000001",
        "topics": [
            "0xa99810881a93abbd4cc5a11046b2e42ed4e5b27451247692031d45cb29eaf3a1"
        ],
        "transactionHash": "0x6b5d7bb64b840ca0542cfeeea402f988a6c2c80f8aec1e16631477bba5eb4bee",
        "logIndex": 10,
        "event": "Withdrawls",
        "eventSignature": "Withdrawls(uint256)",
        "args": [
            {
                "type": "BigNumber",
                "hex": "0x01"
            }
        ]
    },
    {
        "blockNumber": 12355117,
        "blockHash": "0xfd2abc30774e1248d483f794005bd0cb9ed2efdf5d4c33403df7320c4a91badf",
        "transactionIndex": 17,
        "removed": false,
        "address": "0x229B066b8b9D198802C82b6B68397E1Da138c6F0",
        "data": "0x",
        "topics": [
            "0x342827c97908e5e2f71151c08502a66d44b6f758e3ac2f1de95f02eb95f0a735",
            "0x000000000000000000000000b21fe4a443e6b5708a543d7595b934c6c25f4ac1",
            "0x0000000000000000000000005d4e85d19b7c462ebe4ff120b4bed3885f927219"
        ],
        "transactionHash": "0x601f5733bf01a4da5c4d19c06e5be76cf191ef33c59839653c5c681ff83899d2",
        "logIndex": 21,
        "event": "OwnerSet",
        "eventSignature": "OwnerSet(address,address)",
        "args": [
            "0xB21Fe4a443e6B5708a543d7595B934c6c25F4Ac1",
            "0x5d4E85d19B7c462ebe4fF120B4BEd3885f927219"
        ]
    },
    {
        "blockNumber": 12355183,
        "blockHash": "0x4f44e7817e62a38b7948075f89f3fe5684f3a7362ec5e8c82d5bb8335c4a28dc",
        "transactionIndex": 16,
        "removed": false,
        "address": "0x229B066b8b9D198802C82b6B68397E1Da138c6F0",
        "data": "0x0000000000000000000000000000000000000000000000000000000000000001",
        "topics": [
            "0xa99810881a93abbd4cc5a11046b2e42ed4e5b27451247692031d45cb29eaf3a1"
        ],
        "transactionHash": "0x1c5e3074ada330db3e26e3fe7f78040543efa16fb1f1b4751bf92efac7b57b99",
        "logIndex": 18,
        "event": "Withdrawls",
        "eventSignature": "Withdrawls(uint256)",
        "args": [
            {
                "type": "BigNumber",
                "hex": "0x01"
            }
        ]
    }
]

 

참고로 이런 방법도 있다.

console.dir(events, {depth : null});

출력 결과물은 동일하지만 색깔이 첨부되서 나온다.

반응형

댓글0