나를 찾는 아이 - Simple is the best, Go to basic

원문 : http://www.webmonkey.com/blog/The_Five_Best_Firebug_Extensions



파이어버그(firebug)와 관련된 5가지 익스텐션을 소개해드립니다.


1. YSlow (다운로드)

가장 잘 알려져있는 firebug 익스텐션인 YSlow입니다.

yahoo에서 발표한 웹사이트 최적화 항목들에 대해서

해당 홈페이지가 어떤 등급을 나타내는지 보여줍니다.

이를 통해서 자신의 웹사이트가 어떤 부분에서 성능개선이 요구되는지 확인할 수 있습니다.



2. firecookie (다운로드)




firebug에는 왜 이런기능이 없나 항상 생각했는데 좋은 익스텐션이 있군요.

저는 ncookie 라는 익스텐션을 그간 사용하고 있었는데 firecookie로 갈아타야겠습니다.

이 익스텐션의 기능은 내 컴퓨터에 설치되어있는 모든 쿠키들을 볼수 있습니다.

쿠키 값은 물론 수정가능합니다.



3. firephp (다운로드)

http://www.firephp.org/

php와 연동해서 firebug의 콘솔 탭에서 php버그를 확인할수 있습니다.

이 익스텐션은 워낙에 설명해야할 부분이 많으니 이쯤에서 소개 마치도록 하고

정확한 사용법에 대해서는 홈페이지를 참고하세요.

참고로 php5 이상에서 사용가능합니다.



4. Pixel Perfect (다운로드)

캡쳐 사진을 보면 알수 있듯이

실제 웹페이지와 비교해서 정확한 픽셀을 맞추도록 도와주는 익스텐션입니다.



5. Rainbow (다운로드)


firebug의 자바스크립트에 색상을 입혀줍니다.

그간 너무 심심하게 검정색으로만 나왔는데 좀더 자바스크립트 코드보기가 한결 쉬워지겠군요.

3, 4, 5번 익스텐션은 아직 테스트단계로 모질라에서 다운로드를 시도할 경우

로그인을 필요로 합니다. 참고해두시기 바랍니다.

또한 3, 4, 5 익스텐션은 이왕이면 파이어폭스 및 파이어버그 최신버전에서 사용하시는게

안정성이 있는것 같아보입니다.


파이어버그 만세!

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

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

http://trend21c.com/archives/firebug/

이 블로그에 그간 여러 포스팅을 하면서 누차 강조했듯이 저는 파이어버그빠(?) 입니다.

그래도 다행히 요즘에는 웹퍼블리셔라고 불리는 업무를 하시는분들은 거의 파이어버그를 사용하는군요.

그런데 아직 개발자들은 파이어버그의 존재조차 모르는 사람이 많습니다.

강력한 자바스크립트디버깅기능도 있는데 말이죠.

그리고 실상 파이어버그를 사용하시는 분들도 inspect 기능만 사용을 하시고(물론 이게 제생각에도 가장 중요하긴 합니다)

파이어버그안에 있는 자잘하면서도 유용한 많은 기능들을 모르는 분들이 많더라고요.

이런 이유중의 하나가 영문메뉴얼을 너무 읽기 귀찮아하는 그런 귀차니즘의 영향도 있으리라 생각합니다.

그래서 파이어버그빠(?) 로서 이번기회에 파이어버그의 한글화 페이지를 준비했습니다.

파이어버그의 일본어는 번역된 페이지가 있는 반면에 한국어는 없다는 사실이 좀 불끈불끈하게도 하기도 했군요.

사실 이 한글 버전이 완성된지는 2개월정도가 되었으나

실제로 소개는 정식으로 파이어버그 홈페이지에 링크되었을때 하려고 했는데

joe at joehewitt.com, johnjbarton at johnjbarton.com 이 두분에게 한글번역을 마쳤다는

메일을 수차례보냈음에도 불구하고 2달이나 지난 지금도 아직 회신을 받지 못하였습니다.

그래서 언제 회신올지 마냥 기다릴수도 없고 임시로 페이지를 완성하여 공개합니다.


혹시 파이어버그개발에 관련된 분들과 개인적인 친분이 있으신 분들이나

