1. 개발자 도구란?
개발자들이 쓰는 도구를 뜻합니다.
프론트앤드 개발을 하면서 프론트 앤드를 개발하는데 도움이 될만한 여러가지 기능들을 제공합니다.
개발자 도구는 각각의 브라우저가 기본적으로 제공하며 별도의 설치가 필요하지 않습니다..
프론트엔드 개발자의 경우 업무를 보는 하루 종일 웹페이지의 한쪽에 개발자도구를 띄워놓고
개발을 할 만큼 굉장히 필수적이고, 백엔드 개발자의 경우 데이터를 크롤링할 때 태그를 분석해야하므로 알아야합니다.
그렇다면 개발자 도구는 어떻게 실행할까요?
- 키보드의 F12
- 브라우저 창을 띄운다음 브라우저 창에서 마우스 오른쪽 클릭후 나오는 여러가지 항목에서 검사라는 항목을 클릭
- ctrl + shift + i
위 방법 말고도 여러가지 방법이 있습니다.
실행방법을 알았으니 개발자 도구에 대해서 자세하게 알아봅시다.
2. Element 패널
Element 패널은 html 코드를 분석하고 수정할 수 있는 도구 패널입니다.
Dom과 css를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트 할 수 있습니다.
※Dom 설명은 아래 더보기!
DOM(Document Object Model)은 프로그래밍 언어가 웹사이트의 내용(content), 구조(structure) 그리고
스타일을 조작할 수 있게 만들어주는 인터페이스입니다.
좀더 자세한건 아래 링크 참조
자바스크립트 개발자라면 알아야 할 33가지 개념 #13 자바스크립트에서, DOM 이해하기
들어가기 전에 이 포스팅은 https://www.digitalocean.com/community/tutorials/introduction-to-the-dom 에 있는 포스팅들을 번역한 것입니다. 오역이나 의역이 있을 수 있습니다. 지적해주시면 확인 후 바로 정정하
velog.io
Element 패널은 크게 4가지의 작업이 가능합니다. (각 링크는 Chrome DevTools 링크되어있습니다.)
2 - 1. 페이지 검사
위에서 말씀드렸다 시피 Element 패널은 HTML 및 CSS를 검사하고 실시간 편집할 수 있습니다.
어떤 수정을 할수 있는지 확인해봅시다.
1) DOM 노드 실시간 편집
DOM 노드를 실시간 편집하려면 선택한요소를 두 번 클릭한 뒤 변경하기만 하면 됩니다.
변경 후 Tab 또는 Enter를 누르시면 바로 적용이 됩니다.
새로고침 하면 초기화 됩니다.
여기서 빨리 찾는 팁을 하나 드리자면
내가 원하는 부분에의 구성을 찾기 위해서는 각 태그를 다 펼쳐서 찾아봐야하는 불편함이 있습니다.
간단한 페이지라면 이런 방법으로도 찾을 수 있겠지만 복잡한 페이지에서는 많은 시간이 소요되고 효율적이지 못합니다.
그래서 개발자 도구에는 내가 찾고싶은 부분을 바로 찾아주는 기능이 존재합니다.
개발자 도구에서 좌측 상단을 보면 다음과 같은 아이콘 표시를 찾을 수 있다.
Select Element인데 해당 기능을 클릭하고 찾고자 하는 부분에 마우스를 가져다대고 클릭만 하면 자동으로
그 부분의 영역을 보여주기 때문에 훨씬 간편히 내가 원하는 자료를 찾을 수 있습니다.
2) 스타일 실시간 편집
Styles 창에서 스타일 속성 이름과 값을 실시간으로 편집할 수 있습니다.
모든 스타일은 편집할 수 있습니다. 다만 회색으로 처리된 것만은 예외입니다.
이름이나 값을 편집하려면 원하는 항목을 클릭하고 변경한 다음 Tab 키 또는 Enter 키를 눌러 변경 내용을 저장합니다.
Style창에서 height를 수정해주니 naver로고가 사라졌습니다.
이런식으로 수정이 가능합니다.
3) 박스 모델 매개변수 검사 및 편집
현재 요소의 박스 모델 매개변수를 검사하고 편집하려면 Computed 창을 사용합니다.
값을 클릭하기만 하면 박스 모델의 모든 값을 편집할 수 있습니다.
직사각형 안에 top, bottom, left, right 값이 있고, 각각 현재 요소의 padding, border 및 margin 속성을 나타냅니다.
비 정적인 위치가 지정된 요소의 경우, position 사각형도 표시되며 이 안에 top, right, bottom 및 left 속성 값이 포함됩니다.
position: fixed 및 position: absolute 요소의 경우, 가운데 필드에 선택한 요소의 실제 offsetWidth × offsetHeight
픽셀 치수가 포함되어 있습니다. 모든 값은 두 번 클릭하면 수정할 수 있으며
방법은 Styles 창에 있는 속성 값을 수정하는 방법과 같습니다.