개발자 도구

김동하·2020년 10월 23일
0

1. element

개발자 도구란?

HTML, CSS JavaScript와 같은 언어들은 서버로부터 컴파일이 되어져서 실행이되는게 아니라 브라우저에서 실행이되는 언어들이다. 브라우저에서 런타임에 해석이되고 실행이 되어 진다. 따라서 브라우저가 해석을 잘하고 있는지 확인하기 위해 크롬 개발자도구와 같은 툴을 사용한다.

기능

HTTP 통신과정, HTML구조, CSS 스타일, JavaScript 디버깅, 프로파일링, 성능진단 등을 할 수 있다.

Elements 패널

페이지와 스타일 검사 및 편집

엘리먼트 탭에 html와 css가 보인다.

img url을 가져올 수 있다.

웹 사이트가 복잡하면 원하는 타겟을 찾기 힘든데 엘리먼트 탭에 저 부분을 누르고 원하는 곳을 보면 html의 위치가 나온다.

스타일링

css 섹션에서 직접 수정도 가능한데

빨간 부분에서 selector에 잡힌 요소들 말고 개별적으로 적용이 가능하다.

style 부분에서 순서

C는 캐스캐이딩의 약자로 '위에서 아래로 흐르는 스타일 시트'라는 뜻이며, 우선 순위가 정해져 있다. html에 적용되는 css도 우선 순위에 따라 결정된다.

!important > inline > #id > :hover > tag

이렇게 중요하다. 만약 개발자 도구에서 style에서 css 속성이 지워졌다면 그 속성은 우선 순위를 잃은 것이다.

elements에서 순서는 css 파일의 입력 순서가 아닌 브라우저가 읽는 순서다.

user agent stylesheet는 웹 브라우저 별로 해당 태그의 기본 속성을 말한다. 예를들어 h1태그는

h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

이런 기본 속성을 가지고 있다. 수정도 가능하지만 아무런 속성을 주지 않으면 브라우저는 기본적으로 태그가 가진 값을 부여한다.

2. Console

default level에서 에러 메시지를 어디까지 볼 것인가 조절이 가능하다.

3. Network

api를 가져올 수 있다. filter를 통해 media를 하면 동영상도 가능하다.

4. Application panel

Local Storage & Session Storage

Storage는 브라우저의 저장소다. Local Storage 사용자가 지우지 않는 이상 영구적으로 남아있는 데이터. 키 벨류로 저장된다. Session Storage는 탭을 닫을 경우 삭제된다. Cookie는 만료 기한이 정해져있는 데아터. 백엔드 통신과 관련이 있다.

예시

  • Local Storage

  • 지속적으로 필요한 데이터(data persistant)(ex. 자동 로그인 여부)

  • UI 정보들(ex. 에어비앤비, 스카이스캐너 인천공항 - 베네치아 검색하면 그대로 유지)

  • Session Storage

  • 잠깐 동안 필요한 정보

  • ex. 보안이 중요한 정보 (ex. 은행 사이트), specific한 유저 정보, 언어 선택

  • Cookie

  • 서비스 직접적이지 않은 데이터

  • 오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등.

출처 위코드 세션

출처: https://freezboi.tistory.com/66 [코딩 공작소]

https://velog.io/@misun9283/%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%8F%84%EA%B5%AC

https://ljtaek2.tistory.com/m/75

https://velog.io/@hyoniii_log/TIL-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%8F%84%EA%B5%AC

profile
프론트엔드 개발

0개의 댓글