오페라,사파리의 DOM Inspector

FireFox 확장 기능 중 웹 개발자들이 가장 많이 사용하는 확장 기능은 아마 Firebug와 Web Developer가 아닐까 합니다.

두 확장기능은 웹개발시 없어서는 안될 정말 유용한 툴들이죠.
IE에도 IE Developer 이라는 툴이 있어서 어느정도 유용하게 쓸 수 있습니다만 위의 것들에 비해 좀 부실한 면이 없지 않습니다.
반면 Opera와 Safari에는 저러한 툴이 없어 아쉬웠는데요, 그런 아쉬움은 이제 추억으로 묻어버려도 좋을 것 같습니다.


Opera Inspector

오페라 9.0 이후 버전 부터는 간단한 조작만으로 브라우저에 Inspector를 설치 할 수 있습니다.
설치를 위해서는 오페라 9.0 이후 버전으로 다음 URL의 페이지를 엽니다.
http://dev.opera.com/tools/

그럼 위와 같은 버튼 두 개가 보이는데요, 저 버튼들을 드래그 하여 오페라 브라우저의 툴바에 드롭하는 것으로 Inspector의 추가는 끝납니다.

이제 Opera의 DOM Inspector의 위용을 한 번 볼까요?

DOM Tree,CSS inspect, HTTP network 정보까지 Firebug와 비교해도 전혀 손색이 없죠? ^^

이번엔 사파리쪽을 살펴볼까요?


Safari Inspector

Safari 3.1 부터는 브라우저에 Inspector를 내장하고 있습니다.
하지만 메뉴속에 꼭꼭 숨어있어서 있는지조차 모르고 있었습니다;;;

메뉴의 편집>기본설정 또는 Ctrl + ,(콤마)를 누르면 아래와 같은 패널이 뜹니다.

고급 탭의 하단을 보시면 "메뉴 막대에서 개발자용 메뉴 보기" 라는 항목이 있습니다.
이걸 체크해서 활성화를 시켜주면 메뉴바가 다음과 같이 바뀝니다.

단, Mac용 Safari에서 Inspector를 활성화 하려면 콘솔에서 아래와 같이 해주시면 됩니다.

defaults write com.apple.Safari \
WebKitDeveloperExtras -bool true

개발자용 메뉴가 새로 생겼습니다~ 캬~
메뉴를 클릭해보면 다양한 세부 항목들이 보입니다.

 Inspector의 활용방법은 간단합니다.
웹페이지의 요소에서 마우스의 우측버튼을 클릭하면 컨텍스트 메뉴 하단에 "구성 요소 점검" 이란 항목이 보입니다. 클릭하면 아래와 같은 감개무량한 Safari의 Inspector이 모습을 드러냅니다...

이제 Inspector를 쓰기위해 특정 브라우저를 고집할 이유는 없어진듯 합니다.(물론 지극히 주관적인 의견일테지만요~^^)
Opera,Safari도 많이 사랑해주세요~~^^