안녕하세요. 이번 포스팅에서는 WEB 개발자라면 대부분 접하실 웹 브라우저 크롬의 개발자 도구에 대해 파헤쳐 보고자합니다.
크롬[Chrome]
구글 크롬(Google Chrome) 혹은 크롬(Chrome)이라 불리는 웹 브라우저는 구글에서 개발하고 서비스 중인 프리웨어 웹 브라우저입니다. 예전에 Internet explorer가 웹 브라우저를 이끌었다면 이제는 크롬의 시대라고 해도 과언이 아닙니다.
위 자료는 "statCounter"라는 웹 트래픽 분석 웹사이트에서 2021.03~2022.03까지 웹 브라우저 점유율을 차트로 표시한 결과입니다. 보시면 알겠지만, 크롬은 전 세계에서 64.37%를 육박할 정도로 엄청난 점유율을 보여주고 있습니다. 그 비결은 무엇일까요? 사용하고 있는 입장에서 말씀드리면 아무래도 첫번째는 속도일 것입니다. 다른 웹 브라우저보다 가벼우면서도 훨씬 빠른 속도를 지원하고 있다는 것이 가장 큰 특징이죠. 두번째는 확장 프로그램일 것입니다. 기본적으로 제공하는 웹 브라우저에 다른 개발자들이 만든 확장 프로그램을 추가할 수 있어 사용자로 하여금 다양한 기능을 입맛에 따라 손쉽게 추가할 수 있습니다. 세번째는 오늘 소개해 드릴 개발자도구일 것입니다. 웹 개발자라면 대부분이 HTML, CSS, JavaScript 이 세가지 언어를 기본 베이스로 사용하실 텐데 이를 브라우저 상에서 DOM 트리 구조를 보거나 CSS 요소를 찾거나 JavaScript를 직접 테스트해보는 등 다양한 작업을 할 수 있어 큰 장점이라고 생각합니다.
크롬 개발자 도구[Chrome Development Tool]
크롬을 이용하는 웹 개발자라면 알아두면 좋을 기능을 여기서 소개해보고자 합니다. 이 기능을 사용하려면 개발자 도구를 열어야겠지요? 방법은 크게 3가지입니다.
개발자 도구 여는법
첫번째, 개발자 도구 단축키 1: F12
두번째, 개발자 도구 단축키 2: Ctrl + Shift + I
세번째, 개발자 도구 클릭: 크롬 우측 상단 / 도구 더보기 / 개발자 도구
간혹 사이트별로 JavaScript를 이용해 단축키를 막아놓는 경우가 있습니다. 이 경우에는 위와 같이 세번째 방법을 통해 개발자 도구를 여시면 됩니다!
유용한 개발자 도구 기능
1. 원하는 HTML 태그의 CSS 속성 보기
사이트를 분석하다보면 본인이 원하는 위치의 HTML 태그가 어떠한 CSS가 적용되었는가를 보고 싶을 때가 있을 겁니다. 그런데, 그 때마다 개발자 도구에 나와있는 태그를 일일이 읽어가며 해당 위치는 찾는다는 것은 매우 비효율적일 것입니다. 이 때 사용하기 딱 좋은 기능입니다.
개발자도구 좌측 상단에 보시면 마우스 포인터 아이콘이 있을 텐데요. 이 아이가 바로 검사할 페이지 요소 선택 기능을 제공합니다. 이 아이콘을 클릭하면 해당 기능이 활성화 되고, 이 상태에서 아래와 같이 본인이 원하는 HTML 태그에 마우스를 가져가 클릭하시면 해당 HTML 태그의 CSS 속성이 바로 개발자 도구 창에 나오는 것을 보실 수 있습니다.
2. 실시간 CSS 수정이 가능한 element styles
VS code에 Live server를 사용 중이시라면 코드를 수정할 때마다 자동으로 바뀌는 크롬 페이지를 보실 수 있을 겁니다. 하지만, 다른 사람이 만든 사이트에서 CSS를 고쳐보고 싶을때나 어떤 CSS를 통해 사이트가 만들어진걸까? 사이트를 파헤쳐보며 공부하실 때도 있지요. 이 때 사용하기 딱 좋은 기능입니다.
이와 같이 개발자 도구와 요소/스타일이 나올텐데 여기서 하단 CSS 속성에 표시된 체크 표시를 클릭해주면 해당 속성을 토글(껐다/켰다)할 수 있습니다. 또한, 속성 옆에 값도 더블 클릭해주시면 해당 값도 변경이 가능합니다. 단, 여기서 변경한 속성은 해당 웹 페이지를 새로고침할 때 모두 초기화되니 이점 명심하시길 바랍니다.
3. 개발자 도구 위치 변경
더블 모니터를 사용하시거나 27인치, 32인치이상의 모니터를 사용하신다면 굳이 사용하실 일이 없는 기능입니다. 하지만, 저처럼 노트북을 자주 이용하시는 분들이라면 화면이 작아서 개발자 도구 내용을 제대로 볼 수 없는 경우도 있습니다. 이 때 사용하기 딱 좋은 기능입니다.
개발자 도구 상단에 보시면 톱니바퀴 옆에 점 3개가 보이실텐데요. 이것을 클릭해주면 위와 같이 도크 축이라는 항목을 보실 수 있습니다. 이것이 바로 개발자 도구 창의 위치를 (1) 개별창, (2) 왼쪽 (3) 아래쪽 (4) 오른쪽에 나타낼 것인지 선택할 수 있는 도구입니다. 본인의 상황에 맞춰 설정을 변경해주시면 보다 쉽게 개발자 도구를 활용하실 수 있습니다. 저의 경우 주로 상단에는 웹 페이지, 하단에는 개발자 도구를 켜 놓고 쓰는 것을 선호하는 편입니다.
4. 데스크탑, 모바일 기기 화면 크기별 보기
옛날은 몰라도 지금은 정말 많은 수의 모바일 기기가 출시되면서 그 크기도 천차만별, 정말 다양해졌습니다. 그래서 웹 개발자라면 반응형 디자인에 신경을 더 쓰게 되고, 듣기론 최신폰이 출시되면 가장 먼저 폰을 사는 사람이 웹 개발자라는 소리도 있더군요.(최적화를 위해서)
이렇게나 많은 모바일 기기를 다 사서 일일이 최적화하기란 정말 어렵고 번거로운 일입니다. 그래서 크롬 개발자 도구에서는 이러한 고충을 조금이나마 덜어주고자 모바일 크기별로 브라우저의 크기를 늘리거나 줄여서 확인해 볼 수 있는 기능을 제공하고 있습니다.
요소 옆에 보시면 모바일 기기처럼 생긴 아이콘이 보이실텐데요. 이 아이가 바로 기기 툴바 전환으로써 누르면 아래와 같이 모바일 기기 사이즈별로 화면을 조정할 수 있게 변합니다. 상단에 바를 클릭하거나 사이즈를 직접 입력해서 조정도 가능하구요.
아래와 같이 크기: 반응형 ▼(화살표)를 클릭하면 테스트를 원하는 모바일 기기 크기로 바로 변경도 가능합니다.
5. Console 탭을 이용해 JavaScript 코드 테스트하기
JavaScript는 웹 페이지를 동적으로 변경할 수 있는 코드로써 이것을 확인하려면 웹 브라우저 상에서 확인을 해보아야 할텐데요. 이것은 위에서 주로 다루었던 요소(element) 탭이 아닌 콘솔(console) 탭에서 확인할 수 있습니다. JavaScript를 배우시다보면 console.log()라는 아이를 배우실텐데요. 바로 이 아이도 이 콘솔 탭에 결과값을 출력하는 것이라 보시면 됩니다. 콘솔 탭은 단순히 결과값 출력 뿐만 아니라, 아래와 같이 JavaScript가 제대로 동작하는지? 또는 간단한 JavaScript 코드를 테스트 해볼 수 있습니다.
한 가지 팁: 콘솔창에 코드를 깔끔히 비우고 싶다면? CTRL+L
그럼 오늘도 즐거운 코딩!
| 참고사이트
2. https://opentutorials.org/course/580
3. https://brunch.co.kr/@second-space/7
'코딩 | 개념 정리 > WEB' 카테고리의 다른 글
| WEB 경로 표기법은? (0) | 2022.04.27 |
|---|---|
| Javascript란 무엇인가? (0) | 2022.04.10 |
| HTML와 CSS란 무엇인가? (0) | 2022.04.03 |
| 프론트엔드(FrontEnd)와 백엔드(BackEnd)란 무엇인가? (0) | 2022.03.27 |
