"# JavaScript 30" 강의 - 09. Dev Tools Domination

학습일자

2020.10.8

 

학습내용

1. 개발자 도구의 Element 탭에서, 대상 엘리먼트 우클릭  -> Break on 클릭 -> attribute modification 클릭하면, debugger 실행되면서 javascript에 의해 변형되는 속성 값이 수행 순서별로 보여짐.

 

2. interporlate

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

 

3. styled

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

 

4. warning, error, Info, Testing

 : console.warn('OH NOOO');

 : console.error('Shit!'); 

 : console.info('Crocodiles eat 3-4 people per year')

5. Testing

: const p = document.querySelector('p') 

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

 

6. clearing

: console.clear(); 

 

7. Viewing DOM Elements

 : console.log(p);

 : console.dir(p);

 

8. 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}`);

    });

 

9. 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');

 

10. 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);

알게된 점

- console 창에 나오는 텍스트나 표시 등도 자유롭게 제어 가능 -> 개발자를 위한 UI나 메세지 등을 커스터마이징 가능