연락이 가능하신분들 한글번역 페이지에 대해 저 대신에 말씀드렸주셨으면 좋겠습니다.

o242 at nate.com 으로 메일을 보냈으니 지난 메일함이나 휴지통 스팸메일함을 뒤져보라고 말씀해주세요.



난 파이어버그는 사용하지만 메뉴얼은 아직 읽어본적이 없다 하시는 분들은 이번 한글 페이지를 통해
한번쯤 읽어보셔도 좋을 것 같습니다. 양도 그리 많지 않습니다.


기존의 파이어버그홈페이지에서 각각의 section 마다 section 클래스를 정의하여

min-height를 적용하여 레이아웃을 구성했는데

IE에서는 min-height가 적용되지 않아 한글화에서는 번역된 콘텐츠가 적은 섹션은 레이아웃이 간혹 틀어지는데가 있군요.

그리고 참고하실점은 현재 한글 HTML 파일간의 경로만 정상적으로 되어있고

다른 링크는 깨어진것이 많습니다. (이미지, css, js는 getfirebug.com의 것을 사용했습니다)



마지막으로 한가지 파이어버그 팁. 뭐 이내용도 이미 메뉴얼에 나와있는 내용입니다.

하지만 유용한 팁임에도 모르시는 분들이 꽤나 있을것 같아 이 기회에 소개합니다.

HTML 탭의 우측에 layout 탭을 클릭하면 다음과 같이

내가 선택한 엘리먼트에 대해 여러가지 값들이 시각화되어 나타납니다.

이때 이 수치에 마우스를 클릭하면 텍스트박스로 전환되면서 값을 수정할 수 있게 되는데요

이때 방향키를 위아래로 움직이면 숫자가 1씩 증감이 되고

페이지 업다운 키를 누르면 10단위로 증감이 됩니다.

픽셀완벽주의자들에게 픽셀마스터들에게 있어서 더할수 없이 편한 기능입니다.










번역에 오탈자, 혹은 오역 있는 경우 저에게 말씀해주시면 곧바로 수정하도록 하겠습니다.

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

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

바로 며칠전에 파이어폭스가 2.0.0.12버전으로 업데이트가 되었습니다.

그날이후로 firebug를 사용해서 a태그를 inspect 하려고 하면

HTML탭에서 style탭에 a태그에 적용된 스타일이 보이지 않는 현상이 발생하네요.


버그 눈으로 직접확인하기
http://users.pandora.be/fluppe/Firebug/firefox-linkproblem.html


firefox 2.0.0.12와 firebug 1.05 버전을 쓰고 계신분들은

링크 이동하셔서 firebug를 켜시고 a태그를 inspect 하시면 style 탭에 아무것도 나오지 않음을

확인할수 있습니다.

a뿐만아니라 a 엘리먼트의 자식 엘리먼트 예를 들어 span등도 style에 표시되지 않습니다.


처음에는 설마 firefox가 문제일줄은 모르고 어딘가 CSS파일에 잘못된게 있겠다 싶어서

눈빠지게 찾아봤는데 CSS는 정상이었습니다.


그래서 확인해 보니

버그질라리포팅
구글코드firebug
구글firebug그룹

firefox 2.0.0.12
firebug 1.05

에서 발생하는 에러라는군요. 정확히는 firefox의 PreferenceStyleSheet 관련한 에러라고 하는군요.

버그질라에서는 이미 버그리포팅이 되었고요.

그런데 정확히 언제 수정이 반영되어서 업데이트가 되는지는 언급이 없어서 잘 모르겠군요.

임시방편으로

http://fireclipse.xucia.com 에서

firebug 1.10b 버전을 설치하시면 정상적으로 a 태그 style이 나타납니다.

살다보니 별일도 다있군요.

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

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

웹브라우저 파이어폭스.

물론 다른 출중한 기능들도 많이 있지만

뭐니뭐니해도 다양한 플러그인이 파이어폭스를 더욱 살찌우는것 같다.


오늘은 내가 쓰고 있는 아주 유용한 파이어폭스 플러그인에 대해 소개할까 한다.

사실 욕심쟁이 처럼 저만 알고 쓸려고 했는데 오늘 큰맘먹고 공개합니다.


