블로그 이미지
초딩입맛제주아재
하고 싶은 것만 하며 살고 싶다

calendar

      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
2008. 4. 15. 15:43 Programing/HTML/JavaScript/CSS
FireFox 확장 기능 중 웹 개발자들이 가장 많이 사용하는 확장 기능은 아마 FirebugWeb Developer가 아닐까 합니다.
웹 개발자의 필수품, Firebug

Web Developer 역시 없어서는 곤란하죠~

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


Opera Inspector

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

오페라 DOM Inspector 설치 버튼

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

버튼을 드래그 하여 이곳에 드롭하면

설치 진행 여부를 확인하는 창이 뜨고, 예를 클릭하면,


새로운 툴바 버튼이 생성이 됩니다

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

이쁘게도 생겼네요~

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

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


Safari Inspector

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

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

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

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

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


사용자 삽입 이미지

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

사용자 삽입 이미지

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

역시 애플 답구나~@.@

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




posted by 초딩입맛제주아재

댓글을 달아 주세요

  1. 달룟 2008.04.16 23:59  Addr Edit/Del Reply

    좋은 정보 감사드립니다. 맥을 쓰고 있어서 주로 사파리만 쓰는데, 이런 기능이 있는지 몰랐네요.

  2. 달룟 2008.04.19 23:42  Addr Edit/Del Reply

    네~ 다음에 또 올께요.

  3. 다람G 2009.10.28 22:06  Addr Edit/Del Reply

    이거 쓰려고 오페라에서 버튼을 드래그 해봤는데, 그냥.. 텍스트가 긁혀요~(블럭) 정말 드래그하면 가지나요??

    • BlogIcon 초딩입맛제주아재 2009.11.10 18:46 신고  Addr Edit/Del

      최근에 나온 오페라에는 Dragonfly 라는 디버깅 툴이 내장되어 있습니다. http://asrada2001.tistory.com/239 요기 참고 하시구요. Dragonfly 를 사용하시는게 훨씬 좋습니다~^^

  4. 마약 2010.10.20 13:28  Addr Edit/Del Reply

    문제점이 하나 있네요...
    오페라, 사파리 테스트 해봤는데, 각각 엘리먼트들 사이에 줄바꿈 공백 노드가 실제로 존재하지만, inspector에서 #text노드를 표시하지 않아요...혹시 따로 어떤 셋팅이 필요한가요?

prev 1 2 3 4 5 6 7 8 9 ··· 36 next