9. Dev Tools Domination ( JavaScript30 )

Dev/JavaScript30

9. Dev Tools Domination ( JavaScript30 )

takeU 2021. 7. 8. 20:32

Dev Tools Domination

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Console Tricks!</title>
</head>
<body>

  <p onClick="makeGreen()">×BREAK×DOWN×</p>

  <script>
    const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

    function makeGreen() {
      const p = document.querySelector('p');
      p.style.color = '#BADA55';
      p.style.fontSize = '50px';
    }
  </script>
</body>
</html>

목표

콘솔창에 각종 연산 및 효과를 넣는 방법들을 익힘

과정

Regular, Interpolated, Styled
Warining, Error, Info
Testing, clearing, Viewing DOM Elements
Grouping together, counting, timing

코드 분석

1. Regular, Interpolated, Styled

 // Regular
 console.log('hello');

기본 콘솔 출력

 // Interpolated 
 console.log('Hello I am a %s string!', '💩');

%s 자리에 ,뒤의 값이 들어감

 // Styled
 console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')

%c 뒤에 ,뒤의 스타일 값들이 적용됨

2. Warining, Error, Info

 // warning!
 console.warn('OH NOOO');

warn - 경고창이 노란색으로 표시

 // Error
 console.error('Shit!');

error - 에러창이 빨간색으로 표시

 // Info
 console.info('Crocodiles eat 3-4 people per year');

info - 파란 느낌표로 정보 표시

3. Testing, clearing, Viewing DOM Elements

 // Testing
 const p = document.querySelector('p');

 console.assert(p.classList.contains('ouch'), 'That is wrong!');

assert - 첫번째 인자가 false일 때 로그 메세지를 출력

 // clearing
 console.clear();

clear - 콘솔의 내용을 전부 지운다

 // Viewing DOM Elements
 console.log(p);
 console.dir(p);

 console.clear();

log - 괄호 안의 해당 엘리먼트를 보여줌
dir - 괄호 안의 해당 엘리먼트의 모든 속성을 보여줌

4. Grouping together, counting, timing

 // Grouping together
 dogs.forEach(dog => {
     console.groupCollapsed(`${dog.name}`);
     console.log(`This is ${dog.name}`);
     console.log(`${dog.name} is ${dog.age} years old`);
     console.log(`${dog.name} is ${dog.age * 7} dog years old`);
     console.groupEnd(`${dog.name}`);
 });

groupCollapsed와 groupEnd 사이에 새 그룹 로깅을 작성

 // counting
 console.count('Wes');
 console.count('Wes');
 console.count('Steve');
 console.count('Steve');
 console.count('Wes');
 console.count('Steve');
 console.count('Wes');
 console.count('Steve');
 console.count('Steve');
 console.count('Steve');
 console.count('Steve');
 console.count('Steve');

count는 같은 인자의 개수를 셈

 // timing
 console.time('fetching data');
 fetch('https://api.github.com/users/wesbos')
     .then(data => data.json())
     .then(data => {
         console.timeEnd('fetching data');
         console.log(data);
     });

 console.table(dogs);

time와 timeEnd 사이에 데이터를 받아와 타이머를 작동

찾아본 내용, 알게된 내용들

assert - 평가 된 식이 false면 콘솔에 오류 기록
dir - 저장된 객체의 자바스크립트 표현을 출력, HTML 요소일 경우 DOM 표현의 속성 출력
console.group(), console.groupEnd() - 선택적 제목을 사용하여 새로운 로깅 그룹을 시작, console.group() 후와 console.groupEnd() 전에 발생하는 모든 콘솔 출력은 시각적으로 그룹화된다.

저작자표시 비영리 변경금지

현재글9. Dev Tools Domination ( JavaScript30 )

takeU