2. 크롬 개발자도구

프레임워크를 위한 JavaScript ES6 강좌

https://edu.goorm.io/lecture/19879/프레임워크를-위한-javascript-es6

 

1. Network

 

웹페이지에서 받아오는 정보(구성요소)들

 

2. Console

 

자바스크립트 문법 사용 가능.

 

콘솔 출력: console.log("Hi Web")

변수 생성: var num = 1;

 

Shift + Enter : 여러 줄에 걸쳐서 코드 작성 가능

 

3. Elements

 

웹페이지에 해당하는 코드를 확인

박스 / 색 으로 코드에 해당하는 부분 확인 가능

코드 요소를 바꾼 화면을 확인 가능

 

4. Sources

 

소스 디버깅 / 코드 트래킹 용도

1) Watch tab : 특정 코드를 넣어서 값 등을 실시간 확인 가능

2) Breakpoints tab : 코드 줄을 클릭하여 브레이크포인트를 건다. 브라우저가 해당 코드에서 멈춤.