언급된 플러그인 말고도 포스팅 읽고 계시는 분께서 아주 유용하게 쓰는 플러그인 있으면 소개해주고 가세요.


1. 웹개발의 정점 firebug


자바스크립트를 포함한 ajax는 물론 css, html 및 클라이언트측 웹개발에 너무 유용하게 쓰이는 툴입니다.


파이어버그를 설치한뒤 파이어버그를 실행시키면

위의 이미지와 같이 HTML 구조를 한눈에 쉽게 볼수 있고 우측에는 현재 내가 가르킨 엘리먼트에 적용된

CSS는 물론 레이아웃 형태 DOM까지 볼수 있다.


내가 가르킨 엘리먼트에 해당하는 웹페이지의 영역에 다음과 같이 보기 쉽게 표시도 해준다.

파란색은 실제로 콘텐츠의 영역이고 보라색은 padding 그리고 노란색은 margin영역이 표시되어

한눈에 보기 쉽습니다.

또한 하단 우측의 layout영역에는 엘리먼트의 정확한 픽셀 (offset은 물론 width, height, border, padding, margin) 수치가 나타납니다.


DOM에서는 자바스크립트 개발시에 아주 유용하게 쓸수 있는 정보를 제공함은 물론 디버깅도 아주 쉽습니다.

더 많은 기능을 설명하고 싶지만 다른 유용한 플러그인들이 자기차례를 기다리고 있기때문에 넘어갑니다.

다운로드 : https://addons.mozilla.org/ko/firefox/addon/1843



2. FF 의 렌더링을 IE같이~ IE Tab


예전에 홈페이지(물론 지금도 상당수가 그렇지만) 개발은 대부분 IE에 촛점이 맞추어져

IE식으로 개발되어 IE에서는 정상적으로 보이지만 FF에서 볼때 레이아웃이 흐트러진 모습을 보기도 합니다.

이럴때 아주 요긴하게 쓰이는 IE탭 플러그인 입니다.


주소표시창 바로 왼쪽에 보이는 아이콘이 IE탭인데요. 클릭하면 내가 현재 보고 있는 웹페이지를

IE형식으로 렌더링 해서 보여줍니다.


그럼 아이콘이 다음과 같이 변하는데 이때 한번더 클릭해주면 다시 파이어폭스 렌더링으로 되돌아오고요.

이게 좀 번거롭다고요?


그럴땐 아래와 같이 필터를 적용하면

내가 등록한 웹사이트는 항상 IE형식으로 렌더링 하게끔 해준답니다.



다운로드 : https://addons.mozilla.org/ko/firefox/addon/1419


3. 간단한 CSS Viewer


뭐 거추장 한거 없이 CSS만 확인하기에 딱 좋은 플러그인


IE탭 왼쪽에 보이는것이 CSS 뷰어 플러그인 입니다.

클릭하면 다음과 같이 아이콘이 활성화 되는데요.

이렇게 활성화된 상태에서 웹페이지의 특정영역(엘리먼트)를 가리키게 되면

해당 엘리먼트에 적용된 CSS가 아주 적나라하게 드러납니다.

간단히 CSS만 한눈에 확인하고자 할때 이런 플러그인 만한게 없죠.




다운로드 : https://addons.mozilla.org/ko/firefox/addon/2104



4. N cookies 쿠키에디터


이 플러그인은 아주 쉽게 웹사이트의 쿠키를 생성 및 조작해주는 플러그인입니다.

쿠키란 사용자 컴퓨터안에 해당 사용자의 웹사이트와 관련된 특정 정보가 담겨지는 그런것을 말하는데요.

보통 쿠키는 내가 한번 로그인했던 웹사이트에 다시 방문했을때

내 아이디가 미리 찍혀나와있다거나,

이런 용도로 아주 유용하게 사용할수 있습니다.

이러한 쿠키를 조작하는 플러그인입니다.


N cookie를 실행하면 위와 같은 창이 나타나는데요. 상단의 인풋박스에 웹사이트명을 검색하면

해당 웹사이트가 내 컴퓨터에 저장한 쿠키 목록이 나타납니다.

이 웹사이트에 새로운 쿠키를 생성하고자 할때 하단에 add버튼을 클릭하면

