snapline - 사이트가 렌더링되는 모습을 애니메이션 GIF 화

Google Chrome의 DevTool을 사용하면 Web 사이트 개발에 많은 기능 향상을 보입니다. 

표시에 문제를 느끼는 경우 타임 라인 기능을 사용하는 것이 좋습니다. 

사이트가 어떻게 렌더링되고 있는지 알 수 있으며, 

또한 그것을 애니메이션 GIF로 확인할 수있게 해주는 것이 snapline입니다.

snapline 사용 

사용법의 데모입니다. 

우선 Timeline 탭에서 기록을합니다. 

Screenshots을 잊지 말고 체크해둡니다.

그리고 Save Timeline Data를 선택합니다.

저장된 JSON을 snapline에 전달하면 애니메이션 GIF가 생성됩니다.

snapline는 사이트의 렌더링되어가는 모습이 더 두드러집니다. 

생각대로 구축되어 있는지 한눈에 알 것이다. 

하나 하나의 이미지는 모르는 정보도 snapline 절대로 매우 간단합니다.

 snapline는 node / JavaScript로 만든 오픈 소스 소프트웨어 (MIT License)입니다.

pmdartus/snapline: Unleash your screenshots stored in Chrome Devtool timeline files