JavaScript의 콘솔

지식에 굶주린 동료 개발자 여러분 안녕하세요.
console.log()는 웹 개발자의 삶에서 가장 친한 친구 중 하나이며 단순히 우리의 삶을 훨씬 더 쉽게 만듭니다. 그러나 console.log()보다 콘솔에 더 많은 것이 있다는 것을 알고 계셨습니까? 이번 포스팅에서는 자바스크립트 콘솔에 대해 알아보겠습니다.

소개

웹 콘솔은 네트워크 요청, JavaScript 보안 오류, 경고, CSS 등과 같은 웹 페이지와 관련된 정보를 기록하는 데 주로 사용되는 도구입니다. 그 페이지.

콘솔의 종류

console.log()

console.error()

console.warn()

console.clear()

console.time()

console.table()

console.count()

console.group()

1. 콘솔.로그()

주로 출력을 콘솔에 기록/인쇄하는 데 사용됩니다. 우리는 log() 내부에 어떤 유형이든 넣을 수 있습니다. 강력, 배열, 객체, 부울 등입니다.

//console.log() method
console.log('string')
console.log(800)
console.log(true)
console.log(null)
console.log(undefined)
console.log({a:1, b:2}) // object inside log()
console.log([1,2,3,4]) // array inside log()

2. 콘솔.오류()

이 방법은 오류 메시지를 콘솔에 기록하는 데 사용됩니다. 코드 테스트에 유용합니다. 기본적으로 오류 메시지는 빨간색으로 강조 표시됩니다.

// console.error() method
console.error('This is a sample Error')

3. 콘솔.경고()

경고 메시지를 콘솔에 기록하는 데 사용됩니다. 기본적으로 경고 메시지는 노란색으로 강조 표시됩니다.

// console.warn() method
console.warn('This is a sample Warning')

4. 콘솔.클리어()

콘솔을 지우는 데 사용됩니다. 이 콘솔은 지워집니다. Chromium 기반 브라우저의 경우 '콘솔이 지워졌습니다'라는 아래 스크린샷에 표시된 것과 같은 간단한 오버레이 텍스트가 인쇄되지만 Firefox에서는 메시지가 반환되지 않습니다.

// console.clear() method
console.clear()

5. console.time() 및 console.timeEnd()

코드 블록 또는 함수에서 소요된 시간을 알고 싶을 때마다 JavaScript 콘솔 개체에서 제공하는 time() 및 timeEnd() 메서드를 사용할 수 있습니다. 그것들은 mst가 동일한 레이블을 취하고 내부 코드는 무엇이든 될 수 있습니다(함수, 객체, 간단한 console.log()).

// console.time() and console.timeEnd() method
// console.time() method
console.time("Let's see time console")
let time1 = function(){
    console.log('time1 function is running')
}
let time2 = function(){
    console.log('time2 function is running')
}
time1()
time2()
// console.timeEnd() method
console.timeEnd('Time Taken')

6. 콘솔 테이블()

이 방법을 사용하면 콘솔 내부에 테이블을 생성할 수 있습니다. 입력은 테이블로 표시될 배열 또는 객체여야 합니다.

// console.table() method
console.table({a:1, b:2, c:3, d:4, e:5})

7. 콘솔.카운트()

이 방법을 사용하면 콘솔 내부에 테이블을 생성할 수 있습니다. 입력은 테이블로 표시될 배열 또는 객체여야 합니다.

// console.count() method
console.log('This is a sample count')
for(let i=0; i<10; i++){
    console.count('This is iteration number', i)
}

8. console.group() 및 console.groupEnd()

콘솔 개체의 group() 및 groupEnd() 메서드를 사용하면 내용을 들여쓰기되는 별도의 코드 블록으로 그룹화할 수 있습니다. time() 및 timeEnd()와 마찬가지로 동일한 값의 레이블도 허용합니다.

// console.group() and console.groupEnd() method
// console.group() method
console.group('This is a sample group')
console.log('This is a sample group log')
console.warn('This is a sample group warning')
console.error('This is a sample group error')
// console.groupEnd() method
console.groupEnd('This is a sample group')
console.log('This is a new section')

그게 다야 여러분 💗