Google 크롬 개발자 도구 활용하기
Google 크롬(Chrome) 브라우저의 개발자 도구를 활용해 웹사이트의 다양한 요소를 검사하고 테스트할 수 있습니다. 아임웹에서 개발자 도구는 페이지 로드 속도 체크, 코드 위젯을 사용하기 위한 Class, ID 찾기, 작업 완료 후 여러 종류의 모바일 기기에서 테스트할 때 사용될 수 있습니다.
개발자 도구 열기
Google 크롬 개발자 도구를 여는 방법을 설명합니다. 키보드 단축키(Windows: F12 / Mac: command + option + I)를 눌러 개발자 도구를 열 수도 있습니다.
- PC에서 Google 크롬 브라우저를 켭니다.
- 브라우저 오른쪽 상단에 위치한 더보기 ⋮ 아이콘을 클릭합니다.
- [도구 더보기 > 개발자 도구]를 클릭합니다.
요소 검사 도구 및 기기 도구 모음 활용하기
개발자 도구에 포함된 요소 검사 도구와 기기 도구 모음을 활용해 내 사이트를 검사하고 테스트해 보세요.
요소 검사 도구를 사용해 페이지 내 특정 영역의 요소를 선택하여 검사할 수 있습니다.
개발자 도구 왼쪽 상단의 화살표 아이콘을 클릭합니다.
마우스 포인터를 브라우저 왼쪽 페이지로 옮기면 아래 그림과 같이 특정 영역에 포함된 주요 요소들이 표시됩니다.
요소를 상세하게 검사하고 싶은 영역을 클릭합니다. 브라우저 오른쪽의 개발자 도구에 표시됩니다.
- (선택 사항) 코드를 편집하거나 그 외 다양한 검사가 가능해집니다. 예를 들어, 버튼에 마우스 포인터를 올리고 클릭했을 때, 해당 버튼에 어떤 CSS 속성들이 포함됐는지 표시됩니다. 사용자는 CSS 속성을 편집해 테스트해 볼 수 있습니다.
기기 도구 모음을 열어 페이지가 특정 기기에서 어떻게 보이는지 확인할 수 있으며, 위 요소 검사 도구를 함께 활용해 요소를 검사하고 테스트할 수 있습니다.
개발자 도구 왼쪽 상단의 기기(장치) 아이콘을 클릭합니다.
브라우저 왼쪽의 페이지가 미리 설정된 모바일 형식으로 표시됩니다.
기기를 변경해 다른 환경에서 테스트하거나, 화면을 가로로 돌릴 수도 있습니다.
참고: 원하는 기기가 없는 경우, Edit 를 클릭해 새로운 기기를 추가할 수도 있습니다.
- (선택 사항) 모바일 뷰포트에서도 요소를 검사하고 테스트가 가능합니다.