기본 Console.log() 너머
5154 단어 webdevtypescriptjavascript
개체 사용
네이키드 변수를 기록하는 대신 객체를 사용하여 레이블이 지정된 로그를 빠르게 생성하는 것을 고려하십시오.
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()
를 사용할 수도 있으며 키를 행 헤더로 사용합니다.결론
이 중 새로운 것이 있었습니까? 내가 놓친 게 무엇입니까? 웹 개발용 콘솔 사용에 대한 팁을 듣고 싶습니다!
Reference
이 문제에 관하여(기본 Console.log() 너머), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/imjoshellis/beyond-basic-console-log-4dao텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)