[Javascript] 09. Dev Tools Domination

winCow 2021. 4. 20. 22:27

콘솔 창을 잘 활용하기 위한 팁이다.

1. HTML

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

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

</body>
</html>

2. Javascript

    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';
    }

3. console

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

    // Interpolated
    console.log("hello. I am a %s string!", "🐥");

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

console.log로 문자열을 출력할 수 있고, 변수 등도 %s를 통해 출력이 가능하다. 또한, console.log("%c string", "style") 형식으로 콘솔 창에 띄울 문자열에 스타일을 적용할 수도 있다. console.table을 통해 객체를 표로 나타낼 수 있다.

    // warning!
    console.warn('Oh Nooo!');

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

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

warn, error, info 메시지를 출력할 수 있다.

    // Testing
    console.assert(1 === 2, "That is worng!");
    // assert는 False일 때만 나옴
    const p = document.querySelector('p');
    console.assert(p.classList.contains('ouch'), 'That is worng! not true!');

assert를 이용하여 테스트를 진행할 수 있다. console.assert(Boolean, string) 형태로 사용하며, Boolean 값이 False일 때만 문자열이 출력된다.

    // clearing
    console.clear();

이전까지 콘솔 창에 출력된 내용을 지울 수 있다.

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

console.log(요소)를 이용 하면 요소 자체를 확인할 수 있다. console.dir(요소)를 이용하면 요소의 프로퍼티를 전부 확인할 수 있다.

    // Grouping together
    dogs.forEach(dog => {
      console.groupCollapsed(`${dog.name}`); // || console.group(`${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}`);
    })

console.group(string)과 console.groupEnd(string)을 이용하면 그 사이에 있는 객체를 그룹화해 준다. console.group(string) 대신 console.groupCollapsed(string)을 이용하면 그룹화된 객체를 접힌 상태로 보여주며, 이는 클릭하여 펼쳐볼 수 있다.

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

console.count(string)을 통해 해당 문자열을 카운팅할 수 있다.

    // 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.time(string)과 console.timeEnd(string)을 통해 걸리는 시간을 체크할 수 있다.