Chrome 개발자도구 – 소소소한 팁

다른 브라우저를 사용하다가도 구글 크롬으로 돌아오게 되는 가장 큰 이유가 개발자 도구 때문이다. 물론 다른 브라우저에 내장된 개발자 도구들도 뛰어나지만 오래 사용하다보니 단축키나 사소한 기능들이 손에 익어버린 이유가 크다.

최근들어 멀티커서나 재미있는 기능들이 추가되고 있어 나중엔 별도의 도구 없이도 개발할 수 있는 환경이 되지 않을까 생각이 든다.

(이 글은 정말 소소소한 팁을 다루고 있다. 소소하다 못해 소소소한데 뭐 이런걸 포스팅하냐 하시면 제가 할 말이 없습니다. ;ㅅ;)

크롬 개발자도구를 더 자세히 보고 싶다면 생활코딩 크롬 개발자도구편을 살펴보자.

소소소한 팁

menu

개발자도구는 햄버거 버튼 > 도구 > 개발자 도구에서 열 수 있다. 맥에서의 단축키는 option(alt) + cmd + i로 열 수 있다.

창 크기 확인하기

창 크기 표시

개발자도구를 연 상태에서 창 크기를 변경하면 창 크기를 표시해준다.

엘리먼트 순서 변경, 제거하기

순서변경 방법

엘리먼트를 드래그-드롭으로 순서를 변경할 수 있다. delete 키를 누르면 제거할 수 있다.

픽셀값 변경하기

픽셀 값 변경하기

px, % 등의 값은 선택하고서 ↑, ↓ 키로 값을 변경할 수 있다. Shift + ↑, ↓ 는 10단위로 이동 가능하다.

색상 변경하기

colourpicker

css에서 색상을 보여주는 작은 색 박스를 클릭하면 컬러픽커로 색상을 변경할 수 있다.

Pseudo class 바로 확인하기

psudoselect

styles 탭에서 우측 상단에 pseudo class를 확인할 수 있는 셀렉터가 있다. 클릭해보면 4개의 pseudo class를 테스트 할 수 있다.

element-right

물론 해당 엘리먼트에서 오른쪽 클릭해도 확인할 수 있다.

김용균

안녕하세요, 김용균입니다. 문제를 해결하기 위해 작고 단단한 코드를 작성하는 일을 합니다. 웹의 자유로운 접근성을 좋아합니다. 프로그래밍 언어, 소프트웨어 아키텍처, 커뮤니티에 관심이 많습니다.

이 글 공유하기

이 글이 유익했다면 주변에도 알려주세요!

페이스북으로 공유하기트위터로 공유하기링크드인으로 공유하기Email 보내기

주제별 목록

같은 주제의 다른 글을 읽어보고 싶다면 아래 링크를 확인하세요.

July 15, 2014

MAMP에서 Sublime Text로 Xdebug 사용하기

PHP를 디버깅하기 위해서는 Xdebug와 같은 확장을 서버에 설정해야 하고 리모트로 디버깅 하기 위한 클라이언트 프로그램이 요구된다. 이 글에서는 서버로 MAMP를 활용하며 클라이언트로 Sublime text를 활용한다. Xdebug 활성화하기 M…

July 06, 2014

Ricoh GR 일주일 간단 사용기

일주일 동안 출퇴근에만 썼는데 500컷 가량을 찍었고, 그리고서 남기는 Ricoh GR 간단 사용기. 이렇게 생긴 Ricoh GR 출시한지 좀 지난 카메라라서 세세하게 스펙을 나열하긴 그렇고 DP Reivew 링크 로 대체. Ricoh GR의 …