2009/03/21 19:23
 얼마전 사파리4 베타가 발표되었습니다.

 이전 사파리 3는 윈도우에서 한글폰트에 안티알리어싱을 사용할 때 가독성에 문제가 있다는 지적이 많이 있었으며 저도 익숙하지 않아서 한동안 설치만 해놓고 사용하지 않고 있었습니다.

 하지만 오늘 사파리4 베타버전을 설치해보니 폰트의 가독성 문제는 깔끔히 해결되어 있었습니다. 그리고 더불어 Nitro라는 엔진을 사용해서 렌더링 속도를 향상 시켰습니다.

 평소에 불여우3.0을 사용했었는데 불여우3.0 보다 체감상 빨랐습니다. 하지만 이 포스트에서는 브라우저의 렌더링 속도가 주제가 아닙니다.

 현재 FireBug는 웹 개발자들 사이에서 모르면 간첩이라는 소리를 들을 정도로 웹 UI 개발에 상당한 편의성을 제공합니다. 그런데 오늘 보니 사파리에서도 그런 기능을 제공하더군요. Web Inspector란 이름을 가진 이 툴은 사실상 FireBug에서 제공하는 거의 모든 기능을 제공합니다. 우리나라 말로는 개발자 도구라고 하나 봅니다.

 사실 Web Inspector는 WebKit에서 제공하는 기능입니다. 따라서 WebKit을 사용한 브라우저는 모두 이러한 디버거 기능을 제공할 수 있다는 이야기가 됩니다. 다만 브라우저에서 지원하지 않으면 사용할 수 없습니다.

 구글의 크롬같은 경우 WebKit을 사용하지만 모든 디버깅 기능을 지원하지는 않습니다.

 
그럼 사파리의 디버깅 기능을 볼까요?
 
 
플래이 버튼을 누르시면 플레이 됩니다.

 FireBug는 추가적으로 플러그인들을 설치하면 보다 다양한 기능들을 활용할 수 있지만 기본 기능만을 보자면 오히려 Web Inspector가 더 다양하다고 볼 수 있습니다.

 앞으로 웹 디버거의 판도가 어떻게 변할지 많이 기대가 됩니다. ^^

# 사파리 기본 설정으로는 개발자 도구가 나타나지 않습니다.
Preference > Advanced 에서 Show Develop menu in menu bar 메뉴를 체크해 주시면 됩니다.

1. Preference를 선택합니다. Ctrl + ,를 누르셔도 됩니다.
사용자 삽입 이미지


2. Advanced 탭에서 Show Develop menu in menu bar 항목을 체크해 줍니다.
사용자 삽입 이미지



사용자 삽입 이미지

3. 이제 화면에서 우클릭을 하시면 Inspect Element 메뉴를 볼수 있습니다.

화면상에서 Inspect Element를 실행하면 다음 이미지와 같은 Web Inspector를 볼 수 있게 됩니다.






4. Web Inspector는 Firebug를 써보신 분이시라면 쉽게 사용하실 수 있을 껍니다.
사용자 삽입 이미지


크리에이티브 커먼즈 라이선스
Creative Commons License