Wappalyzer

프레임워크 추적

개발 구성을 살펴 볼 수 있다.

여러 환경이 중첩되어 있는 경우 정확도가 다소 떨어질 수 있지만,

그래도 간단하게 해당 백그라운드를 예측해보기에 좋다.

https://s3.ap-northeast-2.amazonaws.com/laerdream.github.io/2019-11-03/cp1.jpg

https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=ko

CSS Peeper

CSS 추적

선택된 된 엘리먼트의 CSS 속성을 볼 수 있다.

스타일 관련 플러그인답게 UI자체도 매우 이쁘다.

개발자모드에 포함되어있는 기본 툴보다 한 눈에 보기 편하다.

https://s3.ap-northeast-2.amazonaws.com/laerdream.github.io/2019-11-03/cp2.jpg

https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk

Pestcide

레이아웃 추적

안드로이드 설정중에 모든 요소의 아웃라인을 표시하는 모드처럼

페이지 구성요소의 아웃라인을 볼 수 있다.

Padding 이나 Margin이 중첩되어서 먹고 상쇄되어있는 부분을 보기 좋다.

https://s3.ap-northeast-2.amazonaws.com/laerdream.github.io/2019-11-03/cp3.jpg

https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh

Augury

앵귤러 디버그

Angular 같은 경우 요소가 클래스명도 동적으로 부여되고 컴포넌트자체가 SPA 흐름을 따라가기 때문에 정적인 페이지보다는 상대적으로 디버그하기 어려울 때가 많다.

크롬 개발자모드에서 디버깅에 도움을 준다.

https://s3.ap-northeast-2.amazonaws.com/laerdream.github.io/2019-11-03/cp4.png

https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd

Fontface Ninja

폰트 추적

요소검사를 따로 하지 않더라도 마우스 오버만으로도 어떤 폰트를 사용했는지 알려준다.

영문폰트의 경우 더욱 편하게 사용할 수 있다.

https://s3.ap-northeast-2.amazonaws.com/laerdream.github.io/2019-11-03/cp5.jpg

https://chrome.google.com/webstore/detail/fontface-ninja/eljapbgkmlngdpckoiiibecpemleclhh

ColorZilla

컬러추적

컬러피커를 제공한다.

개발자모드에서도 컬러피커를 불러올 수 있지만 이 플러그인 사용하면 원하는 시점에 바로 불러올 수 있기때문에 사용하기 빠르다.

https://s3.ap-northeast-2.amazonaws.com/laerdream.github.io/2019-11-03/cp6.png

https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp/related?hl=ko

Toybox

레이아웃 추적

별도 관리형페이지까지 제공하고 디바이스별 보기도 지원한다. 다만 계정을 만들어야하고 번거로운 절차가 다소 있다.

https://s3.ap-northeast-2.amazonaws.com/laerdream.github.io/2019-11-03/cp7.jpg

https://chrome.google.com/webstore/detail/toybox/mohlkfkdfnjciellfjppgfpffkchlopb

Deadpool wallpaper

데드풀 배경화면

새탭을 열때마다 새로운 월페이퍼가 노출된다.

데드풀 팬으로서 매우 좋아하는 플러그인이다.

https://s3.ap-northeast-2.amazonaws.com/laerdream.github.io/2019-11-03/cp8.jpg

https://chrome.google.com/webstore/detail/deadpool-wallpaper-hd-cus/eimnbnaeihejkfgjaahljdbhikfmedbc

Useragent

유저 에이전트 변경

별도 모바일 페이지 URL이 존재하는 경우 ( 보통 m.도메인 또는 /m, 파라미터=mobile ) 는

데스크톱에서도 모바일 레이아웃을 쉽게 확인 할 수 있지만 해당페이지가 UserAgent를 통해 디바이스를 구분하고 있는 경우 그럴 수 없다.

UserAgent 를 변조해주는 플러그인

https://s3.ap-northeast-2.amazonaws.com/laerdream.github.io/2019-11-03/cp9.png

https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=ko

Fullpagecapture

화면 캡쳐

스크롤 해야 보여지는 영역까지 모두 한 눈에 확인하고 싶다면 보통은 포토샵 등 툴을 사용해서 스크릿샷을 이어 붙이기 마련이다.

이 플러그인은 그런 행동을 자동화해준다.

다만 스크롤에 따른 애니메이션 이벤트가 많은 경우는 정확도가 다소 떨어진다.

https://s3.ap-northeast-2.amazonaws.com/laerdream.github.io/2019-11-03/cp10.jpg

https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl

Cors

Cors 해제

작업중 POST등 통신 테스트를 진행할때 Ajax 등 기술에서 Cors 관련 제한이 발생하는 경우,

서버에서 WhiteList 를 작성해주는 방법등이 있지만 이 플러그인을 사용해서 간단하게 크롬자체에서 Cors 설정을 무시할 수 있다.

https://s3.ap-northeast-2.amazonaws.com/laerdream.github.io/2019-11-03/cp11.png

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf