나는 구글의 개발자 도구 정리 페이지와 Traversy Media의 유튜브 강의를 참고해서 개발자 도구에 대해 공부했다.
개발자도구에서 공부한 부분은 크게 여섯 부분이다.
- Elements
- Console
- Sources
- Network
- Appication
- Lighthouse (or Audit)
[Elements]
Elements 패널은 웹 페이지 구성과 구성 요소들의 스타일을 확인하는 곳이다.
확인하는 방법
-
직접 element 하나씩을 눌러서 확인할 수 있다.
-
cursor inspection 버튼을 누른 후 확인을 원하는 부분에 커서를 두면, 다양한 색을 통해 html 구역과 css 효과를 확인할 수 있다.
style 패널
styles 패널의 순서는 중요도가 높은 것부터 나온다.
- 중요도 순서:
!important > html에서 style을 직접지정한 속성 > #id > .class, :가상클래스 > 태그이름 > 상속된 속성
-
user agent stylesheet은 브라우저의 기본 스타일 값을 의미한다. 따라서, 의도한대로만 효과가 나오길 원한다면, reset.css 코드를 입력해주어야 한다.
(구글링하면 여러 코드가 나온다.) -
추가: DOM은 html과 같다고 볼 수 있다. (html과 js를 연결한 것이니)
[Console]
-
Console 패널을 통해 자바스크립트 코드를 브라우저에서 즉시 실행할 수 있다.
-
에러메세지를 확인할 수 있기 때문에, 디버깅에 대부분 사용된다.
-
console은 객체이기 때문에 여러 메소드를 사용할 수 있다.
-
콘솔 세팅창 혹은 devtool 전체 세팅 창을 누른 후 preserve log 를 체크하면, 화면을 새로고침 해도 console 내용이 지워지지 않고 남는다.
-
콘솔에 기록된 로그를 모두 지울 때 사용하는 메소드는 다음과 같다.
- console.clear(); 메소드, 혹은 ctrl+l 단축키, 혹은 클리어 버튼 클릭
- 다만, 값은 그대로 남아있기 때문에, 이전값 모두를 지우기 위해서는 새로고침을 해야한다.
- clear() 메소드는 preserve log와 충돌하기 때문에, preserve log가 체크되어 있을 때는 clear()가 작동하지 않는다.
- (시도하면 충돌한다는 에러메세지가 뜬다.)
-
console 세팅창의 default levels를 누른 후, warnings와 errors를 체크 해제하면 콘솔에 Warnings와 Errors가 더이상 뜨지 않는다.
-
esc 버튼을 누르거나, 더보기 버튼을 눌러서 show console drawer를 체크하면, 다른 패널(ex. Elements panel)에서 Console Panel을 함께 볼 수 있다.
-
또한, 백엔드에서 주는 response 정보를 console.log(response)를 통해 미리 확인할 수 있다.
[Source]
source 내에 snippet을 생성할 수 있다.
스니펫은 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 일컫는 프로그래밍 용어이다.
사용자가 루틴 편집 조작 중 반복 타이핑을 회피할 수 있게 도와준다.
개발자도구의 sources 에서 page > filesystem > + 클릭을 하면 폴더를 추가할 수 있다.
이 곳에 추가해서 수정을 하는 파일은, 자동으로 원래 폴더에도 똑같이 수정을 한다.
웹사이트를 보면서 하나하나의 수정요소를 눈으로 확인하며 개발을 할 수 있는 것이다.
이 개발자도구라는 것을 코딩 공부 초반에 알았다면 더 재밌었을 것 같다.
[Network]
-
Network 패널을 통해 네트워크 상으로 주고 받는 데이터를 확인할 수 있다.
-
Network 패널은 웹페이지의 통신 전체 내용을 보여주는 곳으로서 각종 URL 주소와 통신 상태, 폰트출처 등을 확인할 수 있다.
-
Img, Media 란에서 이미지나 동영상 URL을 확인해서 그 소스를 저장할 수 있다. (클론 프로젝트 할 때 중요함!!)
[Application]
-
Application 패널을 통해 브라우저의 저장소에 담긴 데이터를 확인할 수 있다.
-
저장소는 local storage, session storage, cookies로 나뉜다.
- local storage는 영구적으로 (일부러 삭제하지 않는 한) 저장되는 곳
- session storage는 브라우저 창이 닫힐 때까지 저장되는 곳 (refresh는 창이 닫히는 거라고 생각하지 않는다.)
- cookies는 만료기한까지 저장되는 곳(만료기간을 미리 지정한다.)
-
(IndexedDB and WebSQL are basically client side in brower data bases.)
-
localStorage
- localStorage를 clear 하고 싶으면, 1)localStorage.clear() 를 입력하거나, Application 상단의 클리어 버튼을 눌러준다.
- local storage, session storage, cookies 전체를 clear 하고 싶을 땐, Clear storage에서 Clear site data를 클릭한다.
개발자도구는 디버깅을 위해서 아주자주 쓰이기 때문에, 프론트 개발자는 거의 항상 개발자도구를 열어놓는다.
[chrome devtools의 추가 기능]
It is important to know how to use Developer Tools especially if you are a front-end developer.
Element 페이지에서 element 한 줄을 누르고,
Console에서 $_ 혹은 $0 하면, 그 element를 출력해준다.
$1은 $0전에 시도하던 값을 재출력해준다.
$는 jQeury와 값은 포맷으로 작동하기 때문에, vanilla js로 코드를 짤 때도 이용할 수 있다.
따라서 아래의 두 코드 내용은 동일하게 동작한다.
//console로 시도한 것임.
document.querySelector('h1').style.color='green'
"green"
$('h1').style.color='purple'
"purple"[번외: live server]
vsc에 live server를 설치했다.
설치하면서 팝업된 문구는 아래와 같다.
(설치할 때) server is started at port: 5500
source: live server (Extension)
이용하는 방법은 extension: live server에 잘 나와있으며 정리하자면 아래와 같다.
vsc 상에서 html file 우클릭 > “Open with Live Server” 클릭
그러면 Apache가 켜져 있지 않은 상태라도 ip주소(5500 포트)로 접근할 수 있으며, 코드를 수정하고 저장하면 바로 웹페이지가 리로드된다.
[번외: XML]
XMLHttpRequest 객체는 서버와 상호작용하기 위해 사용된다.
전체 페이지의 새로고침 없이 페이지 일부를 업데이트 할 수 있도록 해준다.
XMLHttpRequest 객체는 AJAX 프로그래밍(asychronous)에 주로 사용된다.
또한, XML 을 포함하여 모든 종류의 데이터를 받아오는 데 사용할 수 있다.
XML은 HTTP 이외의 프로토콜도 지원한다.
