JavaScript 'console' 객체 제어하기

필자는 웹 개발자다. 대부분 Chrome 브라우저를 사용하며, 동시에 개발자 도구를 띄워놓는다.

종종 우리네의 실수가 아님에도, 혹은 데이터 확인 용도로 출력하는 console 내역들이 많을 수 있다.

너무 보기 싫었다. 그래서 작성한다.

 

---

 

<script>
    let cleaner = {
        default : {},
        enabled : false,
        
        // console 객체 내 함수값 백업
        fn_console_backup : () => {
            cleaner.default.log = console.log;
            cleaner.default.info = console.info;
            cleaner.default.warn = console.warn;
            cleaner.default.debug = console.debug;
            cleaner.default.error = console.error;
        },
        
        // console 객체 내 'on', 'off' 효과 적용
        fn_console_change : (boolean) => {
            
            // console 객체 내 'on', 'off' 판정 변수 값 할당
            cleaner.enabled = boolean;
            
            // 기본 제공 console 객체에 대한 제어 실시
            if (cleaner.enabled) {
                console.log = cleaner.default.log;
                console.info = cleaner.default.info;
                console.warn = cleaner.default.warn;
                console.debug = cleaner.default.debug;
                console.error = cleaner.default.error;
                console.log('console turn on...');
            }
            else {
                console.log('console turn off...');
                console.log = function() {};
                console.info = function() {};
                console.warn = function() {};
                console.debug = function() {};
                console.error = function() {};
            }
        },
    };
    
    // jquery document ready 같은 의미(jquery cdn 명시하기 싫어서)
    document.addEventListener("DOMContentLoaded", () => {
        
        // console event setting
        console.on  = function() { cleaner.fn_console_change(true);  }
        console.off = function() { cleaner.fn_console_change(false); }
        
        // default function start(console disabled)
        cleaner.fn_console_backup();
        cleaner.fn_console_change(false);
    });
</script>

 

console 객체 자체가 전역으로 선언되어있기에, 해당 함수 또한 전역으로 사용할 수 있다.

console 객체 내 신규로 넣어준 함수의 설명은 다음과 같다.

• console.off()
  • document loading 완료 시, 기본적으로 실행된다.
  • console 객체 내 함수들을 비어있는 함수 function() {} 로 선언해버려 작동을 방지한다.
• console.on()
  • console 로그를 보고 싶을 때, 개별적으로 선언해줘야 한다.
  • console 객체 내 함수들을 원복시켜 작동을 가능케한다.