프런트 엔드 주변의 편리한 도구

이번에는 몇 개나 프런트 엔드 개발에 사용하는 편리 툴을 소개하고 싶습니다.

1.chrome 확장 기능 "Responsive Viewer"

가장 먼저 소개하는 것은 Chrome 확장 프로그램의 Responsive Viewer입니다.
여기의 확장 기능에서는 임의의 URL을 두드리면 각 디바이스를 일람으로 일제히 표시해 줍니다.
그래서 반응형 개발시에 매우 유용하다고 생각합니다. (응답하지 않아도 도움이됩니다)



사용법도 간단하므로 추천합니다.

참고 : htps // ch 로메. 오, ぇ. 코 m / ぇbs 잡아라 / 싶다 l / re s ponshi ゔ ぇ

2.chrome의 확장 기능 「PerfectPixel」

다음에 소개하는 것은 코더나 프런트 엔드의 사람에게는 상당히 필수일지도 모릅니다.
이쪽도 chrome의 확장 기능의 PerfectPixel입니다.
여기는 jpg인지 png인지를 선택하면 브라우저에 지정한 이미지가 나옵니다.
실제로 만들고 있는 제작물에 맞출 수 있습니다.



상기의 화상은 적당한 스쿠쇼를 찍어 하고 있습니다만, 실제로는 디자이너나 스스로 만든 jpg나 png의 캄프등을 사용해 주세요.

화상의 투과율도 물론 바꿀 수 있고, 드래그 해 화상의 위치를 ​​이동, 조작 패널로부터 화상의 위치를 ​​이동도 할 수 있으므로 꼭 사용해 보세요.

참고 : htps // ch 로메. 오, ぇ. 이 m / ぇbs 잡아 / 싶은 l / ぺr ぇ ct ぇ l ー ー ー ー ぇhl = 그럼

3.vscode 확장 기능 "Live Server"

참고 : ぁtps://마르케 tp.ゔぃすあ lsつぢお。 이 m/있어 ms? 있어 m 핥기 = 리토 ぃ CK에서 y.ぃゔぇ세 rゔぇr

세 번째는 vscode 확장 기능의 Live Server를 소개하고 싶습니다.
이쪽은 환경 구축을 하지 않아도 편집중, 작성중의 프로젝트를 확인할 수 있는 뛰어난 것입니다!
nginx 주위의 설정이라든지 상당히 시간 걸리거나 하기 때문에 가벼운 프로젝트라면 이것으로 해 버립니다.

사용하기 쉽고 vscode로 Live Server를 설치하십시오.


이런 느낌으로 검색하면 나올 것이므로, 나오면 install의 버튼을 눌러 주세요.
그러면 편집기의 오른쪽 하단에

Go Live라는 곳이 나오므로 그것을 누르면 마음대로 브라우저를 열어 해당 파일을 확인할 수 있습니다.

요약

그 밖에도 편리 툴은 많이 있다고 생각하므로 여러분 좋으면 가르쳐 주세요.