웹작업을 하다보면 설정한 div의 크기가 맞는지
그리고 css를 입력했는데 적용이 안되는데 왜 안되는지 알려면 디버깅을 해봐야 한다.
브라우저를 이용해서 하거나 여러가지 ide 툴에서 확인을 하곤 하는데 이게 되지 않으면 답답하고 상상을 하면서 작업을 해야 하기 때문에 매우 답답해진다.
뭔가 나의 시력이 낮은 눈에 안경을 벗기면 뿌옇게 보이고 뭔가 답답한 그런 느낌이랄까.
나는 별도로 쓰는 부분이 있기 때문에 필요하진 않지만 관심이 가기도 하고 해서 발견하게 되었다.
스크립트 소스를 적용을 하고 쉬프트 컨트롤을 누르면 영역과 옵션값이나 크기등이 나온다
물론 클래스명이나 아이디도 나온다.
어떤건지 확인하려면 데모페이지를 보면 된다.
데모페이지는 아래와 같다
https://codepen.io/lucagez/full/LMEerQ
깃업 주소는 아래와 같다.
https://github.com/lucagez/Debucsser
소스코드중 옵션이나 여러가지 설정을 통해서 색깔이나 보더 라인등을 바꿀 수 있다.
필요하다면 필요한부분이고 나는 알게 된뒤로 몇가지 프로젝트 작업을 할 때 이용을 해보았다.