6. 개발자 도구

이번 포스팅에서는 개발자 도구에 대하여 얘기해보려고 합니다.

이전 텍스트 태그를 포스팅하면서 블록 레벨과 인라인 레벨을 확인하면서 진행하면 좋겠다고 했었는데요.

웹 브라우저에서 블록 레벨인지 인라인 레벨인지 즉시 확인할 수 있는 개발자 도구를 먼저 설명하는게 좋을 것 같아 다른 태그를 포스팅하기 전 순서에 두었습니다.

 

1. 개발자 도구 열기

개발자 도구는 웹 브라우저에 적용된 HTML, CSS, JavaScript를 확인하고 수정할 수 있는 기능을 지니고 있습니다.

개발자 도구에 대한 내용은 가장 보편적으로 많이 사용하는 크롬 브라우저 기준으로 설명하겠습니다.

개발자 도구를 사용하기 위해서는 키보드의 F12 버튼을 누르거나, 웹 브라우저 화면을 우클릭하고 검사를 클릭하면 됩니다.

검사를 클릭하면 웹 브라우저 우측에 개발자 도구가 열리게 됩니다.

 

2. 개발자 도구 기능

개발자 도구에는 여러가지 기능을 지원하고 있는데요.

기능 탭에 있는 내용들과 요소 선택자, 장치 변경, Dock side에 대하여 간략하게 알아보겠습니다.

 

[요소 선택자]

가장 좌측의 마우스 포인터 버튼을 클릭하게 되면 사용이 가능한데요.

버튼을 클릭하여 요소 선택자가 활성화된 상태로 웹 브라우저에서 확인하고 싶은 부분을 클릭하면 해당 부분의 HTML, CSS 코드를 확인할 수 있습니다.

 

 

[장치 변경]

장치 변경 버튼을 통해서 모바일 화면에서 웹 브라우저가 어떻게 나오는지 확인할 수 있습니다.

모바일 환경으로 전환된 후, Dimensions 버튼을 통하여 확인하고싶은 기기를 선택하거나 Responsive로 직접 너비와 높이를 조절하여 확인도 가능합니다.

우측의 화면 전환 버튼을 통해서 가로/세로모드 전환도 가능합니다.

 

 

[기능 탭]

• Elements : 웹 브라우저를 구성하고 있는 HTML과 CSS를 확인하고 변경할 수 있는 탭.
• Console : 웹 브라우저에서 발생하는 메시지를 확인할 수 있으며, Javascript 실행 확인 및 테스트가 가능한 탭.
• Sources : 웹 브라우저에 로드된 리소스들을 확인할 수 있는 탭.
• Performance : 웹 브라우저의 로딩 성능을 측정하는 탭.
• Network : 웹 브라우저를 표시하는데 필요한 리소스들의 네트워크 정보를 확인할 수 있는 탭.
• Memory : 웹 브라우저의 메모리 사용량을 확인할 수 있는 탭.
• Application : 웹 브라우저가 웹 애플리케이션으로 기능하기 위해 필요한 내용들을 확인할 수 있는 탭.
• Security : 웹 브라우저의 도메인을 검사하고 보안 접속 결과를 확인할 수 있는 탭.

 

[Dock Side]

개발자 도구의 우측 상단의 점 세개 버튼을 클릭하면 Dock Side 메뉴가 표시됩니다.

여기서 개발자 도구를 위치하고 싶은 곳으로 이동할 수 있으며, 따로 분리할 수도 있습니다.

 

3. 개발자 도구 활용

개발자 도구에서 가장 많이 사용하게될 기능에 대해서 어떻게 활용하면 좋을지 알아보겠습니다.

 

[요소 선택자]

요소 선택자 버튼을 선택하면 버튼이 파란색으로 변경되어 사용할 수 있는 상태가 되는데요.

요소 선택자가 활성화된 상태에서 웹 브라우저에서 확인하고 싶은 부분을 클릭하게되면 해당 부분의 HTML, CSS 코드를 확인할 수 있습니다.

 

 

[장치 변경]

 

 

 

[Elements]

Elements 탭에는 HTML 코드의 구조가 좌측 화면에 나오고, 적용된 CSS 스타일이 우측 화면에 나오는데요.

HTML 구조에 화살표가 노출된다면 하위 항목이 더 있다는 뜻이며, 화살표를 클릭하면 하위 메뉴가 노출됩니다.

CSS 화면에서는 어느 class/id 등에 스타일이 적용되어 있는지 확인이 가능하며, 해당 태그나 스타일이 적용된 class나 id에 공통으로 다른 스타일을 지정할 수 있습니다.

Computed 탭에서는 선택된 태그의 정보를 한눈에 확인할 수 있으며, 블록/인라인 레벨을 해당 탭에서 확인하시면 간편합니다.

또한, Rendered Fonts를 통하여 적용되어 랜더링 중인 폰트도 확인 가능합니다.

Elements 탭에서 HTML과 CSS를 손쉽게 추가/제거하며 즉시 웹 브라우저에 노출되는 화면을 확인할 수 있어, 수정 작업을 진행하는데 많이 사용하니 자주 활용해 보시는 것을 권해드립니다.

 

 

[Console]

Console 탭은 대부분 웹 브라우저 로딩 중에 발생한 오류를 확인하여 수정하는 데 많이 사용됩니다.

제공되는 로그들을 확인하여 어느 부분의 문제로 로딩에 오류가 발생하는지 확인하여, 수정 작업을 원활하게 하도록 도와줍니다.

또한, 하단에 직접 Javascript를 입력할 수 있도록 제공하고 있어, 즉시 코드를 입력하여 테스트를 진행할 수 있다는 장점이 있습니다.

작업한 내용이 제대로 로딩되지 않을 때 활용하시면 좋을 것 같습니다.

 

 

VS Code로 작업한 화면을 개발자 도구를 통하여 직접 수정도 해보고, 블록/인라인 레벨도 확인해가면서 진행하시면 학습에 더욱 도움이 될 것 같습니다.

 

오늘도 읽어주셔서 감사드리고, 좋은 하루 보내세요! :)