항상 로컬에 띄워놓고 코드를 바꿔가면서 테스트 하다가 사수가 개발자도구를 활용해 디버깅도 하고, CSS 수정도 하고 테스트도 하는 그런 모습을 보게된 것 같다. 아직 개발자 도구를 자유롭게 사용하지는 못하지만 확실히 잘 사용하면 프론트엔드 개발을 할 때 시간을 엄청 단축할 수 있을 것 같다는 생각이 들었다. 그래서 개발자 도구를 활용할 수 있는 방법을 정리해보려고 한다.
1. 개발자 도구 오픈
기본적으로 우리는 개발자도구를 열 때 F12 단축키를 많이 사용한다. 단축키를 사용하거나 마우스 오른쪽 버튼을 클릭해 검사 항목을 누르면 개발자도구가 열린다.
| 윈도우 | 맥 | |
| 공통 | F12 | |
| 최근 탭 열기 | Ctrl + Shift + I | Cmd + Opt + I |
| 요소 탭 열기 | Ctrl + Shift + C | Cmd + Opt + C |
| 콘솔 탭 열기 | Ctrl + Shift + J | Cmd + Opt + J |
2. 개발자 도구 언어변경 및 요소 선택
크롬을 사용할 땐 개발자도구가 영어로 설정되어있었는데 엣지를 사용하면 한글로 되어있는 것을 볼 수 있었다. 언어변경이 가능하니 원하는 언어로 설정해서 사용할 수 있다. 개발자 도구를 열어 설정 아이콘을 클릭해서 변경할 수 있다. 또는 개발자도구의 명령어 입력창을 통해 설정할 수 있다.
명령어 입력창은 설정 아이콘 옆의 더보기 아이콘 클릭 후, Run command를 선택해주면 된다. 또는 Ctrl + Shift + P 단축키를 활용하여 바로 열 수 있다. 언어를 바꾸고 나서는 개발자도구를 다시 열어야 반영 된다.
3. 개발자 도구 눈금자 표시
요소 선택시 눈금자 표시를 활성화하고 싶다면 명령어 창에 눈금자를 검색해보면 된다. 한글 설정을 바뀌어있기 때문에 명령창을 열어 눈금자라고 검색해주었다. 눈금자를 설정하고 나면 요소를 선택했을 때 이렇게 눈금자가 표시된다. 눈금자 말고도 여러가지가 있으니 하나씩 적용해보고 내가 필요한 것을 찾으면 될 것 같다.
4. 개발자 도구 HTML, CSS 수정
개발자도구만으로도 간단하게 HTML과 CSS를 수정하여 반영해볼 수 있는데, 코드를 직접 수정하기 전에 테스트용으로 미리 해보고 나서 반영하면 조금 더 수월하게 수정할 수 있는 것 같다. 그냥 간단하게 개발자도구 요소를 선택해 메일이라는 글자를 안녕이라고 바꿔봤다. 그럼 실제로 웹 페이지의 메일이 안녕으로 바뀐 것을 확인할 수 있는데 새로고침을 하면 다시 되돌아오니 걱정할 필요 없다. CSS도 스타일 탭에서 자유롭게 변경해보면 된다.
5. 개발자 도구 CSS 색상 추출
웹페이지에서 사용된 색상을 추출하고 싶을 때는 CSS color 스포이드를 사용하면 되는데 아래와 같이 사용하면 된다. 색상의 네모박스를 클릭하면 아래와 같은 창이 뜨는데 거기서 스포이드를 선택하여 웹페이지에서 원하는 색상을 클릭하면 된다. 여기서 중요한 것은 프론트엔드라면 알아야할 웹 접근성에 대한 부분인데 웹페이지를 개발할 때, 텍스트 명도대비 4.5:1을 준수해야한다. 자세한 내용은 여기로
6. 개발자 도구 자바스크립트 비활성화
평소 CSS나 디버깅을 위해 개발자 도구를 조금씩은 사용하고 있었지만 자바스크립트를 비활성화 할 수 있다는 것은 처음 알았다. 내가 원하는 요소를 선택하려는데 자바스크립트 동작으로 인해 요소 선택이 제대로 이루어지지 않는 경우가 있어 자바스크립트를 비활성화한 후 선택할 수 있는 것이다. 예를 들면, 자동으로 넘어가는 캐러셀, 슬라이드와 같은 것들?
이것 역시 개발자도구의 명령어 입력창에서 설정할 수 있는데 단축키를 이용하거나 직접 들어가서 자바스크립트라고 검색해주자. 그러면 자동으로 움직이는 배너나 슬라이드가 멈추면서 개발자도구의 소스 탭에 느낌표 경고 아이콘이 표시된다.
7. 개발자 도구 전체화면 캡처
평소 화면 캡처를 많이 사용하지만 부분캡처가 대부분이라 부분캡처용으로 사용했는데 크롬 개발자도구를 사용하면 스크롤이 포함된 전체화면을 캡처할 수 있다고 한다. 개발자도구의 명령창에서 스크린샷을 검색한 후, 원본 크기의 스크린샷을 클릭한다. 그러면 자동으로 캡처된 이미지가 다운로드 된다.
8. 개발자 도구 디바이스 모드
웹페이지는 PC뿐만 아니라 모바일에서도 이용하기 때문에 반응형 작업을 할 때 유용하게 쓸 수 있는 도구이다. 현재 회사에서 진행하고 있는 프로젝트 역시 모바일 웹과 PC, 테블릿 웹 등을 대응하고 있는데, 각각의 디바이스에 맞게 활용할 수 있다. 개발자도구의 왼쪽 상단 디바이스 모드를 선택 후 2번째 부분에서 원하는 디바이스를 선택하여 그 디바이스에 맞는 화면을 볼 수 있게된다. 아무래도 이게 제일 많이 사용한 기능 중 하나인 것 같다.
9. 개발자 도구 콘솔 사용하기
디바이스 모드에 이어 콘솔도 정말 많이 활용하는 기능 중 하나인데, 처음 개발 공부를 시작했을 때 접했던 것 같다. 소스코드 실행 등을 확인하거나 디버깅 용도로 사용하는데 아래와 같이 사용해볼 수 있다.
또한 콘솔을 통해 현재 웹 사이트에 대한 정보도 받아올 수 있는데 확인할 수 있는 정보는 정말 다양하다.
10. 개발자 도구 스토리지 (로컬 스토리지, 세션 스토리지, 쿠키 등)
개발을 하면서 로컬 스토리지나 세션 스토리지 등의 스토리지를 많이 사용하는데 각각의 차이에 대해서는 웹 스토리지의 차이 게시물을 참고하면 된다. 큰 차이가 있다면 세션 스토리지는 브라우저를 닫으면 저장된 것이 날라가지만 로컬스토리지는 동일 브라우저로 접속하면 데이터가 영구적으로 보관된다는 것이다. 개발자 도구의 애플리케이션 탭에서 각각의 저장소를 확인해볼 수 있다.
11. 개발자 도구 네트워크 탭
지금 회사에 다니면서 네트워크 탭을 정말 많이 보고 활용하게 되는데 해당 탭을 참고하면 네트워크 활동을 모두 확인할 수 있다. 리소스를 받아오는 것은 물론이고 api 통신과 관련하여 응답과 상태 등까지 모두 확인할 수 있다. 서버로 데이터를 보내거나 받아올 때 request header, body, response header, body 등을 모두 확인할 수 있어 어디에서 에러가 나는지에 대해서 파악하는 용도로도 확인해볼 수 있다.
12. 개발자 도구 Light house와 Performance 성능 탭
light house도 부트캠프 실전 프로젝트를 하면서 성능 개선을 위해 사용해봤었다. 웹 페이지의 품질 개선을 위해 사용하는 자동화 도구라고 생각하면 되는데 페이지 품질 검사를 통해 부족한 부분이 무엇인지를 파악할 수 있다.
두번째로 Performance 성능 탭을 통해 웹페이지가 어떻게 렌더링 되며, 속도는 어떠한지, 어떤 코드가 실행되고 있는지 등을 제공하는데 이를 활용해 더 나은 사용자 경험을 제공할 수 있도록 도움을 준다.
13. 개발자 도구 소스 탭, 디버깅 하기
개발자 도구를 활용해 조금 더 쉽게 디버깅을 할 수 있는데 원하는 포인트를 걸어놓으면 해당 부분에서 동작이 멈추게 된다. 그래서 그 전까지 데이터가 잘 들어왔는지 제대로 실행되고 있는지 등을 확인할 수 있어 지금도 많이 사용하는 것 같다. 아래와 같이 소스 탭에서 중단점을 체크하면 코드가 실행되다가 해당 부분에서 멈춘다.
