기본 Console.log() 너머

다음은 디버깅 툴킷에 추가할 수 있는 몇 가지 빠른 팁입니다.

개체 사용

네이키드 변수를 기록하는 대신 객체를 사용하여 레이블이 지정된 로그를 빠르게 생성하는 것을 고려하십시오.

const hello = 'hello'
const num = Math.random()
console.log({ hello, num })
=> { hello: "hello", num: 0.9891318026649385 }

경고 및 오류

대부분의 사람들이 이것을 알고 있지만 스택 추적을 제공하기 때문에 매우 유용합니다(즉, 경고/오류가 발생한 위치를 쉽게 찾을 수 있음을 의미함). 그래서 들어보지 못한 분들을 위해 올립니다.
console.warn('warning') 또는 console.error('error')와 같은 문자열과 함께 사용할 수 있습니다.

또는 오류를 전달할 수 있습니다. console.error(new Error('message'))
나는 일시적으로 여러 가지를 기록할 때 이것을 많이 사용하지만 그 중 하나가 콘솔에서 눈에 띄기를 원합니다.

그룹

아직 이것을 사용할 이유를 찾지 못했지만 어떻게 유용할 수 있는지 알 수 있습니다. MDN docs에서 :

console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.log("Back to the outer level");

콘솔에서 축소 가능한 그룹을 얻습니다.

누군가 댓글에서 이것을 어떻게 사용하고 있는지 공유할 수 있습니까?

테이블

배열이나 객체로 작업하는 경우 때때로 테이블에서 시각화하는 것이 유용합니다. MDN docs에서 :

var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
console.table(people);

그러면 행 및 열 머리글에 대한 색인 번호를 사용하여 테이블이 표시됩니다. 객체에 console.table()를 사용할 수도 있으며 키를 행 헤더로 사용합니다.

결론

이 중 새로운 것이 있었습니까? 내가 놓친 게 무엇입니까? 웹 개발용 콘솔 사용에 대한 팁을 듣고 싶습니다!