아무래도 7note입니다. 프론트 엔지니어라면 알고 싶은 툴 정리

사적으로 이용하고 있는 툴을 소개. 모두 무료로 사용할 수 있습니다!

1. "검증 툴(F12)"

개발에 필수입니다. 브라우저에 표준이 장착되어 있는 것이 대부분이지만, 특히 추천은 googleChrome 검증 도구를 자주 사용합니다.



할 수 있는 일

HTML 및 CSS 소스를 확인하고 평가판 조정 가능

javascript의 디버그 등에 콘솔이 보인다

서버와의 통신 정보를 볼 수 있습니다

로컬 스토리지와 같은 정보 보기

뭔가 그 밖에도 여러가지 할 수 있는 것 많이

특히 달려가는 분은 HTML이나 CSS를 확인하는 것으로, 오자이거나, CSS의 우선 순위의 영향으로 효과가 없는 CSS를 확인하거나 하는데 편리합니다.
사용법 등은 검색하면 여러가지 나오므로 여기서는 생략.

2. User-Agent Switcher for Chrome

사용자 에이전트를 전환할 수 있는 Chrome 확장 프로그램

User-Agent Switcher for Chrome



PC에서도 사용자 에이전트를 변경할 수 있습니다.
이것에 의해, javascript등으로 스마트폰에만 대응시키고 있는 스크립트의 거동을 PC에서도 확인할 수 있으므로 편하게 디버그를 행할 수 있습니다.
다만, 실기로 해 보면 역시 움직이지 않는다고 하는 일도 있을 수 있으므로 주의가 필요합니다.

3. "PerfectPixel by WellDoneCode (pixel perfect)"

1px의 어긋남도 용서되지 않는 당신에게. 완벽한 픽셀.

PerfectPixel by WellDoneCode (pixel perfect)



이런 걸 원했어! 라는 도구입니다.

할 수 있는 일

브라우저에 이미지 (디자인 데이터)를 겹칩니다

이미지 데이터의 투명도와 표시 위치를 자유롭게 바꿀 수 있습니다

설정을 잠글 수 있으므로 페이지를 스크롤하면서 위에서 아래까지 모두 확인할 수 있습니다.

개발자 도구로 미세 조정하면서 어긋남을 고칠 수 있습니다

과거에 기사를 썼으므로, ​​여기 의 기사도 참고 봐 주세요

4. 「팬더(통칭)」

이미지를 압축하여 용량을 가볍게 해주는 WEB 서비스입니다.



동작도 빨리 사용하기 쉬운 것이 특징.
WEB 사이트는 조금이라도 용량을 가볍게 하는 것이 중요시되고 있으므로, 화상의 압축 등은 필수입니다! !

5. 「I love♥ PDF」

이쪽은 이미지가 아니고, pdf의 변환이나 압축 등을 행할 수 있는 WEB 서비스



pdf의 경우는 자주 이 페이지를 이용합니다.

덤. "OneClickCSS"

OneClickCSS



이곳은 HTML 소스에서 1 클릭으로 CSS를 자동 생성 해주는 것.
편리합니다만, 아무래도 클래스명만, 라든지 셀렉터만, 라든지밖에 할 수 없기 때문에 토해낸 후 조정이 필요!
중~대규모이면 안 되는 것보다는 쪽이 기쁜 툴이군요.

요약

그 밖에도 몇 가지가 있습니다만, 일단 자주 사용하는 5개+1개를 소개했습니다.
또 마음이 맞으면 다른 툴도 소개할 수 있으면과.

어머니!

~ Qiita에서 매일 게시 중!! ~
【초보자용】HTML・CSS의 조금 테크 모임