우선, 이 플랫폼을 통해 개발 환경의 뼈대(개요)를 정리할 것임을 인정해야 합니다. 가끔 제가 하는 '마법'(어떤 사람들은 '코딩'이라고 부릅니다)이 동료들이 보여준 멋진 결과물만큼 완벽하지 않을 때가 있습니다. 네, 저는 가끔 우리가 '디버깅'이라고 부르는 옛날식 시행착오 방식을 사용합니다:)
지난 10년간 제가 열정을 쏟아온 것 중 하나는 프론트엔드 개발(특히 Javascrip{filtering}t)이었습니다. "장인"으로서 저는 시장에 나오는 새로운 도구를 배우는 것을 좋아합니다. 이 이야기에서는 "구형" 콘솔을 사용하는 방법에 대해 좀 더 전문적이고 훌륭하게 팁을 드리겠습니다.
네, 우리는 모두 그 기본 사용법을 알고 있습니다:
console.log('안녕 세상!'); 메시지나 객체를 콘솔에 기록하세요
console.info('무슨 일이 있었다...'); 콘솔 로그와 동일합니다
console.warn('이상한 일이 일어났다...'); 콘솔 로그와 같지만 경고가 표시됩니다
console.error('끔찍한 일이 일어났다...'); 콘솔 로그와 같지만 오류가 표시됩니다
그래서 이제 여러분이 몰랐던 팁들을 드릴 수 있길 바라며, 그 플레이 방법들이 여러분을 더 전문적인 디버거로 만들어 줄 수 있기를 바랍니다.
팁 #1 console.trace()
로그 정보를 얻을 힌트 위치를 얻고 싶다면, console.trace()를 사용해 로그 데이터를 담은 스택 트레이스를 얻을 수 있습니다.
팁 #2 console.time() && console.timeEnd()
더 심각한 성능 문제를 찾고 있다면, console.time()로 시간을 계산하고, console.timeEnd()로 출력하세요.
팁 #3 console.memory
성능 문제가 더 까다롭고 숨겨진 메모리 누수를 찾고 있다면, console.memory(함수가 아닌 속성)를 이용해 힙 크기 상태를 확인하는 것도 좋습니다.
팁 #4 console.profile('profileName') & console.profileEnd('profileName')
이것은 표준 접근법은 아니지만 널리 지지받고 있습니다. console.profile('profileName')과 console.profileEnd('profileName')를 사용해 브라우저 성능 도구를 시작하고 종료할 수 있습니다 - 코드에서 "performance profile"입니다. 이렇게 하면 원하는 것을 정확히 분석할 수 있고, 프로그램 실행 시간에 따라 마우스를 클릭하는 번거로움을 줄일 수 있습니다.
팁 #5 console.count("내가 세는 것들")
반복 함수나 코드의 경우, console.count('?') 코드가 몇 번 읽혔는지 세는 거죠.
팁 #6 console.assert(false, "로그나!")
네, 조건부 로깅은 로그를 if-else :)로 감싸지 않습니다
condition이 false일 때 console.assert(condition, msg)를 사용해 로그를 기록할 수 있습니다.
면책 조항: Node.js 이 글은 주장 오류를 제기할 수 있습니다!
팁 #7 console.group('group') & console.groupEnd('group')
이렇게 많은 기록을 작성한 후에는 정리하고 싶을 수도 있습니다. 작지만 유용한 도구로는 console.group()과 console.groupEnd()가 있습니다. 콘솔 그룹을 사용해 콘솔 로그를 함께 정리하며, 각 그룹이 계층 구조의 또 다른 단계를 만듭니다. groupEnd()를 호출해 한 레벨 줄여 이전 레벨로 돌아가게 합니다.
팁 #8 문자열 치환
로깅할 때는 병합 변수를 문자열로 대체할 수 있습니다. 이 참조들은 (%s = 문자열, %i = 정수, %o = 객체, %f = float)입니다.
팁 #9 console.clear()
이렇게 많은 로그를 작성한 후, 이제 콘솔을 정리할 시간입니다.
팁 #10 console.table()
제 생각에 이 작품은 진정한 '보석'입니다! console.table()을 사용하면 아주 아름다운 표를 출력할 수 있습니다!
|
게시됨 2018. 8. 7. 오후 1:29:40
|
|
|
|
