console.log()....자바스크립트에서 콘솔을 사용하는 다른 유용한 방법이 있습니다.

업데이트: 일부 요청에 따라 콘솔 출력의 스타일을 지정할 수 있는 몇 가지 방법도 추가했습니다. Facebook's 콘솔을 확인하여 작동 중인 스타일을 확인하십시오.

JavaScript로 작업할 때 처음 접하는 디버깅 도구 중 하나는 콘솔입니다. 그러나 우리 대부분은 변수와 문자열을 기록하기 위해 console.log()를 사용하는 방법만 보여주지만 더 효과적으로 코드를 디버그하기 위해 사용할 수 있는 콘솔 개체에 대한 다른 많은 메서드가 있습니다.

console.assert()

첫 번째 인수가 false인 경우에만 콘솔에 메시지를 씁니다.
console.assert() 오류 메시지를 조건부로 인쇄하려는 경우에 유용할 수 있습니다.

let a = 3

let b = 4

let c = 5

function isOdd(num){
  console.assert((num % 2 === 0), "Number is odd")
}

isOdd(a) // output: Number is odd

isOdd(b) // output:

isOdd(c) // output: Number is odd

console.error()

콘솔에 오류 메시지를 작성합니다.
console.error() 코드 내에 코드 해독 오류가 있음을 나타내려는 경우 테스트 목적으로 매우 유용할 수 있습니다.

console.error('There was an error with your code')

console.warn()

콘솔에 경고 메시지를 출력합니다.
console.warn()는 코드에 깨지지 않는 오류가 있음을 나타내려는 경우 테스트 목적으로 유용합니다.

console.warn("Make sure to parse your numbers to integers")

console.group() & console.groupEnd()

콘솔에 메시지 그룹을 생성합니다. 그룹의 끝을 나타내려면 console.groupEnd()를 사용해야 합니다.
console.group()는 함께 보관하고 싶은 메시지 모음이 있을 때 유용할 수 있습니다. 필요한 경우 그룹에 레이블을 제공할 수도 있습니다.

// without label
console.log('Hello World!')
console.group()
console.log("I'm the first message")
console.log("I'm the second message")
console.log("I'm the third message")
console.groupEnd()

// with label
console.log('Hello World Pt.2!')
console.group('Group Label')
console.log("I'm a message")
console.log("I'm another message")
console.log("I'm also a message")
console.groupEnd()

console.table()

콘솔 보기에서 테이블을 인쇄합니다.
console.table()는 정리된 방식으로 데이터 세트를 쉽게 볼 수 있게 해주기 때문에 내가 가장 좋아하는 것 중 하나입니다.

이 메서드는 tableData 및 tableColumns 두 개의 매개변수도 사용합니다. tableData는 필수이며 배열 또는 객체여야 하며 tabkeColumns는 선택 사항이며 표시하려는 열의 이름을 포함하는 배열입니다.

// passing in an object
console.table({ firstname : "John", lastname : "Doe" })

// passing in an array
console.table(["Kobe", "Lebron", "Shaq"])

// passing in an array of objects
let city1 = { name: "Salt Lake City", state: "UT" }
let city2 = { name: "San Diego", state: "CA" }
let city3 = { name: "Houston", state: "TX" }

console.table([city1, city2, city3])

// specify we only want "name" column shown 
let city1 = { name: "Salt Lake City", state: "UT" }
let city2 = { name: "San Diego", state: "CA" }
let city3 = { name: "Houston", state: "TX" }

console.table([city1, city2, city3], ["name"])

console.time() 및 console.timeEnd()

console.time()는 콘솔 보기에서 타이머를 시작하고 console.timeEnd()는 타이머를 중지하고 콘솔 보기에 결과를 표시합니다.

이 두 가지는 코드를 실행하는 데 걸리는 시간을 확인하려는 경우 매우 유용할 수 있습니다. 선택적 레이블 매개변수를 전달할 수도 있습니다.

// without label
console.time()

for(let i=0; i<100000; i++){
// some code here
}

console.timeEnd()

// with label
console.time("Timer1: ")

for(let i=0; i<100000; i++){
// some code here
}

console.timeEnd("Timer1: ")

console.trace()

코드가 특정 지점에서 어떻게 끝났는지 보여주기 위해 스택 추적을 기록합니다.
console.trace()는 함수가 호출될 때 추적을 보고 싶을 때 매우 유용할 수 있습니다. 선택적 레이블 매개변수를 전달할 수도 있습니다.

function myHOF(){
  myCallback()
}

function myCallback(){
  console.trace()
}

myHOF()

형식 지정자(출력 스타일 지정)

콘솔을 사용하면 출력에 적용할 서식 유형을 지정할 수 있습니다. 모든 형식 지정자는 %로 시작하고 그 뒤에 문자가 옵니다.

사용할 수 있는 다양한 형식 지정자가 모두 포함된 표를 제공했지만 이 기사에서는 CSS 스타일을 추가하는 방법을 보여 드리겠습니다.


지정자
산출


%에스
값을 문자열로 형식화

%i 또는 %d
값을 정수로 형식화

%에프
값을 부동 소수점 형식으로 지정합니다.

%영형
값을 확장 가능한 DOM 요소로 형식화합니다.

%영형
확장 가능한 JS 개체로 값의 형식을 지정합니다.

%씨
출력 문자열에 CSS 스타일 규칙을 적용합니다.

console.log("%c Here is some really large, red text", "font-size: 58px; color: red;")

console.log("%c I'm Serif and Blue", "color: blue; font-family: serif; font-size: 32px")