개발자 도구

개발자 도구

웹개발의 생산성을 극대화하기 위해 웹브라우저에서 제공하는 개발 도구다. 웹사이트 디버깅을 빠르게 하는데 도움을 주며 해당 복습내용은 크롬 브라우저의 개발자 도구를 사용하여 작성하였다. 개발자 도구는 키보드에 있는 [F12]를 누르거나, 크롬 주소창쪽에서 오른쪽끝에 있는 메뉴바를 선택하여 [도구 더보기] - [개발자 도구] 로 사용할 수 있다.

 

※ 디버깅 : 문제를 캐치하고 문제의 원인을 파악하여 수정하는 것.

 

 

 

Elements

: HTML과 CSS속성을 확인할 수 있는 창으로 HTML과 CSS를 손쉽게 수정할 수 있다. 하지만 테스트를 위주로 하기때문에 파일에 자동저장이 되진 않는다. 새로고침을 하면 기존상태로 돌아오기때문에 개발구축을 할때 종합적으로 사용하고 파일에 붙여넣기를 하는방식을 추천한다. 팀 과제중 Elmants 문제를 맡았었는데 해당 내용을 아래에 적어 정리하려한다.

 

1. Elements Tab > Styles 부분의 순서가 의미하는 것은?

HTML이 실행되었을때 가장 먼저 적용되는 순서대로 배치가 되어있다. 개발자가 기록한 CSS와는 순서가 다르며, 가장 상위태그인 html, ID, CLASS, TAG 순서대로 배치되어 있다.

 

2. user agent sheet(유저 에이전트 시트)란?

사용자 도구 스타일시트로, 브라우저는 기본적으로 디폴트 스타일시트가 존재한다. user agent sheet는 디폴트스타일시트를 의미한다.  웹브라우저마다 기본적으로 디폴트 시트가 다르다. Styles시트에서는 가장 아래에 위치해있으며, 글꼴을 이테릭체, 배경은 연회색으로 구성되어 있다. 해당부분은 수정이 불가하기때문에 필요에 따라 수정이 필요하다. 우선순위가 작성자시트보다 아래이기때문에 작성자가 쓴 시트로 덮어씌워진다. reset.css 로 전체 리셋 선언도 가능하다.

 

3. css 속성 중 100% 지정되어 있는 속성을 갖는 요소 찾기

style 탭의 상단에 위치한 filter에 검색을 하면 손쉽게 요소들을 찾을 수 있다.

 

4.header에 있는 로고 요소 복사해서 footer에 추가 해보기
여러가지 방법이 있는데 그 중 두가지를 소개하자면 html에 위치한 해당 코드를 마우스로 꾹 누르고 위아래 옮기는 방법, 코드를 선택한 후 ctrl+c / ctrl+v로 요소를 복사한 후 옮길 태그에 [오른쪽클릭] - [Edit as HTML]을 눌러 추가하는 방법이 있다.

 

 

Console

: JavaScript 개발을 위한 탭으로 JavaScript 의 코드를 바로 실행해볼 수 있다. 함수를 추가하거나 확인하는등의 작업을 할 수도있다. 변수의 값을 입력한 후 [enter]로 실행이 가능하다. [Shift + Enter]로 다음줄 이동도 가능하다. 

 

 

Sources

: JavaScript의 디버깅이 가능한 탭이다. 자바스크립트 실행 중 브레이크 포인트를 걸어 해당 순서의 실행값을 확인 할 수 있다. 브레이크포인트 설정방법은 [Elements] - HTML에서 브레이크걸 요소 선택 - [오른쪽 마우스] - [Break on] - [attribute modifications] 이다. 해당 부분이 실행되는지 Sources에서 확인 가능하다. Sources에선 Script확인이 가능한데 보안과 경량화를 위해 난독화, 압축화가 중요하다.

 

 

Network

: HTTP 통신상태를 한번에 확인할 수 있다. 브라우저와 서버간 통신과정 중에 문제가 있는지, 클라이언트 성능 개선 지점을 분석하고 찾는 등에 활용한다.

 

※ API, Endpoint?

API 주소 : 기본주소 / Endpoint : 기능 단위별 접점(원래 정해진 기본 주소에서 구체적으로 특정 데이터를 받기 위해 마지막에 붙은 path (/categories?ver=1))