콘솔 메시지에 대한 짧은 가이드

콘솔에서 다양한 유형의 메시지를 기록하는 방법이 궁금하십니까? 알았어 그냥 따라와..

Chrome DevTools Console에서 지원하는 6가지 유형의 메시지가 있습니다.

Information

Warning

Error

Table

Group

Custom Message

정보

console.log(<value>) 함수를 통해 수행할 수 있습니다.

console.log("[INFO]: You've Inserted 1 row in the database!");

경고

console.warn(<value>) 함수를 통해 수행할 수 있습니다.

console.warn("[WARNING]: You're about to leave this page !");

가장 왼쪽 작은 커서를 누르면 Stack Trace임을 확인할 수 있습니다 ▶️

오류

console.error(<value>) 함수를 통해 수행할 수 있습니다.

console.error("[Error]: This kind of operations requires a Quantum Machine !");

테이블

console.table([<Array of Objects>]) 함수를 통해 수행할 수 있습니다.

예시

let _humankind = [
    {
        Id: '0',
        Type: 'homosapien',
        Name: 'Uncle Bob'
    },
    {
       Id: '1',
       Type: 'neanderthal',
    },
    {
       Id: '2',
       Type: 'denisovan',
       Name: 'Donald Trump'
    }
];
console.table(_humankind);

그룹

console.group(<label>) console.groupEnd(<label>) 둘 다 그것을 달성하는 데 사용됩니다!

let humanGroup= 'List of Human:';

// Begin the group
console.group(humanGroup);
console.info('homosapien');
console.info('neanderthal');
console.info('denisovan');
// Necessary to end the group

console.groupEnd(humanGroup);

[선택항목] 추가 설명

쉽게 불러올 수 있도록 그룹 제목(레이블)을 나타내는 문자열을 변수에 저장합니다.
E.G. let label = 'List of Human:' ;

console.group(label) 또는 console.group('List of Human:' )`

를 호출하여 그룹을 시작합니다.

​ We don't need the second invocation because we already stored the title in the label variable !

요소를 console.info(<content>) 에 전달하여 해당 그룹에 요소를 추가합니다.

마지막으로 console.groupEnd(label) 또는 console.groupEnd('List of Human:' )`

를 사용하여 그룹의 끝을 주장합니다.

That's exactly why we defined the label variable:

• it's easier to recall
• Avoid probable spelling mistakes !

맞춤 메시지

정지 콘솔 메시지를 검사하려고 할 때마다 페이스북이 콘솔 메시지의 스타일을 어떻게 지정하는지 궁금한 적이 있습니까?


음, console.log()를 통해 가능하지만 다음을 수행해야 합니다.

이전%c을 추가하여 사용자 정의 로그로 표시합니다.

css 규칙을 전달하여 내용의 스타일을 두 번째 인수로 지정합니다.

따라서 최종 호출 형식은 다음과 같습니다. console.log('%c<content>',styleRules) ;

const spacing = '0.5rem';
const style = `
        padding: ${spacing};
        background-color: yellow;
        color: blue;
        font-weight: Bold;
        border: ${spacing} solid red;
        border-radius: ${spacing};
        font-size: 2em;
`;
console.log('%cThis is a Custom Log !', style);