[JS30] Dev Tools Tricks

🔥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는 구글이나 모질라가 잘 설명해주고 있으니 여길 참고합시다 :>