Developer Tools

 

Developer Tools이란?

웹 개발하는데 있어서 페이지 확인 및 즉각적인 수정을 할 수 있도록 해주는 개발 도구.

크롬, 파이어폭스, 등 여러 브라우저에 내장되어 있다.

https://developers.google.com/web/tools/chrome-devtools

 

1. Elements panel

정의

Elements panel : 렌더링된 페이지의 html과 html element의 CSS를 확인할 수 있는 panel

 

Elements panel의 style tab을 이용하여 element에 적용된 스타일을 검사할 수 있을 뿐만 아니라 수정도 가능

 

ctrl + shift + c : 특정엘리멘트 선택

 

Element tab > style부분의 순서가 의미하는 것

적용된 css 스타일들의 우선순위

element.style : html tag 내에서 style 속성으로 지정한 스타일 (우선순위 제일 높음)

inherited from ~ : 부모 요소로부터 상속 받은 스타일

 

user agent sheet

웹브라우저별 해당 태그의 스타일의 디폴트 속성값 ex) <h> 폰트크기

브라우저마다 다르기 때문에 reset CSS 적용

 

특정값을 가지는 프로퍼티 찾기

filter이용하여 검색

 

header에 있는 로고요소 복사해서 footer에 추가 하는 법

drag-and-drop, copy-and-paste

 

 

2. Console panel

정의

콘솔 : 명령어를 입력받아 실행하고 결과를 출력하는 과정을 반복함으로써 시스템을 조작가능하게 한다.

콘솔패널 : 브라우저 개발자도구에서 사용 가능한 콘솔 -> 웹 조작

 

콘솔패널기능

1. 로그 메세지 출력

• 코드가 올바룬 순서로 실행되고 있는지 확인하기 위해 로그메세지 사용
• 실행 도중 특정 순간의 변수가 가지는 값들을 확인하기 위해 로그메세지 사용.

2. 자바스크립트 실행

• 콘솔을 통해 페이지창을 접근하는 것이 가능하므로 콘솔에서 자바스크립트를 실행하여 페이지를 조작가능
• ex) 특정 html element의 텍스트 변경

 

콘솔은 새로고침하면 지워짐

console settings -> preserve log  : 새로고침해도 지워지지 않음

 

Console 객체

브라우저에대한 정보와 조작가능하게하는 매서드가 담긴 객체 window 안에 console 객체 존재

console객체 안에는 다시 여러 프로퍼티들이 존재

1. console.log(parameter) : 인자를 콘솔에 출력
2. console.error() : 인자를 콘솔에 에러메세지로 출력(빨간색배경)
3. console.warn() : 인자를 콘솔에 경고메세지로 출력(노란색 배경)
4. console.dir (객체) : 객체의 프로퍼티를 출력 -> 객체의 구조 복잡 : 프로퍼티에 또다른 객체, 함수가 프로퍼티일수 있으므로  객체의 구조를 출력

 

console.log의 중요성

백엔드에서 보내주는 response를 console.log로 확인하거나 실행도중 변수에 저장된 값을 확인하는등 console.log()를 통해 디버깅 작업 진행

 

콘솔에서 log level을 조절하여 콘솔에 출려되는 메세지를 필터링 가능

ex) console에서 warn메세지 출력 비활성화 : console panele의 log level 에서 warning check해제

error : 실행을 불가능하게 만드는 에러

warn : 실행은 되지만 이후에 실행도중에 에러가 발생가능한 부분

 

콘솔 패널은 프로그램 실행의 올바른 작동을 확인하기위해 항상 열어놔야함 

다른 패널에서 콘솔 패널 같이 보는 법 -> esc 키

 

3. Source panel

정의

웹페이지를 구성하는 디렉토리의 구조와 소스파일을 확인할수 있는 탭

 

Sources panel기능

• Application의 폴더 및 파일 구성 확인
• JS, CSS 편집 (새로고침시 저장되지 않은 원래상태로 다시 돌아옴)
• Debugging

난독화 

프론트엔드 개발자가 작성하 코드는 Source panel에서 모두 공개되기 때문에 변수명을 바꾸거나 읽기 어렵게 만듬으로써 보안 강화해야 한다

 

압축화

전체 코드에서 불필요한 줄바꿈, 공백, 주석등을 제거함으로써 코드의 길이를 줄이는 것

 

디버깅

에러발생시 문제가 무엇인지 파악하고 해결하는 작업.

어떤 부분에서 에러가 발생했는지 찾아내기위해 특정코드에서 실행을 중단하고 코드를 한 줄씩 실행함으로써 에러를 찾고 해결

 

4. Network panel

기능

프론트와 백엔드 사이의 네트워크 통신(호출및 응답, 파일송수신등)을 확인 가능

 

네트워크 데이터 타입(XHR, JS, CSS, Img, Media등)별로 구분해서 확인가능

• XHR (XMLHttpRequest) : 브라우저와 서버가 HTTP 통신 할 때 주고받는 request 와 reponse를 확인할 수 있는 객체형태의 API
• Img : 이미지파일
• Media : 동영상파일
• etc

API vs End Point

API

프론트엔드에서 사용할 수 있도록, 백엔드가 제공하는 기능을 제어할 수 있게 만든 인터페이스

ex) 기본 주소

 

End Point 

API를 사용할 수 있도록 서버에 접근하는 곳. 프론트와 백엔드의 상호작용이 일어나는 곳, URL

ex) 원래 정해진 기본 주소에서 구체적으로 특정 데이터를 받기 위해 마지막에 붙은 path 

 

5. Application panel

기능 

application가 로드한 자원들은 Storage(브라우저의 저장소. Key-Value 페어 형태)에 저장되는데 이를 확인할 수 있다

 

Local storage

지우지않으면 데이터가 삭제되지 않음 , 도메인별 데이터가 저장됨로 브라우저 탭이 달라도 공유가능

사용예시 : 지속적으로 필요한 데이터(ex. 자동 로그인 등),  UI 정보들

사용법

• localStorage.setItem("key", "value")
• localStorage.getItem("key")

Session storage

브라우저탭을 닫으면 데이터 삭제(임시저장), 브라우저 탭별 데이터 저장

사용예시 : 잠깐 동안 필요한 정보 - 예민한 유저 정보 (ex. 은행 사이트), specific한 유저 정보

사용법

• sessionStorage.setItem("key", "value")
• sessionStorage.getItem("key")

Cookie

만료기한이 있는 키-값 저장소(시간제한), http 통신시 cookie가 같이 전달되므로 용량이 작다

 

 

6. 그외

렌더링 성능을 확인하기 위해 performance panel과 memory panel을 사용가능