[JavaScript30] ๐Ÿ“„09. Dev Tool Domination

์กฐ์ค€ํ˜•ยท2021๋…„ 7์›” 9์ผ
JavaScriptjavascript30
0

JavaScript30

๋ชฉ๋ก ๋ณด๊ธฐ
9/30

๐Ÿ“„ 09 14 Must Know Dev Tools Tricks

์ฝ˜์†”์ฐฝ์— ๊ฐ์ข… ์—ฐ์‚ฐ ๋ฐ ํšจ๊ณผ๋ฅผ ๋„ฃ๋Š” ๋ฐฉ๋ฒ•๋“ค

์ดˆ๊ธฐ์ฝ”๋“œ

<!DOCTYPE html>
<html lang="ko">
<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';
    }

    // Regular

    // Interpolated

    // Styled

    // warning!

    // Error :|

    // Info

    // Testing

    // clearing

    // Viewing DOM Elements

    // Grouping together

    // counting

    // timing

  </script>
</body>
</html>

๐ŸŒ ๊ณผ์ •

๐Ÿ‘‰ 1. Regular, Interpolated, Styled

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

// Interpolated
let value= '๐Ÿ’ฉ';
console.log('Hello I am a %s String!!', '๐Ÿ’ฉ');
console.log(`Hello I am a ${value}`);

// Styled
// %c ๋Š” style์„ ๋จน์ผ์ˆ˜ ์žˆ๋‹ค.
console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue');

  • %s๋กœ ๋ฌธ์ž์—ด์„ ๋„ฃ์„ ์ˆ˜ ์žˆ๋‹ค.
  • %c๋กœ ์Šคํƒ€์ผ์„ ์ ์šฉํ•ด์„œ ์ถœ๋ ฅํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ‘‰ 2. Warning, Error, Info

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

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

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

  • warn์€ ๋…ธ๋ž€์ƒ‰ ๊ฒฐ๊ณผ
  • error๋Š” ๋นจ๊ฐ„์ƒ‰.

๐Ÿ‘‰ 3. Testing, clearing, Viewing Dom Elements,ย Grouping together,

// Testing
// ํ‹€๋ฆฌ๋ฉด ์ถœ๋ ฅ๋˜๊ณ  ์•„๋‹ˆ๋ฉด ์ถœ๋ ฅ์•ˆ๋จ.
const p = document.querySelector('p');
console.assert(p.classList.contains('ouch'), 'That is wrong!');

// clearing
console.clear();

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

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

  • assert๋Š” ()์•ˆ์˜ ๋‚ด์šฉ์ด false๋ฉด, error์ฐฝ์œผ๋กœ ํ‘œ์‹œํ•œ๋‹ค.
  • clear์€ ์ฝ˜์†”์ฐฝ์„ ๊บ ๋—์ด ์ง€์›€.
  • dir์€ ํƒœ๊ทธ์ด๋ฆ„๋งŒ ๊ฐ€์ ธ์˜ด.
  • groupCollapse์™€ groupEnd์•ˆ์— ์ƒˆ๋กœ์šด ๋กœ๊น…์„ ์ž‘์„ฑํ•จ.

๐Ÿ‘‰ 4. counting, timing 

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

// 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);

profile
์กฐ์ค€ํ˜•
๊นƒํ—ˆ๋ธŒ : github.com/JuneHyung
์ด์ „ ํฌ์ŠคํŠธ

[JavaScript30] ๐Ÿ–Œ 08. FUN WITH HTML5 CANVAS

๋‹ค์Œ ํฌ์ŠคํŠธ

[JavaScript30] โ˜‘๏ธ 10. Hold Shift to Check Multiple Checkboxes

0๊ฐœ์˜ ๋Œ“๊ธ€