기본 console.log 사용을 중지하고 대신 확인하십시오.

그래서 항상 console.log를 사용하여 응용 프로그램을 디버깅하고 있습니까?
이 게시물에서는 더 나은 디버깅을 위한 대안을 보여 드리겠습니다.

보간

console.log를 변수로 어떻게 보간하고 있습니까? 이런 짓을 하고 있니?

const a = 'World';
console.log('Hello ' + a);

그것은 잘못된 것이 아니지만 그렇게하는 더 좋은 방법이 있습니다.

% 연산자

첫 번째 방법은 % 연산자를 사용하는 것입니다.
나는 그것이 당신이 그렇게 할 수있는 다른 프로그래밍 언어와 거의 비슷하게 작동한다고 믿습니다.

따라서 다음과 같이 사용할 수 있습니다.

console.log('Hello %s', a);

정수의 경우 %i 또는 부동 소수점 수의 경우 %f와 같은 다른 옵션도 있습니다.
Google에서 검색하면 다른 많은 옵션이 표시됩니다. ;)

템플릿 문자열

템플릿 문자열은 문자열을 백틱으로 감쌀 때 호출됩니다. 예:

const a = `This is a template string`;

그러나 변수를 보간하지 않는 경우에는 불필요하므로 이 경우 작은따옴표/큰따옴표를 사용하는 것이 좋습니다.

템플릿 문자열을 사용하려면 변수를 ${} 에 래핑해야 합니다. console.log가 어떻게 생겼는지 살펴보겠습니다.

const a = 'World';
console.log(`Hello ${a}`);

깔끔해보이죠?!

스타일

console.log에 스타일을 적용할 수 있다는 사실을 알고 계셨습니까?


그렇게 하려면 console.log 문자열을 %c 로 시작해야 하고 두 번째 인수는 "인라인"CSS여야 합니다. 이것 좀 봐:

console.log('%c I am a great text!', 'font-size: 26px; color: blue;');

복사하여 콘솔에 붙여넣고 결과를 확인하십시오.
굉장해, 응?

경고

경고를 추가해야 하는 경우 console.warn 를 사용하여 추가할 수 있습니다.

그렇게 하려면 다음을 사용하십시오.

console.warn('This is some warning');

오류

예, 알아요. 우리 응용 프로그램에 오류가 있는 것은 위안입니다.
그러나 오류를 수정하기 위해 디버그하려고 할 때 기본 로그 대신 오류를 표시하지 않는 이유는 무엇입니까?

그렇게 하려면 다음을 사용하십시오.

console.error('This is some error');

정보

때로는 일부 정보를 다르게 표시하고 싶을 때가 있습니다.console.info 를 사용하면 로그 앞에 작은 "정보 아이콘"이 표시됩니다.

그렇게 하려면 다음을 사용하십시오.

console.info('Just a simple information');

주장하다

assert를 사용하여 무언가를 테스트할 수 있습니다.
첫 번째 인수에서는 테스트하려는 내용을 전달하고 두 번째 인수는 assert가 실패할 경우 표시할 내용입니다.
어설션이 true를 반환하면 아무 것도 표시하지 않습니다.

console.assert(1 !== 1, '1 is equal to 1');

DOM 요소 보기

다음과 같은 것이 있다고 가정해 보겠습니다.

const p = document.querySelector('p');

따라서 페이지의 첫 번째 변수p로 변수<p>가 있습니다.
당신이 console.log 그것을 얻는다면 아마도 DOM 요소를 얻을 수 있지만 속성 등을 알 수는 없습니다.

그러나 우리에게는 우리를 구할 용감한console.dir이 있습니다!

console.dir(p);

DOM 요소를 개체로 기록하므로 모든 속성, 이벤트 등을 확인할 수 있습니다! 엄청난!\영형/

그룹화

때로는 어레이 내부에 기록을 남기고 콘솔에서 스팸이 ​​됩니다. 맞죠?

예를 들면 다음과 같습니다.

const dogs = [
  { name: 'Ricota', age: 2 },
  { name: 'Gorgonzola', age: 8 }
];

dogs.forEach(dog => {
  console.log(`Dog: ${dog.name}`);
  console.log(`Dog: ${dog.name} is ${dog.age} years old`);
  console.log(`Dog: ${dog.name} is ${dog.age * 7} years old for real`);
})

네, 알고 있습니다. 콘솔을 이런 식으로 읽는 것은 그리 쉬운 일이 아닙니다.
그러나 우리는 그들을 그룹화 할 수 있습니다!

두 가지 옵션이 있습니다.

console.group()

console.group 그룹화하고 처음에 열린 것으로 표시합니다(그러나 닫을 수 있음).

예를 들어 보겠습니다.

dogs.forEach(dog => {
  console.group(dog.name); // This is the group title
  console.log(`Dog: ${dog.name}`);
  console.log(`Dog: ${dog.name} is ${dog.age} years old`);
  console.log(`Dog: ${dog.name} is ${dog.age * 7} years old for real`);
  console.groupEnd(dog.name); // To end the group, you MUST pass the same as you are using in your group title
});

console.group축소()

console.groupCollapsed도 그룹화하지만 처음에는 닫힌 것으로 표시하므로 원하는 것만 열 수 있습니다.

예를 들어 보겠습니다.

dogs.forEach(dog => {
  console.groupCollapsed(dog.name); // This is the group title
  console.log(`Dog: ${dog.name}`);
  console.log(`Dog: ${dog.name} is ${dog.age} years old`);
  console.log(`Dog: ${dog.name} is ${dog.age * 7} years old for real`);
  console.groupEnd(dog.name); // To end the group, you MUST pass the same as you are using in your group title
});

둘 다 console.groupEnd() 로 닫아야 합니다.

둘 다 그룹을 생성할 때와 그룹을 종료할 때 동일한 제목이 필요합니다.

테이블

콘솔에서 테이블을 생성할 수 있습니다. 예, 정말 할 수 있습니다!

동일한 개 데이터 예제를 사용하여 콘솔에서 다음을 시도합니다.

const dogs = [
  { name: 'Ricota', age: 2 },
  { name: 'Gorgonzola', age: 8 }
];
console.table(dogs);

색인, 이름 및 연령 헤더가 있는 테이블이 표시됩니다.

분명한

이제 콘솔에서 많은 작업을 수행했습니다. 다른 작업을 계속 테스트하기 전에 지우지 않겠습니까?

예, 다음을 사용하여 지울 수 있습니다.

console.clear();

그리고 지금 바로 새롭고 신선한 콘솔을 사용할 수 있습니다!

그게 다야!
나는 당신이 그것을 즐기고 계속 배우기를 바랍니다!