2013/11/02

크롬(Chrome) 개발자 도구 사용법 // CSS 디버깅, 마우스 우클릭 해제

전문 편집 툴(?)을 사용하지 않고 인터넷 브라우저만으로 CSS를 디버깅(?) 및 수정하는 유저라면

크롬의 개발자 도구(Developer Tools)를 활용해도 좋습니다. ^^


1. 크롬의 개발자 도구 간단히 실행하기


1) 크롬의 메뉴 -> 도구 -> 개발자 도구로 직접 실행
2) 단축키 Ctrl + Shift + i 로 실행
3) 기능키 F12 로 실행
4) 웹 페이지의 특정 요소 위에서 마우스 우클릭 후 '요소 검사(N)' 선택


2), 3)번 방법은 토글(toggle) 형태로 작동되는 거라서 키를 누를 때마다 개발자 도구가 나타났다 사라졌다를 반복합니다.

4)번 방법은 개발자 도구를 실행한 후에 특정 요소를 찾아가는 작업을 단번에 해낼 수 있어서 아주 편합니다. ^^


2. 개발자 도구의 요소(Elements) 탭과 스타일(Styles) 탭 간단 설명


개발자 도구 창의 메인에는 요소 탭이 떠서 웹 페이지의 코드를 보여줍니다.

메인의 우측에는 스타일 탭이 떠서 현재 페이지에 적용된 CSS 코드가 보여지는데요,

스타일 탭의 코드에 마우스를 가져다 대면 체크박스(?)가 나타나고, 이 체크박스를 통해서 그 줄의 적용 여부를 지정, 즉 CSS 코드의 일부분을 On/Off 할 수 있습니다.


크롬(Chrome) 개발자 도구 - CSS 코드 일부분 On/Off


3. 특정 요소 찾기


HTML 코드나 CSS 코드의 첫번째 줄부터 목표로 하는 요소까지 주~욱 훑어내려가면서 내가 원하는 부분의 코드를 찾는 분은 없으시겠죠? ^^;

아래 그림에 표시된 돋보기 모양의 아이콘으로 표시된 툴을 이용하면, 작업의 대상이 되는 요소에 해당되는 소스 코드로 곧바로 이동할 수 있습니다.


툴의 사용법은 간단합니다. 개발자 도구에서 돋보기 모양의 아이콘을 클릭한 다음, 웹 페이지로 마우스 커서를 옮겨서 작업의 대상이 되는 요소를 클릭하면 됩니다.


크롬(Chrome) 개발자 도구 - 돋보기(Inspect?) 툴


*** 크롬 버전 32.0.1700.102 m 에서는 돋보기 툴의 위치가 Elements 탭의 왼쪽으로 바뀌었네요. ^^


크롬(Chrome) 개발자 도구 - 돋보기(Inspect?) 툴


여기까지의 작업을 한 번에 하는 것이 바로 1번 항목에서 소개했던 4번째 방법입니다.

웹 페이지의 특정 요소 위에서 마우스 우클릭 후 '요소 검사(N)'를 선택해서 개발자 도구를 띄우는 방법이 훨씬 간편하지만, 마우스 우클릭이 차단된 사이트에서는 특정 요소 위에서 마우스 우클릭이 불가능하므로 일단 개발자 도구를 띄운 다음에 돋보기 툴을 사용할 수 밖에 없습니다.


4. CSS 코드의 색상값(컬러코드) 변경


크롬의 개발자 도구에서는 2번 항목에서 살펴보았듯이 CSS 코드의 적용 여부를 선택할 수 있을 뿐만아니라, 색상의 값도 변경 가능합니다.


하지만, 그보다 먼저!!

색상의 값이 표현되는 방식을 작업 환경에 맞게 변경할 수 있습니다.


크롬(Chrome) 개발자 도구 - 색상값(컬러코드) 표현 방식 변경


색상값 표현 방식 변경 하기

1) 위 그림의 빨간 네모 안쪽에 있는 톱니바퀴 모양 아이콘을 클릭해서 변경
2) CSS 코드 중 색상값이 들어 있는 부분에 나타나는 컬러 박스를 'Shift + 마우스 왼쪽 버튼 클릭'해서 변경. Shift + 마우스 왼쪽 버튼 클릭을 할 때마다 색상 표현 방식이 순차적으로 바뀌게 됩니다.


본인의 작업 환경에 맞춰서 색상값 표현 방식을 바꿔놓으면, 색상을 이것저것 편하게 바꾸어 보면서 최종 선택을 할 수 있어서 좋더군요. ^^


크롬(Chrome) 개발자 도구 - 색상값(컬러코드) 변경


색상값 변경 하기

1) CSS 의 색상값의 수치 부분을 직접 변경. 이때, 수치 부분을 더블클릭으로 선택한 뒤에는 마우스의 휠 또는 키보드의 위/아래 방향키로도 수치를 조절할 수 있습니다. 물론 숫자나 컬러코드를 직접 입력해서 변경할 수도 있습니다.
2) 컬러 박스를 클릭에서 색상선택기(컬러픽커)로 변경.


5. CSS 코드의 픽셀 값 변경

픽셀값도 색상값을 변경하는 방법과 동일하게 변경 가능합니다.

스타일 탭에 표시된 수치 부분에 마우스 왼쪽 버튼을 더블클릭하여 변경할 수치를 선택한 다음,

1) 마우스의 휠을 위/아래로 조절하거나
2) 키보드의 방향키를 위/아래로 움직여서 세밀한 조정이 가능합니다.
3) 수치를 직접 숫자로 입력해서 변경하는 것도 물론 가능합니다.


개발자 도구에서 수치를 바꾸면 웹 페이지에도 바로바로 반영되어서 표현되기 때문에, 글자 크기나 padding, margin 수치를 세밀하게 조정할 때 매우 편리합니다. ^^


6. 특정 코드 검색


요소(Elements) 탭에서 Ctrl + F 를 누르면 특정 코드로 검색도 됩니다. ^^


3번 항목에서 설명했던 돋보기 툴이 시각적으로 특정 요소를 찾는 반면, Ctrl + F 로는 소스 코드나 웹 페이지 상의 텍스트를 기반으로 특정 요소를 찾게 됩니다.


크롬(Chrome) 개발자 도구 - HTML 코드 검색





* 본 게시물은 크롬 버전 30.0.1599.101 m 기준으로 작성되었습니다.



Chrome DevTools
https://developers.google.com/chrome-developer-tools/

댓글 2개:

  1. 돋보기가 있는지도 모르고 이제까지 html head body 차례대로 다 펼쳐본 사람 여기있습니다
    =0=/

    답글삭제
    답글
    1. 정도를 걷는 분이시군요! 반갑습니다 ㅋㅋ

      웹페이지에서 특정 위치 클릭해서 뒤져보는 거랑

      Ctrl + F 누르고 ID / Name 검색해서 시각적으로 잘 안 드러나는 녀석을 콕 집어내는 것만 잘해도 웹 개발이 즐거워지는 것 같습니다 ^^a

      삭제