Regular Motion

개발자가 상팔자

Chrome 개발자 도구의 유용한 기능!

 

우연히 Chrome 개발자 도구의 유용한 기능 몇가지를 알게되어 공유!!

 

{ Dock to right }

Wide 모니터를 쓰는 개발자들이 대부분이라는 걸 가정할 때 굉장히 유용한 기능이다!

회사에서 대부분의 개발자들이 Developer Tools를 Float Mode로 한다음 브라우저 옆에두고

작업하는 경우가 대부분인걸 감안하면 Developer Tools는 아래 위치할 때 보다 옆에 위치할 때 더 편하다.

위치 변경은 Developer Tools의 Settings에서 Dock to right 체크박스를 선택하면된다!!

Developer Tools의 기본 위치
General -> Dock to right을 체크하면 오른쪽으로 위치를 변경할 수 있다.

 

 

{ Disable cache }

가끔 개발중에 code를 수정했는데 결과가 바뀌지 않을 때가 있다.

이런 경우 Browser의 cache 문제일 확률이 높다.

위의 문제가 아니더라도 Page가 로딩되는 시간을 측정하고 싶다거나 하는 이유로 cache를 비활성화 시키고 싶을 때가 있다.

요럴 때 사용하면 좋은 기능이다.

General -> Disable cache를 체크하면 cache를 하지 않는다.

 

 

{ Device Resolution Simulation }

Mobile과 Tablet의 해상도를 Simulation 할 수 있는 기능을 제공한다.

Device Orientaion도 간단하게 버튼 클릭으로 변경할 수 있다. (편하다!)

User Agent를 변경해볼수도 있다. Server나 Client에서 user agent 기반의 rendering system을 사용중이라면 간단하게 검증 해볼 수 있는 좋은 툴인 것 같다.

viewport는 얼마나 정확히 지원되는지 아직 테스트 해보지 못했다.

Resolution과 User Agent를 변경해서 테스트 해볼 수 있다.
Orientation 변경도 테스트 할 수 있다.

 

 

{ Touch Event Simulation }

Browser에서 Mouse Event 대신 Touch Event를 발생시켜준다.

touchmove가 실제 단말보다 빈번하게 호출되기 때문에 성능에 민감한 부분 구현에는 적합하지 않고

기본적인 기능 구현에 적합한 것 같다.

Emulate touch events를 체크하면 touch event를 발생시킨다.

2 Comments

  1. Event trigger 놀랍당- 저런 기능이 있었군 Thank you for your sharing

답글 남기기

© 2017 Regular Motion

Theme by Anders NorenUp ↑