JavaScript: 로깅을 강화하는 방법

로깅을 강화하고 좋은 개발자 습관을 기르십시오. 코드베이스가 커짐에 따라 더 쉽게 디버그해야 합니다. 디버깅에서 중요한 도구 중 하나는 로깅입니다. 이 기사는 클라이언트 측 JavaScript의 필수 측면에 중점을 둡니다.

대신 Node.js 로그인에 대해 알아보려면 를 참조하세요.

클라이언트 측 로깅

JavaScript의 경우 애플리케이션이 출력할 로깅이 브라우저의 콘솔에 표시됩니다. 이는 로그가 파일에 기록되거나 로그 집계 서버로 전송되는 서버 측 로깅과 다릅니다.

브라우저마다 로깅을 다르게 처리하지만 기본 사항은 동일하다는 점을 아는 것이 중요합니다. 다양한 브라우저에서 로깅을 처리하는 방법을 여기에서 확인하세요.

크롬

파이어폭스

사파리

마이크로소프트 엣지

Astandard는 console를 사용한 로깅이 작동하는 방식에 대해 존재하지만 unfortunately, not all browsers respect it .

이미 console.log() 를 사용하는 것이 편할 가능성이 높지만 console 객체에 로깅을 강화할 수 있는 더 많은 메서드가 있습니다!

로깅 메시지 수준

JavaScript는 다양한 수준의 메시지를 지원합니다. 그들은 모두 동일하게 작동하지만 출력은 다르게 보입니다. 메시지 수준은 다른 의미를 전달합니다. 예를 들어 문제가 발생한 경우 error 수준을 사용해야 하는 반면 보다 일반적인 로그에는 info 수준을 사용할 수 있습니다.

내 예제에서는 Google 크롬 버전 98.0.4758을 사용하고 있습니다.

콘솔.로그()

일반 출력에 사용됩니다. 일반적으로 info 와 같은 수준입니다.

console.log("Look at me -- I'm a simple logline");

콘솔.정보()

일반적으로 log 와 동일합니다.

console.info("I look identical to log()");

콘솔.디버그()

프로덕션 애플리케이션 로그 출력에서 ​​원하지 않는 상세 로그에 사용됩니다. 이 수준은 activate it yourself이 필요하기 때문에 특별합니다.

console.debug("Some debug output");

콘솔.경고()

경고에 사용됩니다. 메시지를 경고 형식으로 지정하고 일부 브라우저에서는 스택 추적을 포함합니다.

console.warn("Warning! Something might be wrong");

콘솔.오류()

오류에 사용됩니다. 메시지를 오류 형식으로 지정하고 스택 추적을 포함합니다.

console.error("Error! Something went wrong");

JSON과 같은 로그 객체

개체를 더 쉽게 읽을 수 있도록 JSON 형식을 적용하여 개체를 기록할 수 있습니다.

const obj = { name: "Simon", lang: "JS", colors: ["purple", "blue"] };
console.dir(obj);

물건 세기

예를 들어 함수가 호출되는 횟수를 기록하는 것이 유용할 수 있습니다. 이렇게 하려면 console.count([label])로 전화하면 됩니다. 호출된 횟수를 기록합니다. 레이블이 제공되지 않은 경우 default 레이블로 돌아갑니다.

console.count();
console.count();
console.count("fruit");
console.count();
console.count("fruit");

그룹 로그 메시지

때로는 함께 속한 줄을 기록하고 싶을 수도 있습니다. 이를 위해 console.group(label)를 사용하여 로그 그룹을 생성할 수 있습니다. 그룹을 축소된 것으로 기록하려면 console.groupCollapsed(label) 를 사용할 수 있습니다.

const label = "Fruit";
console.group(label);
console.info("Apple");
console.info("Pear");
console.info("Banana");
console.info("Orange");
console.groupEnd(label);

시간 측정

경력의 어느 시점에서 코드를 실행하는 데 걸리는 시간을 최적화해야 할 수도 있습니다. 무엇을 최적화하는지 알기 전에 어디에 시간이 소요되는지 이해하고 싶습니다. 시간을 측정하는 데 사용할 수 있는 한 가지 도구는 console.time([label]) 입니다. 이렇게 하면 console.timeEnd([label]) 를 사용하여 중지하고 기록할 수 있는 타이머가 시작됩니다.

console.time();
for (var i = 0; i < 100000; i++) {
  let random = Math.floor(Math.random() * i);
}
console.timeEnd();

테이블 서식

배열을 더 쉽게 읽을 수 있도록 테이블 형식으로 기록할 수 있습니다.

const array = [
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" },
  { name: "Pear", color: "Green" },
  { name: "Orange", color: "Orange" }
];
console.table(array);

결론

JavaScript를 사용한 클라이언트 측 로깅은 간단합니다! 기본 제공 콘솔 개체를 사용하는 것이 브라우저에 로그인하는 기본 방법입니다. 라이브러리가 있지만 실제로 사용할 필요는 없습니다.


, 또는 GitHub에서 나와 연결

prplcode.dev에 원래 게시됨