[JS] 🗓️JavaScript 30

📖Day 9 - 14 Must Know Dev Tools Tricks

JavaScript 30의 Day 9 프로젝트는 개발자 도구의 다양한 기능들을 알아보는 프로젝트이다.

🤓📄코드 모아보기

HTML

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Console Tricks!</title>
  </head>
  <body>
    <p onClick="makeGreen()">×BREAK×DOWN×</p>
 
    <script src="main.js"></script>
  </body>
</html>

JavaScript

 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
 
console.log("Hello");
 
// Interpolated
 
console.log("Hello I am a %s string!", "😀");
// console.log(`Hello I am a ${...}`);
 
// Styled
 
console.log(
  "%c I am some great text",
  "font-size: 50px; background: tomato; text-shadow: 10px 10px 0 blue"
);
 
// warning!
 
console.log("Oh NOOO");
 
// Error :|
 
console.error("Shit!");
 
// Info
 
console.info("Crocodiles eat 3-4 people per year");
 
// Testing
 
const p = document.querySelector("p");
console.assert(p.classList.contains("ouch"), "This is wrong");
 
// clearing
 
// console.clear();
 
// Viewing DOM Elements
 
console.log(p);
console.dir(p);
 
// Grouping together
 
dogs.forEach((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.`);
  console.groupEnd(`${dog.name}`);
});
 
// counting
 
console.count("Wes");
console.count("Wes");
console.count("Steve");
console.count("Steve");
console.count("Wes");
console.count("Steve");
console.count("Wes");
console.count("Wes");
console.count("Steve");
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("fethcing data");
    console.log(data);
  });
 
console.table(dogs);

🔎코드 설명

`console.log()`

log()메서드는 console 오브젝트에서 가장 자주 쓰는 메서드로 ()안에 메시지를 출력해준다.

`console.warn()`

warn()메서드는 콘솔에 경고 메시지를 출력해준다.

`console.error()`

error()메서드는 콘솔에 에러 메시지를 출력해준다.

`console.info()`

info()메서드는 콘솔에 정보 메시지를 출력해준다.

`console.assert()`

assert()메서드는 주어진 가정이 거짓인 경우에 콘솔에 오류 메시지를 출력한다. 참인 경우에는 아무것도 하지 않는다.

`console.clear()`

clear()메서드는 콘솔에 기록된 메시지를 모두 지워준다.

`console.dir()`

dir()메서드는 콘솔에 주어진 객체의 속성 목록을 출력해준다. log()와 다른 점은 log()는 HTML 형태로 트리 구조(태그 내용)를 출력하고, dir()은 JSON 형태로 트리 구조(객체의 속성)를 출력한다.

`console.count()`

count()메서드는 ()안의 인자가 같은 것의 호출 횟수를 출력해준다.

`console.group(), console.groupEnd()`

group()메서드는 콘솔에 새로운 인라인 그룹을 만들어준다. console.groupEnd()가 호출될 때까지 추가 레벨로 다음 콘솔 메시지를 들여 쓴다.

`console.time(), console.timeEnd()`

time()메서드는 작업이 얼마나 걸리는지 추적할 수 있다. 각 타이머에게 고유한 이름을 줄 수 있고, console.timeEnd()가 호출될 때까지의 시간을 출력한다.

`console.table()`

table()메서드는 데이터를 표의 형태로 콘솔에 출력해준다.

🚀TIL(Today I Learned)

개발자 도구, 특히 console의 다양한 메서드들을 알아볼 수 있었다. 특히 dir()과 log() 메서드의 차이를 정확하게 알 수 있었다.
log(), warn(), error(), info(), assert(), clear(), dir(), count(), group() <-> groupEnd(), time() <-> timeEnd(), table()

JavaScript 30 프로젝트 결과물

저작자표시

'Language > JavaScript' 카테고리의 다른 글

[JS] 🗓️JavaScript 30 - Day 11 (0)	2021.11.28
[JS] 🗓️JavaScript 30 - Day 10 (0)	2021.11.26
[JS] 🗓️JavaScript 30 - Day 8 (0)	2021.11.22
[JS] 🗓️JavaScript 30 - Day 7 (0)	2021.11.21
[JS] 🗓️JavaScript 30 - Day 6 (0)	2021.11.19

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[JS] 🗓️JavaScript 30 - Day 9

📖Day 9 - 14 Must Know Dev Tools Tricks

🤓📄코드 모아보기

🔎코드 설명

`console.log()`

`console.warn()`

`console.error()`

`console.info()`

`console.assert()`

`console.clear()`

`console.dir()`

`console.count()`

`console.group(), console.groupEnd()`

`console.time(), console.timeEnd()`

`console.table()`

🚀TIL(Today I Learned)

'Language > JavaScript' 카테고리의 다른 글

댓글

이 글 공유하기

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

📖Day 9 - 14 Must Know Dev Tools Tricks

🤓📄코드 모아보기

🔎코드 설명

console.log()

console.warn()

console.error()

console.info()

console.assert()

console.clear()

console.dir()

console.count()

console.group(), console.groupEnd()

console.time(), console.timeEnd()

console.table()

🚀TIL(Today I Learned)

'Language > JavaScript' 카테고리의 다른 글

댓글

이 글 공유하기

다른 글

[JS] 🗓️JavaScript 30 - Day 11

[JS] 🗓️JavaScript 30 - Day 10

[JS] 🗓️JavaScript 30 - Day 8

[JS] 🗓️JavaScript 30 - Day 7

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

`console.log()`

`console.warn()`

`console.error()`

`console.info()`

`console.assert()`

`console.clear()`

`console.dir()`

`console.count()`

`console.group(), console.groupEnd()`

`console.time(), console.timeEnd()`

`console.table()`