[Chrome] console API

컴퓨터관련 잡동사니 2018. 7. 31. 16:53

console.assert(expression, object)

평가식이 false이면 콘솔에 오류 출력.

본능적으로 해오던 if (평가식) console.log(에러메시지); 를 대체

function greaterThan(a, b) {
    console.assert(a > b, {msg: 'a가 b보다 작음', a:a, b:b})
}
 
 
greaterThan(5,6)
 
 
// Assertion failed: {msg: "a가 b보다 작음", a: 5, b: 6}

console.clear()

콘솔 지우기.

Preserve log에 체크되어 있을 경우 비활성화 됨.

console.count(label)

label에 해당하는 console.count()가 몇 번 호출되었는지 출력.

function callAPI(name)
{
    console.count(`API ${name} called`);
}
 
 
callAPI('login')
// API login called: 1
 
 
callAPI('login')
// API login called: 2
 
 
callAPI('logout')
// API logout called: 1
 
// 카운트 초기화
console.countReset('API login called');
 
callAPI('login')
// API login called: 1

console.debug(msg)

Verbose 레벨에서만 출력되는 메시지 출력. Default levels(Info + Warnings + Errors) 에선 제외되어 있음. (파란색)

console.debug('디버그 메시지')

console.dir(object)

지정된 객체의 자바스크립트 표현 출력.

콘솔창의 dir()과 동일함.

/* 
콘솔창에서 
그냥 document.body 를 출력한 것과 
console.dir(document.body) 를 출력한 결과를 비교해 볼 것 
*/

console.dirxml(obj)

파라미터로 넘어온 값이 xml이나 html object/element 일 경우 xml/html 포맷으로 출력

// document.body를 inspector처럼 출력
console.dirxml(document.body);
 
// xml/html 형태가 아니라면 그냥 dir 형태로 출력
console.dirxml(location);

console.error()

에러메시지 형태 출력. (빨간색!)

console.error()가 호출된 스택 추적 포함.

function callAPI(name)
{
    if (!name) {
        console.error('error: 잘못된 API name 입니다.', {name: name});
    }
}
 
 
callAPI();
error: 잘못된 API name 입니다. {name: undefined}
 
 
callAPI(false);
error: 잘못된 API name 입니다. {name: false}

console.group()

콘솔출력을 그룹화 할 수 있음. 중첩도 가능.

function callAPI(name, param)
{
    // 1st depth 시작
    console.group('callAPI');
    console.log('name: ', name);
    // 2nd depth 시작
    console.group('parameteres');
    for (let k in param) {
        console.log(`${k}: ${param[k]}`);
    }
    // 2nd depth 끝
    console.groupEnd('parameters');
    // 1st depth 끝
    console.groupEnd('callAPI');
}
 
 
callAPI('login', {id: 'userid', pw: 'password'})
// 출력은 아래와 같은 형태
callAPI
    name:  login
    parameters
        id: userid
        pw: password
 
 
// console.groupCollapsed()를 이용하면 출력시 닫혀 있는 상태로 그룹화 가능

console.info(msg)

Info 레벨의 메시지 출력. Default levels(Info + Warnings + Errors) 에 포함되어 있음. (흰색)

console.info('Infomation');

console.log(object [, object, ...])

콘솔에 메시지 출력

// 일반 문자열 하나 출력
console.log('msg')
msg
 
 
// 여러 변수를 한 줄로 이어서 출력
console.log('msg', 11, false, null, {name:'obj'})
msg 11 false null {name: "obj"}
 
 
// 서식 지정 가능
/*
%s : 문자열
%d 혹은 %i : 정수
%f : 부동 소수점
%o : 확장 가능한 DOM element
%O : 확장 가능한 자바스크립트 객체
%c : 2번째 매개변수에 지정한 CSS 스타일 적용시켜 출력
*/
 
 
// 아래는 서식 지정 예제들
// 문자열
console.log('datetime = %s', new Date());
datetime = Thu Jul 26 2018 14:54:16 GMT+0900 (한국 표준시)
 
 
// 정수
console.log('document.childNodes count = %d', document.childNodes.length);
document.childNodes count = 2
 
 
// 부동 소수점
console.log('11 / 3 = %f', 11 / 3);
11 / 3 = 3.6666666666666665
 
 
// DOM element
console.log('document.body = %o', document.body);
document.body = <body id="main">...</body>
 
 
// JS object
console.log('document.body = %O', document.body);
document.body = body#main
 
 
// 스타일 지정
console.log('%cBIG RED %cBOLD BLUE', 'font-size:24px; color:red;', 'font-weight:bold; color:blue; background:#fff')
결과물은 출력해보면 알게됨;;

