웹 디자이너를 위한 구글 크롬 개발자 도구 Top 11 파워 팁
HTML 요소를 선택하는 방법
개발자 도구 왼쪽 상단의 요소 선택자를 클릭해 활성화 한 후 웹페이지로 마우스 커서를 움직이면 마우스 커서 위치한 곳의 요소 영역이 활성화 되면서 선택 가능한 요소임을 표시합니다.
마우스 클릭을 하면 해당 요소가 선택되며, 선택된 요소의 소스 보기에서 선택한 영역에 대한 태그가 선택되고, 해당 태그의 CSS속성이 오른쪽 창에 표시됩니다.
1. CSS 편집기
선택한 요소의 CSS 속성 정보와 CSS 상속 내용을 확인할 수 있으며, CSS 속성을 추가/수정/삭제 해서 웹페이지에 실시간으로 수정 결과 값을 확인할 수 있습니다.
요소(Element) 선택기로 웹페이지의 요소를 선택하면 개발자 도구 오른쪽에 요소(Element)의 CSS 정보가 표시됩니다.
또는, 소스 보기 창의 소스 태그를 클릭해도 됩니다.
CSS 속성을 더블클릭하면 속성 값이 입력 필드로 변경되면서 속성을 수정할 수 있는 상태가 됩니다.
CSS 파일을 수정하고 화면을 갱신해서 변경 사항을 확인할 필요없이 바로 바로 변경 내용을 확인할 수 있기 때문에, CSS 프로토타이핑을 빠르게 할 수 있습니다.
CSS 편집기 화면에는 CSS 상속 관계를 알 수 있도록 상속받은 모든 CSS가 밑에서부터 위로 순차적으로 표시됩니다.
CSS 의 구조를 한눈에 파악할 수 있기 때문에 CSS를 수정할 부분을 빠르게 파악할 수 있습니다.
2. CSS 컬러 픽커
크롬 확장프로그램으로 사용할 수 있는 컬러 픽커(Color Picker)가 여러 종류 있지만, 크롬 개발자 도구에 내장된 컬러 픽커가 더 좋습니다.
개발자 모드에서 원하는 컬러를 알고 싶은 요소(Element)를 요소 선택기로 선택하면 오른쪽 창에, 해당 요소의 CSS 속성이 표시됩니다.
컬러값 사각형을 클릭하면 컬러 대화상자가 펼쳐지면서 현재 컬러값의 다양한 버전 컬러 정보와, 다른 컬러를 선택할 수 있는 컬러바가 표시됩니다.
변경한 컬러는 웹페지에 실시간으로 반영됩니다.
CSS 컬러 픽커는 HSLA, RGBA, HEX 값으로 컬러 정보를 보거나 선택할 수 있습니다.
뒤에 A는 알파값으로 투명도를 지정합니다.
컬러 팔레트 기능으로 커스텀 컬러를 등록해 관리할 수도 있습니다.
3. 요소의 상태 변경
요소의 현재 상태를 변경해 요소가 특정 상태일 때 어떤 형태로 보이거나 변경되는지를 알 수 있습니다.
예를 들어 클릭 버튼 위에 마우스 커서가 위치했을 때, 또는 포커스가 갔을 때 어떻게 보이는지 상태를 고정시켜서 웹페이지에서 확인할 수 있습니다.
CSS 편집기 상단 오른쪽의 ":hov" 를 클릭하면 요소의 새로운 상태를 선택할 수 있는 체크박스 목록이 표시됩니다.
상태를 지정할 체크박스에 체크(다중 체크 가능)를 하면 해당 요소에 새로운 상태가 부여되고, 상태에 따른 CSS가 정의되어 있을 경우 해당 CSS가 적용된 화면이 웹페이지에 표시됩니다.
실제 사용자가 액션을 하지 않고 상태를 확인할 수 있기 때문에, 사용자 동작에 따르는 CSS를 추가로 정의한 경우 빠르게 결과를 확인해볼 수 있습니다.
4. 선택적 쿠키 삭제
크롬 웹 브라우저의 쿠키를 지우는 기능을 사용하지 않고 삭제할 필요가 있는 쿠키만은 선택적으로 삭제할 수 있습니다.
삭제되지 않았으면 싶은 개인적인 사이트 방문 정보들까지 삭제되지 않으므로 사이트 개발할 때 사용하면 무척 편리합니다.
응용프로그램(Application) 탭을 연 후 왼쪽 목록의 "Storage > Cookies" 를 펼치면 현재 웹 페이지의 쿠키 사용 도메인 목록을 볼 수 있습니다.
도메인을 하나 선택하면 오른쪽에 사용중인 쿠키 목록이 표시됩니다.
각 쿠키 항목 별로 컨텍스트 메뉴를 열어 쿠키를 개별 삭제하거나, 쿠키 이름을 바꿀 수 있습니다.
5. 모바일 기기별 미리보기
모바일 화면 보기 상태에서 대상 모바일 기기를 선택해 대략의 기기별 레이아웃 상태를 확인할 수 있습니다.
최신 기기들이나, 목록에 없는 기기는 사용자 정의 크기를 설정해서 확인을 할 수 있습니다.
구글같은 검색 엔진은 모바일 퍼스트 정책을 펴고 있기 때문에, 웹사이트가 모바일에서 얼마나 최적화되어 보이는지는 중요한 이슈입니다.
지금 우리가 사는 세상은 검색되지 않는 웹사이트는 사실상 존재하지 않는 사이트와 같기 때문에, 검색엔진 최적화는 중요하며, 특히 모바일 보기 상태에서의 최적화는 중요합니다.
반응형 웹 사이트/페이지를 제작하는 경우 이 점은 더욱 중요하며, 다양한 모바일 기기들에서 문제 없이 화면 레이아웃이 보여진다는 것을 대략은 확인할 수 있습니다.
단, 모바일 미리보기에서 보이는 화면이 실 기기에서도 100% 보일 것이라는 보장은 없습니다.
특히 애플 기기의 경우 모바일 사파리를 기본 웹브라우저로 사용하며, 크롬과는 다른 렌더링 엔진을 쓰기 때문에, 실제 기기에서는 레이아웃이 어긋나 보일 수도 있습니다.
6. 요소(Element)를 드래그&드롭으로 배치하기
HTML 소스 보기 상태(Elements 탭)에서 소스의 요소를 드래그&드롭으로 원하는 위치로 이동할 수 있습니다.
레이아웃의 배치 변경이나, 요소의 위치에 따른 레이아웃 변화를 확인하고 싶을 때 유용하게 사용할 수 있습니다.
드래그&드롭한 결과는 실시간으로 웹페이지에 반영되어 보입니다.
쇼핑몰 화면 배치를 할 때, 또는 목록의 순서를 바꿀 때 불편하게 HTML 소스를 변경해가면서 위치를 조정할 필요없이, 웹 브라우저에서 실시간으로 배치 변화에 따른 결과를 바로 바로 확인해 볼 수 있습니다.
7. HTML 편집기
HTML 소스 보기 상태에서 요소 단위로 HTML 소스 코드를 즉시 수정할 수 있습니다.
소스 보기 창에서 수정할 소스 영역의 태그 위에 마우스 커서를 위치시킨 후 컨텐스트 메뉴를 열어 "Edit as HTML" 을 선택하면 현재 태그 이하의 모든 코드가 텍스트 편집기 화면 안에 표시됩니다.
사용이 조금 불편하기는 하지만, 텍스트 입력기의 기능을 하며, 내용을 수정한 후, 텍스트 편집기 화면 바깥 영역을 클릭하거나 "Esc" 키를 누르면 편집기 화면을 빠져나가면서, 수정한 내용이 소스에 반영됩니다.
물론 반영된 소스 내용에 따라 웹페이지에도 실시간으로 변경된 결과가 보이게 됩니다.
8. 행 번호로 이동하기
소스 검색을 할때 검색어를 입력해 단어를 찾는 방법 외에, 행 번호를 입력해 원하는 위치로 즉시 이동할 수 있습니다. 같은 페이지를 계속 편집하다보면, 이동할 위치의 행 번호를 알게 되고, 같은 위치로 계속 이동하는 경우 스크롤 바나 페이지 업/다운 키로 이동하는 것보다 훨씬 빠르게 소스를 이동할 수 있습니다.
특히 몇 천 라인이 되는 CSS나 자바스크립트 코드를 이동할 때 유용합니다.
Ctrl + P(또는 Ctrl +O) 를 누르면 개발자 도구 화면 상단에 검색 바가 표시됩니다.
":행:열" 형태로 ":"와 조합해서 행 번호, 또는 컬럼 번호를 입력하면 해당 위치로 바로 건너뜁니다.
열 없이 ":행" 만 입력해 행만 건너뛸 수 도 있습니다.
9. 소스 전체 검색
현재 웹페이지를 검색하는 단축키를 사용해 소스 내용 전체를 검색해서 그 결과를 목록으로 표시해줍니다.
단축키는 "Ctrl + Shift + F" 입니다.(맥OS 에서는 Cmd + Option + F)
"Ctrl + Shift + F" 를 누르면 하단 콘솔 창 위치에 "Search" 탭이 추가되면서 검색 입력 바가 활성화 됩니다.
검색할 키워드를 입력한 후 "엔터" 키를 누르면 소스 안에 해당 키워드가 나오는 모든 행이 목록으로 표시됩니다.
표시된 목록의 행을 클릭하면 소스의 해당 행으로 건너뜁니다.
10. 파일 직접 열기
개발자 도구 소스보기(Sources) 탭을 열면, 왼쪽 창에 현재 웹페이지와 웹페이지에서 가져오는 모든 리소스에 대한 목록이 도메인 단위로 구분되어 표시가 됩니다. 파일에서 링크한 리소스가 많은 경우 원하는 파일을 찾기가 쉽지 않습니다. 또, 캐싱이 된 경우 구버전의 파일들까지 한꺼번에 목록에 표시되기 때문에, 자주 혼동을 일으키게 됩니다.
크롬 개발자 도구에는 "Ctrl+P" 단축키(또는 "Ctrl + O")가 있어서 개발자 도구 화면 어느 위치에서나 원하는 소스(리소스) 파일을 즉시 찾아서 열어볼 수 있는 파일 검색 도구를 제공합니다.
"Ctrl+P"를 누르면 개발자 도구 상단 가운데에 활성화 되는 파일 검색 입력 창에 파일 명 일부를 입력하면, 해당 키워드와 관련이 있는 모든 파일이 목록으로 검색되어 표시됩니다.
키보드 화살표 키, 또는 마우스로 검색 목록의 파일을 선택하면, 소스보기 탭으로 이동한 후, 선택한 파일을 열어 소스보기로 보여줍니다.
맥OS에서 크롬 단축키 사용은 Ctrl -> Cmd, Shift -> Option 으로 사용합니다.
11. 미니마이즈(Minimized)화 된 파일을 포매팅(Formatting)해서 보기
웹 사이트 개발, 디자인을 하게되면, 외부 리소스(CSS, Javascript) 파일을 링크해서 사용하게 되는 경우가 많습니다.
이때 자주 보게되는 파일명이 "*.min.js", "*.min.css" 와 같은 "min"이 붙은 파일들입니다.
이 파일들은 작성한 텍스트 파일을 미니마이즈화(Minimize) 한 버전의 파일입니다.
미니마이즈화 한 파일은 불필요한 공백과, 줄바꿈을 제거해서 파일 크기를 작게 줄인 파일을 말합니다.
미니마이즈화 된 파일을 열면 소스 상단에 "Pretty-print minified file?"(미니마이즈화 된 파일을 재 포매팅 할까요?) 라고 확인을 합니다. "Pretty-print" 버튼을 누르면 소스를 보기 좋게 줄바꿈과 탭으로 정리를 해줍니다.
보통은 일반 텍스트 파일과 미니마이즈화 한 파일 2개의 버전을 같이 배포하기 때문에 소스를 보려면 일반 파일을 열어서 보면되지만, 함께 배포되지 않거나, 웹에서 링크만 걸어서 사용하는 경우, 일반 텍스트 파일 버전이 제공되지 않는 경우 이 방법으로 소스 코드를 확인할 수 있습니다.