[javascript30] 14 Must Know Dev Tools Tricks



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