몇가지 정보만 간단히 입력하는 방식으로 손쉽게 쿠키를 생성시킬수 있습니다.

또한 쿠키 조작도 가능합니다.


edit 버튼을 클릭하면 해당 쿠키 내용이 나타납니다.


※ n cookie를 활용한 아주 좋은 팁 :

dcinside는 성인인증이 확인된 사용자의 컴퓨터에

adult_check라는 쿠키를 저장합니다.

그런데 쿠키의 유효기간이 짧아서 다음에 방문하게 되면 또한번 성인인증을 해야하고

이러한 불편함이 있죠.

이때 쿠키의 만료시간을 거의 한참뒤의 시간으로 조작하면

다음방문부터 성인인증을 하지 않아도 성인인증이 된것처럼 작동하게 됩니다.(어린이 여러분 악용하지 마세요)

다운로드 : https://addons.mozilla.org/ko/firefox/addon/573


5. MeasureIt  브라우저속의 자


브라우저속의 자.

한마디로 픽셀계산을 해주는 자(ruler)로 보면 되겠습니다.

설치를 하게되면 브라우저하단 상태표시줄에 자 모양의 아이콘이 생성됩니다.


클릭을 하게 되면 다음과 같이 아이콘이 활성화 되는데요.


그리고 웹페이지에서 영역을 드래그하면 아래와 같이 width와 height를 계산해 준답니다.


다운로드 : https://addons.mozilla.org/ko/firefox/addon/539


6. screen grab 캡쳐


캡쳐 플러그인 입니다.

화면속의 내용을 급하게 캡쳐하고 싶을때 아주 손쉽게 해당영역을 캡쳐할수 있습니다.

설치가 완료되면 브라우저 하단 상태표시줄 우측에 모니터모양의 아이콘이 생성됩니다.

이 아이콘을 클릭하면 몇가지의 메뉴가 나오는데요.

뭐 간단한 영어 되겠습니다.




save메뉴를 선택한뒤 selection 을 선택하고 나면

화면의 색상이 반전되면서 영역을 드래그 할수 있게 됩니다.

드래그가 완료되는 파일이 저장된답니다.

저장되는 파일의 형식은 jpg와 png 파일로 선택할수가 있는데요.

gif로 저장이 안된다는점이 살짝 아쉽긴 하네요.



다운로드 : https://addons.mozilla.org/ko/firefox/addon/1146



7. 색을 뽑아낸다 colorpicker




가끔 포토샵처럼 스포이드로 어떤 부분을 클릭하면 그 부분의 색상코드가 나오는 그런거.

부러우셨죠?

이미 그런 툴을 다운 받아서 설치하셔서 쓰고 계시다고요?

이 플러그인은 컬러픽커(마우스로 클릭한 부분의 색상코드를 알려줌) 의 기능을 하는 플러그인입니다.

설치하면 하단의 상태표시줄 좌측에 스포이드포양의 아이콘이 생성됩니다.

클릭하고 컬러를 뽑아내고 싶은 부분을 클릭하면 끝!

설명은 이만 하고 패스~


다운로드 : https://addons.mozilla.org/ko/firefox/addon/271



8. 아직죽지 않았다 web developer



이 툴 역시 개발자에게 아주 유용한 툴입니다.

firebug가 나타나서 위상이 많이 떨어졌지만 그래도 유용한 web developer 입니다.

css를 끄거나 쿠키를 모두 삭제하거나 페이지의 그리드를 본다거나

페이지의 정보를 본다거나, 브라우저의 사이즈 조절, 이미지 모두 끄기

아무튼 잡다한 모든 기능이 다들어있습니다.

참고 : Ctrl + Shift + h 사뿐히 눌러주시면 해당페이지의 validation 을 체크합니다~
Ctrl + Shift + h는 url을 통해서 w3c validator로 페이지의 validation을 체크하는데요.
보안이 요구되어 외부의 w3c validator가 접속할수 없는 페이지의 HTML validation을 체크하려면
Ctrl + Shift + A 를 누르시면 해당 웹페이지의 HTML이 w3c validator로 전송이 되어
validation 체크를 하실수 있습니다.


다운로드 : https://addons.mozilla.org/ko/firefox/addon/60



