몇 년 전이더라...
사내에서 한참 교육을 할 때 테크니컬 라이팅 교육을 수강한 적이 있다.
그 때 하나의 주제로 글을 쓰는거였는데 마침 디버깅 관련한 문서가 없어서 디버깅을 주제로 글을 썼다. 그리고 나서 테스트을 추가로 써서 책으로 만들면 어떨까하고 알아봤는데 마침 인사이트 사장님이 좋게 봐주셔서 쓰기 시작했다.
이게 2011년 1월이다. -_-;
모두 그렇겠지만 처음에 한 6개월 생각했다. 근데 쓸 당시에 총각이였는데 지금은 2살배기 아이의 아빠가 됐다... 정말 틈틈히 쓰다보니 거의 3년이 지난 시점에 책이 나왔다.
쓰고 나서도 너무 아쉬움이 많이 남는다.
IE11이 나온 시점에 이 책에서는 IE9이 마지막이라 좀 아쉽고 크롬도 좀 더 다양한 기능들이 추가됐다.
이렇게 타이밍이나 지면상 다루지 못했던 다양한 얘기는 여기를 통해서 다룰 예정이다.
어쨌든 속 시원하네.
기존 자바스크립트 프로파일링은 어떤 함수가 얼마나 오래 걸렸는지 프로파일링 하기 때문에 소비 시간을 기준으로 느린 함수와 빠른 함수를 확인할 수 있었다.
하지만, 어떤 시점에 어떤 함수가 실행되고 얼마나 느린지 확인할 수 없었다.
예를 들어, 프로파일링을 실행하고 이벤트들을 수행한 다음 프로파일링을 끝내면 기존에는 프로파일링은 어떤 함수가 느린지 확인할 수 있었다면, 이벤트가 발생한 시점에 어떤 함수가 빠르고 느린지 확인할 수 없었다.
이 부분을 최근 크롬 개발자도구에서 프레임차트(Frame Chart)의 기능을 이용하여 시간의 흐름에 따라 함수의 실행시간을 확인할 수 있다.
즉, 특정 시점에 어떤 함수가 느린지 확인하고 싶을때 프레임 차트를 사용하면 유용하다.
프레임차트의 사용법은 기존과 같이 JavaScript CPU 프로파일 수집하기(Collect JavaScript CPU Profile)을 실행한 후 결과화면에서 아래와 같이 프레임차트(Frame chart)을 선택하면 된다.
아래와 같은 화면을 볼 수 있다.
여기서 확인할 수 있는 데이터는 5가지이다.
이름(Name) : 함수의 이름
실행 시간(Self time) : 호출된 함수를 제외하고 자신이 실행한 시간
전체 시간(Total time) : 함수가 실행된 전체 시간
실행 시간 합계(Aggregated self time) : 함수의 실행 시간(Self time)의 합
전체 시간 합계(Aggregated self time) : 함수의 전체 시간(Total time)의 합
이 5가지 데이터를 가지고 개선작업을 하면 된다.
ps. 크롬 개발자 도구는 정말 좋다.
