개발자 도구를 여는 방법은?
- 맥 기준 option + command + c
개발자 도구를 이용해서 웹사이트의 화면 크기를 바꾸는 방법은?
- 맥 기준 command + shift + m 을 누르면 모바일 기기의 viewport에서 현재 페이지가 어떻게 보이는 지 볼 수 있다
cf. viewport : 클라이언트가 보는 화면의 크기 - 너비/높이를 직접 지정하거나 제공되는 모바일 기기 종류를 선택하여 viewport의 크기를 바꿀 수 있다
breakpoint란?
- breakpoint 설정 시 코드를 실행하면 실행 도중 해당 지점에서 일시 멈추고 해당 시점의 모든 (변수의) 값들을 보여줌
- 그냥 breakpoint를 지정하기만 하면 된다는 점, 해당 시점의 모든 값을 보여준다는 점에서
console.log()에 비해 빠른 디버깅이 가능
breakpoint 설정 방법은?
- 개발자 도구 - Sources 탭 - 파일 선택 - breakpoint로 설정하고 싶은 줄의 숫자 클릭
- 크롬 개발자 도구 : 다양한 breakpoint 설정 옵션
☀️