9. HTML소스를 좀더 보기 쉽게 View Source
Chart

플러그인을 설치하시면 페이지에서 마우스 우측 버튼 클릭시에

소스차트보기 라는 메뉴가 추가됩니다.

이 메뉴를 클릭하면 아래의 사진과 같이


해당 페이지의 소스코드가 엘리먼트 별로 parent와 child가 아주 잘 구분되어서 보여집니다.

다운로드 : https://addons.mozilla.org/ko/firefox/addon/655




이상 제가 사용하고 있는 아주유용한 파이어폭스 플러그인을 소개해드렸습니다.

이 말고도 개인적으로 사용하는 플러그인이 5~6개 정도 더 있는데요.

파이어폭스의 확장기능을 검색해서 보시면

ftp는 물론 다운로드에 관련된것, 비디오, 오디오, 플래시는 물론 각종 유용한 플러그인이 많이 있답니다.


파이어폭스 확장기능  https://addons.mozilla.org/ko/firefox/

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

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

YSlow는 야후의  웹사이트의 high performance 룰에 의거해 웹페이지 분석을 해준다.

firefox의 초강력 애드온인 firebug와 통합된 개발툴이다.

firefox addon YSlow 다운로드

YSlow는

퍼포먼스 리포트
HTTP/HTML 요약
페이지에 사용된 컴포넌트 리스트
JSLint를 포함한 툴

을 제공한다.

1. Make Fewer HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires Header
4. Gzip Components
5. Put CSS at the Top
6. Move Scripts to the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags
14. Make Ajax Cacheable

목차를 보면 알수 있듯이 HTTP request, header, gzip, css, js, dns, etag, cache 등

개발 전반에 걸친 방법론을 제시하고 있다.

바로 YSlow는 이 내용에 기반한 분석툴이다.


이 부분까지 언급하면 내용이 자칫 너무 길어질수 있으니

이 14개 항목에 대해서는 다음기회에 언급하도록 하고


YSlow에 대해서 알아보도록 하겠다.



설치를 완료하면 firebug의 제일 끝자락에 YSlow라는 메뉴가 생긴것을 볼수 있다.

YSlow탭에 들어가면

performance, stats, components, tools, help 메뉴가 있다.

제일 첫번째 메뉴인

performace를 클릭하면

YSlow는 웹페이지를 분석하기 시작한다.

분석이 끝나면 위의 그림과 같이 분석결과를 보여준다.

각 항목별로 A부터 F까지의 등급을 적용해 보여주고

총등급도 보여주고 있다.

위 사진의 결과 F등급은 네이버의 퍼포먼스를 조회해본 결과이다.



그럼 이 툴은 내놓은 야후는 어떨까?

야후코리아의 퍼포먼스를 검색해보니


F등급의 네이버와 달리 B등급이 나왔다.


두번째 메뉴인 stats 에서는 cache정보와 cooke 정보를 보여준다.

(야후에서는 cache를 하여 http request를 줄이는 방법이 를 웹사이트의 퍼포먼스를 높이는 아주 좋은 방법이라고 말하고 있다)


다음은 components 메뉴

js, css, flash, css로 사용된 이미지, 콘텐츠로사용된 image, html, iframe등

해당 페이지내에 사용된 모든 컴포넌트들을 보여주고 있다.

또한 expires와 etag 를 보여줌으로서

역시 cache의 중요성을 강조하고 있으며

gzip 여부도 함께 보여줘 gzip의 중요성도 강조하고 있다.



tools 메뉴는 문법검사라던지 사용된 js와 css를 보여준다.


그중 printable View 메뉴는



위와 같이 보고서 형식으로 웹사이트 분석 결과를 알려주고 있다.


YSlow는 웹사이트의 성능 분석을 하는 보조적인 툴로 아주 유용한 도구임에는 틀림없다.

물론 DB query최적화라던지 효율적인 DB설계, 효율적인 알고리즘 역시 중요한 요소이겠지만

이뿐만 아니라 다른 여러가지 요소도 웹사이트의 퍼포먼스를 결정짓는 중요한 요소이다.


다음 기회에 야후에서 말하는 웹사이트 퍼포먼스 향상 방안 14가지에 대해서 다뤄보도록 하겠다.

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

</