개발자 도구란?
- 개발자도구는 브라우저에 제공하는 하나의 Tool이다.
- 개발 환경을 개선할 수 있고, 웹 사이트를 즉각적으로 수정하고 문제발생시 원인 파악하고 해결하기에도 좋다.
- 개발자 도구를 이용하면 HTML, CSS, JavaScript의 생산성을 극대화 할 수 있습니다.
개발자 도구에는 여러개의 패널 존재한다!
이 중에서 가장 자주 사용하게 될 패널들에 대해 알아보자!
1. Element Panel
CSS(스타일 속성), 웹 페이지의 구성(DOM)을 확인하고 수정할 수 있는 패널이다.
수정한 내용을 실시간으로 확인할 수 있기 때문에 프론트엔드 개발자에게는 필수적이다.
💡 Styles 부분의 순서가 의미하는 것은?
- 하나의 element에도 여러개의 css가 적용될 수 있다.
예를 들면, div tag에 스타일 속성을 주었는데 이 태그에 클래스나 아이디 값을 주었을 경우, 클래스나 아이디에 대한 css 속성을 추가할 수 있다. - 가장 상단부터 css부터 우선순위에 따라 순차적으로 나열(구체적 → 추상적)
위로 갈수록 가장 구체적인 내용이고, 아래로 갈수록 추상적이고 넓은 개념이다. inline-style>id>class>tag
💡 user agent stylesheet는 무엇인가?
- 브라우저의 기본 스타일 값을 의미한다. 브라우저마다 스타일 기본값이 다르다.
- 브라우저마다 기본 설정값이 다르기 때문에 reset.css 혹은 normalize.css 파일에서 기본적인 스타일을 모두 초기화 작업시키고 시작하는게 보통이다.
💡 box model
- margin, padding, border, content가 잡히는 영역을 보다 쉽게 확인할 수 있다. 레이아웃 영역이 잡히는 것을 보고 다양한 테스트를 해 볼수 있다.
2. Console Panel
자바스크립트 코드를 즉시 실행하고 디버깅할 수 있는 기능. console은 객체이므로 log 메서드를 포함한 다양한 메서드를 제공한다.
💡 화면 새로고침을 해도 console 내용이 지워지지 않고 남게 하는 방법은?
- 콘솔 창 우측 상단의 톱니바퀴모양 클릭시
preferences>Network>preserve log에 체킹
💡 콘솔에 기록된 로그를 모두 지울 때 사용하는 메소드는?
console.clear를 콘솔창에 입력 후 새로고침하면 이전까지 입력된 콘솔창의 내용이 모두 초기화됨
or 마우스 우클릭 시 clear console 클릭해도 동일한 효과
💡 콘솔에서 Warnings , Errors 내용을 제외하고 보는 방법은?
- 그림에서 보는것 같이 warnings, errors에 체크 해제하면 제외하고 볼 수 있다.
💡 다른 패널(ex. Elements panel)에서 Console Panel 같이 보는 방법은?
ESC를 누르면 하단에 콘솔창을 확인 할 수 있다.
3. Network panel
html, css, javascript 전부 노출된 오픈 소스들을 볼 수 있는 패널이다. 즉, 사이트 내 통신하고 있는 목록들을 전부 확인할 수 있다.
주요 기능으로 HTTP 네트워크 통신확인, API 크롤링, 페이지 성능 로딩 테스트, 이미지나 영상 소스 활용이 있다.
네트워크 패널은 네트워크 로그에 모든 활동을 기록한다.
네트워그 로그의 각 행 → 리소스
시간순으로 나열되며 최상위 소스는 일반적으로 html 문서이다.
-statys : http 응답 코드입니다.
-type : 리소스 유형(ex. png, stylesheet, document, script ...)
-initiator : 링크를 클릭하면 요청 한 소스 코드로 이동한다.
-time : 요청에 걸린 시간
-waterfall : 요청에 의한 단계를 그래픽으로 나타낸 것
💡 Network 패널의 여러 가지 탭의 종류와 기능 살펴보기
header에서 서버에 연결이 잘되었는지 여부를 확인할 수 있다.
400번대 : 프론트단에서 잘못 요청되면 발생하는 에러창
500번대 : 서버단 에러(back)
200 ok👌 : 에러없이 잘 수행되었다는 뜻
💡 Market Kurly(마켓컬리) 카테고리 정보 가져오는 API 찾아보기
💡 Tesla 홈페이지에서 신나게 달리는 자동차 동영상 url 가져오기
