개발자 도구

jongsunpark88·2020년 4월 24일
0

Web

목록 보기
1/1
post-thumbnail

elements 탭

작성된 HTML들과 styles(css)을 볼 수 있다.
styles탭을 보면 css가 적용되는 우선순위로 나누어져 있는 것을 알 수 있다.

* 여기서 우선순위는 선택자에 의한 우선순위나 상속관계에 의한 css적용순위 그리고 sheet들중의 우선순위에 의한 우선순위.

select an elements in the page to inspect it 버튼

원하는 부분이 어느 요소이고 html문서에서 어디에 있는지 바로 찾아주는 가장 많이 쓸 기본 버튼

console 탭

코드로 작성된 것은 브라우저를 통해 output된 결과를 보여주는 곳

sources 탭

해당 웹페이지가 작성된 HTML 및 여러 페이지들을 저장된 곳.
이곳에서 해당 페이지들의 소스들을 볼수 있다. 프론트는 웹브라우저에서 모든 코드가 표현되기에
비밀정보같은 것은 넣지 않는다.

* 코드난독화 : 그렇다고 모든 코드가 보기 쉽게 되어 있지가 않다.
특히 스크립트의 경우 난독화, 압축화하여 자신만의 프라이빗?하게 해노으니까..

코드 난독화는 오픈소스가 아닌 이상 아무나 남발할 수 없도록 한 것이 아닌가 싶다. 코드 난독화는 되어있지만 해당 기능을 사용하라고 api로 제공하는 것을 보면

network 탭

프론트와 백이 주고 받는 것을 나타낸다.

header에서는 method종류나 status상태 등의 정보를 가지고 있고 Preview에서는 백단에서 오는 정보는 형태를 보여준다.
ex)백단에서 오는 json형태의 정보들

application 탭

로컬스토리지, 세션스토리지, 쿠기저장소가 있다.

가장 큰 차이로

로컬스토리지는 한번 저장하면 지우기전까지 계속 가지고 있는 정보

세션스토리지는 한세션(한탭을 켰다 껏다)동안 유지하는 정보

쿠키는 지정한 시간동안 유지하는 정보로

구분할 수 있다.

* 매번 모든 정보를 서버와 주고 받고, 서버가 모두저장하기보다는 로컬에서 정보들을 저장하는 것이 효율적인 것이 있다. 사이트 방문 기록

performance & memory 탭

어떤 기능이 있고 그 기능에 걸리는 속도(시간)을 확인할 수 있다.

어떤 기능에서 문제가 있다면

로직이 문제여서 오래 걸리는 것인지, 서버에서 데이터가 넘어오지 않아 오래 걸리는 것인지 확인할 수 있을 것이다.

* 새로운 알고리즘을 짜거나 시간복잡도를 계산하는 정도가 아닌 이상 이 부분은 고급부분일 듯 하다...

0개의 댓글