[javascript30] 14 Must Know Dev Tools Tricks

19057 단어 javascript30javascript30

1. 14 Must Know Dev Tools Tricks

  • google 개발자 도구에서 사용할 수 있는 여러 유용한 도구 정리

2. 전체 코드

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

    //Elements > 요소 우클릭 > Break on > attribute modificatons
    // 해당 요소에 debugger 처리 

    // Regular
    // 일반적인 log 처리
    console.log('hello');

    // Interpolated
    // 두번째 인자가 %s 위치에 출력됨
    console.log('hello I am a %s string!', '@');

    // Styled
    // 두번째 인자에 명시한 css정보가 %c 로 지정된 문장에 반영됨 
    console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')

    // warning!
    // console 창에 warn 메세지 출력
    console.warn('oh nooo');

    // Error :|
    // console 창에 Error 메세지 출력
    console.error('fuck!');

    // Info
    // console 창에 info 메세지 출력
    console.info('ice americao in doran')

    // Testing
    // assert함수를 이용하여 console 창에서 테스트 가능
    // 첫 번째 인자의 true/false에 따라, 두번째 인자 문장 출력 
    console.assert(1 === 2, 'you are wring')
    const p = document.querySelector('p');
    console.assert(p.classList.contains('ouch'), 'that is wrong')

    // clearing
    // console 창 정리
    console.clear();

    // Viewing DOM Elements
    // 마크업 요소 입력 시 해당 요소 정보 / 돔 정보 출력
    console.log(p);
    console.dir(p);

    // Grouping together
    // 배열 내 정보를 묶어서 출력
    dogs.map(dog => {
      {
        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}`)
      }
    })
    
    // counting
    // 동일한 출력 값의 개수를 표기함
    console.count('wes');
    console.count('wes');
    console.count('wes');
    console.count('steve');
    console.count('wes');
    console.count('steve');
    console.count('wes');
    console.count('wes');
    console.count('wes');
    console.count('steve');
    console.count('wes');
    console.count('steve');
    
    // timing
    // time > timeEnd까지 수행하는데 걸리는 시간을 출력
    console.time('fetching data');
    fetch('https://api.github.com/users/wesbos')
    .then(data=>data.json())
    .then(data =>{
      console.timeEnd('fetching data');
      console.log(data);
    })


  </script>
</body>

</html>

3. 동작 순서

4. HTML, CSS

5. JAVASCRIPT

[Java] Operation (Short circuit evaluation)
데이터프레임 분석용 함수

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage