1. elements탭

주로 html을 미리보거나, css를 확인할때 사용합니다. elements에서 css를 직접 수정, 생성을 할 수 있으며 미리 결과를 확인할 수 있습니다.

css이나 style을 수정하기 전에 미리보기를 통해 실수를 줄일 수 있죠. 이건 쓰나 안쓰나.. 저는 주로 클론코딩이나 이쁜 css를 볼때 주로 사용합니다.

2. console탭

자바스크립트 소스의 console.log나 에러로그 등을 출력해주는 화면입니다. 개발을 하다 로그를 찍고싶다면 console.log()를 통해 변수 값을 확인하는 경우가 많은데요 아주 유용하게 사용이 가능합니다.

이따 말할 아주 재밌는 기능이 바로 이 console을 사용한답니다!

3. network탭

웹에서 발생하는 네트워크 정보들을 보여주는 화면입니다. 주로 프론트엔드의 경우 api 호출내용을 확인하고 싶을때 사용합니다.

저같은경우에는 주로 request가 제대로 갔는지, 호출이 여러번이루어지지 않는지, response를 확인하고싶을때 사용한답니다! 없어선 안될 중요한거죠..

4. application탭

프론트엔드의 꽃 Web Storage 와 쿠키를 확인할 수 있는 곳입니다. 여기서는 localStorage와 sessionStorage의 값을 확인하는 것은 물론, 추가, 수정, 삭제가 가능하답니다.. 와우..

이렇게 스토리지 값을 변경하면서 웹에서 발생하는 이슈들을 테스트 할 수 있습니다.

let count = 0;
let number = 0;

setInterval(() => {
  count += 1;
  console.log(count)
}, 1000);

setInterval(() => {
  number += 12;
  console.log(number)
}, 200);

let count = 0;
let number = 0;

setInterval(() => {
  count += 1;
}, 1000);

setInterval(() => {
  number += 12;
}, 200);