자바스크립트-30일-9

개발자 도구 및 콘솔 요령

demo

JavaScript-30의 Day-9에서 우리는 웹 개발에서 생산성을 높일 수 있는 편리한 콘솔 요령과 개발 도구를 많이 배웠습니다.

교훈:

- 사이트에서 특정 일이 발생하는 원인이 무엇인지 알고 싶다고 가정해 보겠습니다. 자바스크립트가 원인이라는 것을 알지만 정확히 어떤 줄이 원인인지는 확실하지 않습니다.

편리한 개발 도구가 있습니다.

콘솔 열기 -> 변경이 발생하는 DOM에서 요소 찾기 -> 마우스 오른쪽 버튼 클릭 -> 중단으로 이동 -> 속성 수정 선택

다음 번에 요소를 클릭하면 디버거 명령이 나타납니다. 이는 우리에게 중단점이며 특성을 유발하는 코드 줄에서 정확히 일시 중지됩니다.
(동일한 위치에서 중단점을 제거하십시오).

이제 몇 가지 편리한 콘솔 요령을 살펴보겠습니다.

정기적인

console.log("Hello");

이것은 단순히 콘솔에 출력되는 일반console.log()입니다.

보간

console.log("Hello I am a %s string", "💩");

그것은 우리가 두 번째로 전달한 모든 것을 첫 번째 메시지로 보간합니다.

스타일

console.log("%c I am some great text", "font-size:20px;background:red;");

%c로 텍스트 스타일을 지정하고 모든 font-css를 적용할 수 있습니다.

경고!

console.warn("OH NOOOO!");

콘솔에 경고를 표시하고 경고가 발생한 위치에 대한 스택 추적을 표시합니다.

오류:

console.error("Oh Shit!");

생성된 위치에 대한 스택 추적과 함께 콘솔에 오류 메시지가 표시됩니다.

정보

console.info("Crocodiles eat 3-4 people per year");

In firefox it displays with a small 'i' icon.

테스트

console.assert(1 === 2, "That is Wrong!");

Assert는 거짓인 경우에만 실행됩니다. 따라서 assert를 사용하여 무언가를 테스트할 수 있으며 거짓이면 오류가 발생합니다.

청산

console.clear();

콘솔의 모든 항목을 지웁니다.

DOM 요소 보기

const p = document.querySelector("p");
console.log(p);

console.log(p) 실제 요소 사용이 표시됩니다.

console.dir(p);

그러나 console.dir(p)를 사용하면 해당 요소와 연결된 모든 속성과 메서드가 표시됩니다.

함께 그룹화

const dogs = [
  { name: "Snickers", age: 2 },
  { name: "hugo", age: 8 },
];

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

정상적인 출력은 다음과 같습니다.

이제 그룹화 사용

dogs.forEach((dog) => {
  //console.group(`${dog.name}`);
  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}`);
});

We can either use console.group() or console.groupCollapsed(), the collapsed displays output where the output groups are collapsed by default.

계산

console.count("Harsh");
console.count("Harsh");
console.count("Harsh");
console.count("Harsh");
console.count("Harsh");

특정 단어, 숫자, 객체 또는 DOM 노드 등을 사용한 횟수를 계산합니다.

타이밍

console.time("fetching data");
fetch("https://api.github.com/users/cenacrharsh")
  .then((data) => data.json())
  .then((data) => {
    console.timeEnd("fetching data");
    console.log(data);
  });