크롬 개발자 도구 활용하기 - 단말기별 테스트, CSS

 블로그의 스킨을 설정하고 자기 취향에 맞게 수정하는 경우 종종 있을텐데요. 크롬 브라우저의 개발자도구 메뉴에서 이런 직업에 활용해 볼 수 있는 기능이 있어 소개하고자 합니다.

 

1. 다양한 단말기 스크린 크기 확인

 

 내가 설정해 놓은 스킨이 어떻게 보여지는지, 다양한 단말기에서 의도한 대로 잘 보여지는지 확인할 수 있습니다. (1) 먼저 크롬 브라우저를 실행하여 개발자도구(F12) 메뉴를 실행합니다. 오른쪽 상단 메뉴 > 도구 더보기 > 개발자도구 로 진입해서 클릭해도 됩니다.

 

크롬 브라우저 개발자도구 메뉴

 

(2) 좌측에 나타나는 개발자 도구 메뉴에서 상단에 있는 Toggle Device Toolbar 아이콘을 클릭합니다. 

Toggle Device Toolbar 아이콘 클릭

 

(3) 그러면 상단에 Dimensions: 라는 문구 옆을 클릭하면 테스트할 기기를 선택할 수 있는 리스트가 나타납니다. 제일 아래 [Edit...] 를 클릭하면 더 다양한 기기를 선택할 수 있는 화면이 나타납니다. 위에서 눌렀던 아이콘을 다시 누르면 해당 기능은 사라집니다.

다양한 기기의 스크린 사이즈별로 테스트

 

 

2. CSS 코드 확인 및 수정 테스트

 

 크롬 개발자 도구에 보면 맨 앞에 Elements 탭이 있습니다. 이 탭을 활용하면 HTML, CSS 코드를 보면서 디자인을 확인하고 수정 테스트를 해볼 수 있습니다. 마음에 드는 사이트에 색상 코드가 어떻게 되는지 확인해 볼 수도 있을 것 같네요.

 

(1) 먼저 엘리먼트 선택 툴을 클릭합니다.

엘리먼트 선택 툴

 

(2) 웹페이지에서 확인하고 싶은 부분을 클릭합니다. 마우스 오버만 해도 기본정보는 확인할 수 있습니다. 아래 이미지처럼요.

마우스만 올려도 기본 정보가 나타난다

 

(3) 해당 엘리먼트를 클릭하면 Styles 탭에서 해당 엘리먼트에 대한 정보가 나타납니다. 여기에서 색상 등의 코드를 수정하면 변경된 코드에 따른 페이지를 미리 확인할 수 있습니다. 실제로 코드가 변경되는 것은 아니고 그냥 테스트라서 페이지 닫아버리면 작업한 내용을 간단히 날려버릴 수 있습니다.

클릭한 엘리먼트의 색상값 등이 표시된다

 

 크롬의 개발자 도구에 많은 기능이 있는 것 같습니다. 스크립트 명령어를 입력하거나 디버깅을 할 수도 있고, 네트워크 모니터링, 메모리 사용상태 확인 등등 각 탭별로 기능이 다양하네요. 언젠가 한번 제대로 알아보고 싶다는 생각이 듭니다.