console.log와 함께 즐기자

Console.log(...)는 웹 앱을 개발한 사람이라면 누구나 친숙한 방법입니다. 개발자 콘솔에 데이터를 인쇄하고 테스트, 로깅 및 디버깅에 사용할 수 있습니다.

console.log(console) 명령을 실행하면 콘솔 개체에 처음에 생각했던 것보다 더 많은 기능이 있음을 알 수 있습니다.

이 게시물은 로깅 경험을 다음 단계로 끌어올리기 위해 활용할 수 있는 최고의 멋진 트릭에 대한 간결한 개요를 제공합니다.

테이블

console.table() 메서드는 깔끔한 형식의 테이블 형식으로 출력을 생성합니다.

console.table({
  'Time Stamp': new Date().getTime(),
  'OS': navigator['platform'],
  'Browser': navigator['appCodeName'],
  'Language': navigator['language'],
});

여러 떼

Console.group을 사용하면 서로 관련된 콘솔 문을 그룹화하고 접을 수 있는 섹션을 만들 수 있습니다().

해당 매개변수에 문자열을 전달하여 섹션의 제목을 제공할 수 있습니다. 콘솔을 사용하여 섹션을 접고 펼칠 수 있습니다. 그러나 group 함수가 아닌 groupCollapsed 함수를 사용하여 섹션이 기본적으로 항상 축소되도록 설정할 수도 있습니다. 섹션 내에 하위 섹션을 중첩할 수도 있지만 groupEnd 명령을 사용하여 각 그룹을 마무리해야 한다는 점을 명심해야 합니다.

console.group('URL Info');
  console.log('Protocol', window.location.protocol);
  console.log('Host', window.origin);
  console.log('Path', window.location.pathname);
  console.groupCollapsed('Meta Info');
    console.log('Date Fetched', new Date().getTime());
    console.log('OS', navigator['platform']);
    console.log('Browser', navigator['appCodeName']);
    console.log('Language', navigator['language']);
  console.groupEnd();
console.groupEnd();

스타일 로그

색상, 글꼴, 텍스트 스타일 및 크기 변경과 같은 몇 가지 기본 CSS를 사용하여 로그 출력의 스타일을 지정할 수 있습니다. 브라우저에서 제공하는 지원 수준은 상당히 다양합니다.

console.log(
  '%cHello World!',
  'color: #f709bb; font-family: sans-serif; text-decoration: underline;'
);

시간

디버깅의 또 다른 일반적인 방법은 실행 시간 측정이라고 하며 그 목적은 작업에 걸리는 시간을 결정하는 것입니다. 이는 console.time()을 사용하여 타이밍 프로세스를 시작한 다음 레이블을 전달하고 마지막으로 console.timeEnd()를 통해 타이머를 중지하여 이전 레이블을 사용하여 수행할 수 있습니다. console.timelog()를 사용하여 작업이 계속 실행되는 동안 마커를 추가할 수도 있습니다.

console.time("concatenation");
let output = "";
for (var i = 1; i <= 1e6; i++) {
  output += i;
}
console.timeEnd("concatenation");

concatenation: 1206ms - timer ended

로그 수준

브라우저 콘솔에 여러 필터(정보, 경고 및 오류)가 있고 이러한 필터를 사용하여 기록되는 데이터의 자세한 정도를 변경할 수 있다는 사실을 눈치채셨을 것입니다. 기존 로그 문을 다음 중 하나로 바꾸면 이러한 필터를 사용할 수 있습니다.

console.info() - 로깅 목적의 정보 메시지, 일반적으로 작은 "i"및/또는 파란색 배경이 포함됨

console.warn() - 경고/경미한 오류, 일반적으로 삼각형 느낌표 및/또는 노란색 배경이 포함됨

console.error() - 기능에 영향을 줄 수 있는 오류는 일반적으로 원형 느낌표 및/또는 빨간색 배경을 포함합니다

.

로그 문자열 형식

이것이 요구사항인 경우 C 스타일 프로그램에서 printf와 함께 형식 지정자를 사용하여 출력을 위한 형식화된 문자열을 생성할 수 있습니다.

%s - String or any other type converted to string
%d / %i - Integer
%f - Float
%o - Use optimal formatting
%O - Use default formatting
%c - Use custom formatting (more info)

자세한 내용과 정보를 보려면 Chrome 개발자 콘솔 문서 또는 MDN 콘솔 문서를 방문하세요.