디버깅을 위해 Console.log를 사용하는 간단한 방법

어떤 사람들은 console.log를 비웃고 어떤 사람들은 - 현재 회사를 포함하여 - 간단한 방법을 소중히 여깁니다. 프런트 엔드에서 이점을 활용하는 쉬운 방법은 다음과 같습니다.

전역 상수

이 작업의 핵심은 전역 네임스페이스에 상수를 배치하는 것입니다. 원하는 위치를 선택할 수 있습니다.

window.debugCLs = true

이제 코드를 진행하면서 특정하고 빠른 콘솔 로그를 사용할 섹션이 있는지 결정할 수 있습니다. 디버그할 때 스위치를 켜고 끄고 싶은 번거로운 블록이 있거나 여러 다른 시나리오가 있을 수 있습니다.

try {
    ...to do this thing
} catch(e) {
    window.debugCLs && console.log(e);
}

이러한 로그가 활성화된 파일을 실행하려면 상수를 true 값으로 전환하고 저장한 다음 실행하면 됩니다.

로그 구성

색상(또는 다른 스타일)별로 로그를 구성하여 콘솔에서 항목을 빠르게 정렬하거나 특정 우선 순위 로그에 즉시 눈을 뗄 수 있습니다.

const modelObj = {
    value: 10,
}

try {
    const notAConst = (modelObj.value.props[0]);
} catch(e) {
    window.debugCLs && console.log('%c PRIORITY ','color:white;background-color:#044c94', e);
}

적은 것이 더 많은 것

분명히 항상 좋은 것이 너무 많습니다. 255가지 색상으로 구분된 500줄의 로깅이 있는 콘솔을 통해 정렬하고 싶지는 않을 것입니다. 즉, 4~5개의 다른 범주가 약간 도움이 될 수 있습니다.

그리고 더 매끄럽게 처리하려면 전역 변수를 큰 범주를 켜고 끌 수 있는 객체로 만드십시오.

window.debugCLs = {
    apiCalls = true;
    socketNegotiations = false;
}

해피코딩

...그리고 항상 좋은 코드를 작성하는 것을 잊지 마세요 :)