• [JS30] Dev Tools Tricks

    2019. 2. 17.

    by. ๋‚˜๋‚˜ (nykim)



    ๐Ÿ”ฅJavascript 30 - Day 09๐Ÿ”ฅ

    Day 9์— ํ•ด๋‹นํ•˜๋Š” [14 Must Know Dev Tools Tricks]๋ฅผ ๋ฐฐ์›Œ๋ณผ ์ฐจ๋ก€์ž…๋‹ˆ๋‹ค.


    1. DOM Breakpoints

    ๊ฐœ๋ฐœ์ž ๋„๊ตฌ Elements ํƒญ์—์„œ, ํŠน์ • ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์„ ํƒํ•˜๊ณ  ์šฐํด๋ฆญ ํ›„ Break on...์„ ๋ˆŒ๋Ÿฌ ์ค‘๋‹จ์ ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    Attributes Modifications๋ฅผ ์„ ํƒํ•œ ์ƒํƒœ์—์„œ h1์„ ํด๋ฆญํ•˜๋ฉด, ์•„๋ž˜ ์ด๋ฏธ์ง€์ฒ˜๋Ÿผ ์ค‘๋‹จ์ ์ด ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ์žฌ์ƒ๋ฒ„ํŠผ์ฒ˜๋Ÿผ ์ƒ๊ธด ๊ฑธ ๋ˆ„๋ฅด๋ฉด ์ฐจ๋ก€๋กœ ์ค‘๋‹จ์ ์ด ๋‚˜ํƒ€๋‚˜์ฃ .

    • Subtree Modifications

      ์ž์‹ ์š”์†Œ๊ฐ€ ์ถ”๊ฐ€, ์‚ญ์ œ, ๋ณ€๊ฒฝ๋์„ ๊ฒฝ์šฐ break ํ•ฉ๋‹ˆ๋‹ค.

    • Attributes Modifications

      ์š”์†Œ์˜ ์†์„ฑ์ด ๋ฐ”๋€ ๊ฒฝ์šฐ break ํ•ฉ๋‹ˆ๋‹ค.

    • Node Removal

      ์š”์†Œ๊ฐ€ ์™„์ „ํžˆ ์‚ฌ๋ผ์ง„ ๊ฒฝ์šฐ break ํ•ฉ๋‹ˆ๋‹ค.


    2. ๋ฌธ์ž์—ด ์น˜ํ™˜ ๊ธฐ๋Šฅ(String substitutions)

    ์ฝ˜์†”์— ์ฐ์„ ๋•Œ ๋ฌธ์ž์—ด์„ ์น˜ํ™˜ํ•  ์ˆ˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์ด๋ ‡๊ฒŒ์š”.

    <button>๋ฒ„ํŠผ์ž…๋‹ˆ๋‹ค
    <script>
      const btn = document.querySelector("button");
      const buttonText = btn.textContent;
      let clickedTimes = 0;
    
      function clickBtn() {
        clickedTimes++;
        console.log("%s ๋ผ๊ณ  ์“ฐ์ธ ๋ฒ„ํŠผ์„ %d๋ฒˆ ๋ˆŒ๋ €๋‹ค.", buttonText, clickedTimes)
    
      }
      btn.addEventListener("click", clickBtn);
    </script>

    ์œ„ ์ฝ”๋“œ์—์„œ %s์™€ %d๊ฐ€ ํ•ด๋‹นํ•ฉ๋‹ˆ๋‹ค. ์Œ... ์•„๋‹ˆ๋ฉด ES6 ๋ฌธ๋ฒ•์œผ๋กœ ์จ๋„ ๋˜๊ณ ์š”.

    ...
    function clickBtn() {
      if (clickedTimes >= 5) {
        console.log(`${clickedTimes}๋ฒˆ์ด๋‚˜ ๋ˆ„๋ฅด๋‹ค๋‹ˆ.. ๋Œ€๋‹จํ•˜๋‹ค.`)
      }
    ...
    }

    3. console

    console.log(%c)

    ํ”ํ•œ ์ฝ˜์†”์€ ์‹ซ๋‹ค!!!! ํ•˜๋ฉด ์•„๋ž˜์ฒ˜๋Ÿผ ์ฝ˜์†”์„ ๋ก‘ํ๊ฒŒ ๊พธ๋ฉฐ๋“ˆ๋‘ ์ž‡๋‹ค๊ตฌ์š˜>_<
    ๋„ค... %c๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

    const me = "Anne";
    console.log(`Awesome, %c ${me}! `, "background-color:#bada55; color: #333; font-weight:bold; font-size:120%;");

    console.warn(), console.error(), console.info()

    ๋˜๋Š” ํ”ํ•ด๋น ์ง„(???) consoe.log ๋Œ€์‹  console.warn()์ด๋‚˜ console.error() ๋˜๋Š” console.info()๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

    console.warn("์šฐ๋ฆฌ๋“ค ๊ฐ€์šด๋ฐ ์ŠคํŒŒ์ด๊ฐ€ ์žˆ๋Š” ๊ฒƒ ๊ฐ™์•„...")
    console.error("์—๋Ÿฌ...๋ผ๊ณ ?!");

    ์ด๋Ÿฌ๋ฉด ๊ฐœ๋ฐœ ์ค‘์— ์—๋Ÿฌ๋‚˜ ๊ฒฝ๊ณ ๋ฅผ ์ข€ ๋” ๋ช…ํ™•ํ•˜๊ฒŒ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ๊ฒ ๋„ค์š”ใ…Žใ…Ž

    console.assert()

    ํ•œํŽธ, console.assert()๋ฅผ ์ด์šฉํ•ด ๊ฒฐ๊ณผ๊ฐ’์ด false์ผ ๋•Œ ์ฝ˜์†”์— ์ฐํžˆ๋„๋ก ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    function overTen(a, b) {
      console.assert(a + b > 10, `${a}+${b}๋ฅผ ํ–ˆ์ง€๋งŒ 10์„ ๋„˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.`)
    }
    
    overTen(3, 4);

    console.clear()

    ์ฝ˜์†”์ด ๋„ˆ๋ฌด ๋ณต์žกํ•ด์ ธ์„œ ์ฒญ์†Œํ•˜๊ณ  ์‹ถ์„ ๋• console.clear()๋ฅผ ํ•ด์ค๋‹ˆ๋‹ค.

    console.clear(); //์‚ฌ๋ผ์ ธ๋ผ ๋ฟ…!

    console.groupCollapsed(), console.groupEnd()

    ์ฝ˜์†”์„ ๊ทธ๋ฃนํ™” ์‹œ์ผœ์„œ ๋ฌถ์„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฃน ๋‚ด์˜ ์ฝ˜์†”์€ ์ˆจ๊ฒจ์ ธ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ค‘์š”ํ•˜์ง€๋Š” ์•Š์ง€๋งŒ ๋ฌถ์–ด์„œ ๋ณด์—ฌ์ค„ ํ•„์š”๊ฐ€ ์žˆ์„ ๋•Œ ์‚ฌ์šฉํ•˜๋ฉด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค.

    console.groupCollapsed('๋ญ”๊ฐ€... ๋จน๊ณ  ์‹ถ๋‹ค!');
    console.groupCollapsed('์น˜ํ‚จ ๋จน๊ณ  ์‹ถ๋‹ค');
    console.warn("ํ—ˆ๋‹ˆ๋ฒ„ํ„ฐ์น˜ํ‚จ");
    console.warn("๋งˆ๋Š˜๊ฐ„์žฅ์น˜ํ‚จ");
    console.groupEnd();
    console.groupCollapsed('์ˆœ๋Œ€ ๋จน๊ณ  ์‹ถ๋‹ค');
    console.warn("๋ฐฑ์•”์ˆœ๋Œ€");
    console.warn("๋ณ‘์ฒœ์ˆœ๋Œ€");
    console.groupEnd();
    ์น˜.ํ‚จ.์กฐ.์•„ (์ˆœ๋Œ€๋„...โ˜…)

    console.count()

    console.count()๋Š” ()๋‚ด์˜ ์ด๋ฆ„(๋ผ๋ฒจ)์ด ์–ผ๋งˆ๋‚˜ ํ˜ธ์ถœ๋๋Š”์ง€๋ฅผ ์•Œ๋ ค์ค๋‹ˆ๋‹ค.

    function sayHi(x) {
      for (var i = 0; i < x; i++) {
        console.count("Hi");
      }
    }
    
    sayHi(10);

    console.time()

    console.time()์€ ์ž‘์—…์ด ์–ผ๋งˆ๋‚˜ ๊ฑธ๋ฆฌ๋Š”์ง€ ์ธก์ •ํ•  ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๊ฐ™์€ ์ด๋ฆ„(๋ผ๋ฒจ)์œผ๋กœ console.timeEnd()๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ, ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ฐ€๋ฆฌ์ดˆ ๋‹จ์œ„๋กœ ๊ฒฝ๊ณผํ•œ ์‹œ๊ฐ„์„ ์ถœ๋ ฅํ•ฉ๋‹ˆ๋‹ค.

    console.time("1๋ถ€ํ„ฐ 100๊นŒ์ง€ ์ฝ˜์†”์— ์ฐ์ž")
    console.groupCollapsed('i๋Š”...');
    for (let i = 0; i < 100; i++) {
      console.log(i);
    }
    console.groupEnd();
    console.timeEnd("1๋ถ€ํ„ฐ 100๊นŒ์ง€ ์ฝ˜์†”์— ์ฐ์ž");
    console.time("API ๋ถˆ๋Ÿฌ์˜ค๊ธฐ");
    fetch("https://api.github.com/users/annykim")
      .then(blob => blob.json())
      .then(data => {
        console.table(data)
        console.timeEnd("API ๋ถˆ๋Ÿฌ์˜ค๊ธฐ");
      });

    console ๊ด€๋ จ API๋Š” ๊ตฌ๊ธ€์ด๋‚˜ ๋ชจ์งˆ๋ผ๊ฐ€ ์ž˜ ์„ค๋ช…ํ•ด์ฃผ๊ณ  ์žˆ์œผ๋‹ˆ ์—ฌ๊ธธ ์ฐธ๊ณ ํ•ฉ์‹œ๋‹ค :>


    ๋Œ“๊ธ€ 0