Here, Edward 👨🏻‍💻

About안녕하세요

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

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

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

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

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

소소소한 팁

menu

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

창 크기 확인하기

창 크기 표시

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

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

순서변경 방법

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

픽셀값 변경하기

픽셀 값 변경하기

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

색상 변경하기

colourpicker

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

Pseudo class 바로 확인하기

psudoselect

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

element-right

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

이 글은 https://www.haruair.com/blog/2260 에서 옮겨온 글입니다.
Posted by
김용균
사소한 이야기를 많이 나누고 싶어하는 해커. 티끌 같은 기술들이 세상을 바꾼다고 믿습니다.
목록으로
© 2011-2018 Edward Kim Some Rights Reserved.?