console.memory

메모리 상태값. 함수가 아님에 주의.

console.memory
// MemoryInfo {totalJSHeapSize: 53500000, usedJSHeapSize: 50400000, jsHeapSizeLimit: 3760000000}

console.profile([label])

label을 기준으로 자바스크립트 CPU 프로파일 가능.

Profile 패널이 보이지 않을 경우 개발자도구 우측 상단의 X버튼 옆의 세로점 3개를 클릭한 후 More tools > JavaScript Profiler를 선택하면 JavaScript Profiler 패널이 추가됨.

function testProfile()
{
    // 프로파일링 시작
    console.profile('testProfile');
 
 
    // 어쩌고 저쩌고...
 
 
    // 프로파일링 종료
    console.profileEnd();
}

console.table(object)

object를 깔끔한 테이블 형태로 출력.

const objList = [];
objList.push({name: 'AAA', age: 13});
objList.push({name: 'BBB', age: 900});
 
 
console.table(objList);
 
 
아름답게 출력된다.

console.time(label)

label을 이용하여 경과시간 체크.

time(label)과 timeEnd(label) 쌍이 정확히 일치해야 함.

function testTime()
{
    console.time('testTime');
    setTimeout(() => {
        console.timeEnd('testTime');
    }, 500);
}
 
 
testTime();
 
 
testTime: 500.44482421875ms

console.timeStamp([label])

타임라인에 지정한 이벤트를 추가.

let c = setInterval(() = {
    console.timeStamp("it's me!");
}, 1000);
 
 
/*
위 코드를 실행시킨 상태에서 Performance 패널로 가서 기록을 시작하고 어느정도 시간이 흐른 후 중단한 후,
결과 타임라인을 보면 1초 간격으로 이벤트가 찍혀있는 걸 확인 가능.
마우스 커서를 대면 Timestamp (it's me!) 라고 나오는 걸 확인할 수 있음
*/

console.trace(object)

console.trace()를 호출한 지점에서 스택 추적을 출력.

function testTrace(number)
{
    if (number > 5) {
        console.trace('number is: ', number);
        return;
    }
 
    testTrace(number + 1);
}
 
 
testTrace(1);
 
 
number is: 6
testTrace   @ VM1783:4
testTrace   @ VM1783:8
testTrace   @ VM1783:8
testTrace   @ VM1783:8
testTrace   @ VM1783:8
testTrace   @ VM1783:8
(anonumous) @ VM1786:1

console.warn(object [, object, ...])

Warnings 레벨의 메시지 출력. Default levels(Info + Warnings + Errors) 에 포함되어 있음. (노란색)

console.warn('에러까지는 아니지만 위험한 듯?!');

저작자표시

'컴퓨터관련 잡동사니' 카테고리의 다른 글

[Windows] cmd.exe UTF-8 설정으로 시작하기 (open cmd.exe with UTF-8) (0)	2019.07.03
[Chrome] 개발자도구 콘솔 팁 (4)	2018.07.31
윈도우즈 클립보드에 값 넣기 (write to the windows clipboard) (0)	2016.08.17
윈도우즈용 netcat (netcat for windows) (2)	2015.06.30
secureCRT anti-idle 설정 (0)	2015.03.02

Posted by bloodguy

Bloodguy
Twitter : @nicehide