편리한 콘솔.xxx

5349 단어 JavaScript
JavaScript에 콘솔이 있습니다.로그 () 이외에 다른 편리한 로그 출력도 있습니다.
최근에 알게 된 콘솔.xxx를 소개합니다.

console.log()


누구나 할 수 있는 콘솔.log().devtools 콘솔에 매개 변수의 출력 결과를 표시합니다.
console.log()

console.error(), console.warn(), console.info()


콘솔을 나타냅니다.로그랑 똑같아요.그러나 문자색과 배경색을 대체하여 돋보이게 할 수 있다.
(왜 info와 log는 차이가 없습니까?)
console.info()

console.warn()

console.error()

console.table()


배열과 객체 데이터를 테이블 형식으로 표시합니다.
console.log, 하나하나 펼치는 것보다 보기 쉬워요.
요즘 쓸모없는 콘솔.테이블 사용 중입니다.
console.log()
console.table()


console.dir()


출력 결과를 디렉터리로 표시할 수 있는 구성원입니다.Aray와 Object 등에서 콘솔.로그와 크게 달라진 것은 없지만 DOM 트리 등이 표시될 때는 다르다.
console.log()
console.dir()


console.time(), console.timeLog()


처리 시간을 측정하기 편리하다.
console.타이머를 시간(타이머 이름)으로 설정하고 를 클릭합니다.
console.타임로그 출력을 통해 타이머 이후의 경과 시간을 설정할 수 있습니다.
let timeDemo = () => {
    // タイマー"demo"のセット
    console.time("demo")
    setInterval(()=>{
      // 1000msごとに今のタイマー"demo"の経過時間を表示
      console.timeLog("demo")
    }, 1000)}
실행 결과
console.time(), console.timeLog()

console.trace()


console.trace () 를 호출하기 전의 경로를 출력할 수 있습니다.
이 함수는 어디에서 어떻게 호출되었는지 조사할 때 매우 편리하다.
function trace() {
    console.trace()
}

function c() {
    trace()
}

function b() {
    c()
}

function a() {
    b()
}
실행 결과
console.trace()

참고 자료

  • MDN
    https://developer.mozilla.org/ja/docs/Web/API/console/timeLog
  • JavaScript 코드 레시피 세트
    https://gihyo.jp/book/2019/978-4-297-10368-2
  • Qita와 블로그의 제목은 스스로 고려할 필요가 없다
    https://qiita.com/YumaInaura/items/0d8427bfe2d7be476d0d
  • 좋은 웹페이지 즐겨찾기