Console API 참조

Sofia Emelianova
Sofia Emelianova

Console API를 사용하여 JavaScript에서 콘솔에 메시지를 작성합니다. 시작하기 콘솔에 메시지를 로깅하여 주제를 대화형으로 소개합니다.

debug(function) 또는 monitorEvents(node): 콘솔에서만 사용할 수 있습니다.

console.assert(표현식, 객체)

로그 수준: Error

expressionfalse로 평가되면 콘솔에 오류를 씁니다.

const x = 5;
const y = 3;
const reason = 'x is expected to be less than y';
console.assert(x < y, {x, y, reason});

위 console.assert() 예의 결과

console.clear()

콘솔을 지웁니다.

console.clear();

로그 보존이 사용 설정되면 console.clear()가 사용 중지됩니다.

또는 ALT_TEXT_HERE 아이콘을 클릭하여 콘솔을 삭제할 수 있습니다.

console.count([label])

로그 수준: Info

count()가 호출된 횟수를 동일한 줄에서 label입니다. console.countReset([label])를 호출하여 개수를 재설정합니다.

console.count();
console.count('coffee');
console.count();
console.count();

위 console.count() 예의 결과

console.countReset([label])

개수를 재설정합니다.

console.countReset();
console.countReset('coffee');

console.createTask(name)

현재 스택 트레이스를 생성된 task 객체와 연결하는 Task 인스턴스를 반환합니다. 나중에 이 task 객체를 사용하여 함수를 실행할 수 있습니다 (다음 예에서는 f). task.run(f)는 임의의 페이로드를 실행하고 반환 값을 호출자에게 다시 전달합니다.

// Task creation
const task = console.createTask(name);

// Task execution
task.run(f); // instead of f();

task는 생성 컨텍스트와 비동기 함수의 컨텍스트 간의 링크를 형성합니다. 이 링크를 사용하면 DevTools가 비동기 작업에 관한 더 나은 스택 트레이스를 표시할 수 있습니다. 자세한 내용은 연결된 스택 트레이스를 참조하세요.

console.debug(객체 [, 객체, ...])

로그 수준: Verbose

다른 로그 수준을 제외하고 console.log(object [, object, ...])와 동일합니다.

console.debug('debug');

위의 console.debug() 예시 결과입니다.

console.dir(object)

로그 수준: Info

지정된 객체의 JSON 표현을 출력합니다.

console.dir(document.head);

위 console.dir() 예의 결과

console.dirxml(node)

로그 수준: Info

node의 하위 요소의 XML 표현을 출력합니다.

console.dirxml(document);

위 console.dirxml() 예의 결과

console.error(객체 [, 객체, ...])

로그 수준: Error

object를 콘솔에 출력하고 오류로 형식을 지정하고 스택 트레이스를 포함합니다.

console.error("I'm sorry, Dave. I'm afraid I can't do that.");

위의 console.error() 예의 결과

console.group(label)

console.groupEnd(label)가 호출될 때까지 메시지를 시각적으로 그룹화합니다. 사용 console.groupCollapsed(label): 콘솔에 처음 로깅될 때 그룹을 접습니다.

const label = 'Adolescent Irradiated Espionage Tortoises';
console.group(label);
console.info('Leo');
console.info('Mike');
console.info('Don');
console.info('Raph');
console.groupEnd(label);

위 console.group() 예의 결과

그룹을 중첩할 수도 있습니다.

const timeline1 = 'New York 2012';
const timeline2 = 'Camp Lehigh 1970';
console.group(timeline1);
console.info('Mind');
console.info('Time');
console.group(timeline2);
console.info('Space');
console.info('Extra Pym Particles');
console.groupEnd(timeline2);
console.groupEnd(timeline1);

중첩된 그룹.

console.groupCollapsed(label)

로그인 시 그룹이 처음에 접히는 것을 제외하고 console.group(label)와 동일 콘솔.

console.groupEnd(label)

메일을 시각적으로 그룹화하지 않습니다. console.group을 참고하세요.

console.info(객체 [, 객체, ...])

로그 수준: Info

console.log(object [, object, ...])와 동일합니다.

console.info('info');

위의 console.info() 예의 결과입니다.

console.log(객체 [, 객체, ...])

로그 수준: Info

콘솔에 메시지를 출력합니다.

console.log('log');

위의 console.log() 예의 결과

console.table(배열 [, 열])

로그 수준: Info

객체의 배열을 테이블로 기록합니다.

var people = [
  {
    first: 'René',
    last: 'Magritte',
  },
  {
    first: 'Chaim',
    last: 'Soutine',
    birthday: '18930113',
  },
  {
    first: 'Henri',
    last: 'Matisse',
  }
];
console.table(people);

위의 console.table() 예의 결과

기본적으로 console.table()는 모든 테이블 데이터를 로깅합니다. 단일 열 또는 열의 하위 집합을 표시하려면 두 번째 선택적 매개변수를 사용하고 열 이름을 문자열 또는 문자열 배열로 지정하면 됩니다. 예를 들면 다음과 같습니다.

console.table(people, ['last', 'birthday']);

console.table()로 로깅된 테이블의 열 하위 집합입니다.

console.time([label])

새 타이머를 시작합니다. console.timeEnd([label])를 호출하여 타이머를 중지하고 경과 시간을 확인할 수 있습니다

console.time();
for (var i = 0; i < 100000; i++) {
  let square = i ** 2;
}
console.timeEnd();

위 console.time() 예의 결과

console.timeEnd([label])

로그 수준: Info

타이머를 정지합니다. console.time()을 참고하세요.

console.trace()

로그 수준: Info

스택 트레이스를 콘솔에 출력합니다.

const first = () => { second(); };
const second = () => { third(); };
const third = () => { fourth(); };
const fourth = () => { console.trace(); };
first();

위 console.trace() 예의 결과

console.warn(객체 [, 객체, ...])

로그 수준: Warning

콘솔에 경고를 출력합니다.

console.warn('warn');

위 console.warn() 예의 결과