Whiteship's Note

[파이어폭스 플러그인] 파이어버그 짱인듯...

Good Tools : 2009.08.11 21:15


요즘 봄싹에서 개발을 하다보니(참... 봄싹은 개발 업체가 아니라 스터디입니다.) 재밌는 것이 있는데, 여러 툴 사용법을 익힐 수 있다는 겁니다. 파이어버그가 좋은 줄은 알고 있었지만, 사용법을 제대로 익혀본적이 없어서 어떻게 써먹는 줄 몰랐는데.. 이번 기회에 유용한 기술을 몇 개 습득했습니다.

1. 레이아웃 미리 조정해보기

레이아웃은 float등으로 띄우고 나서 margin, padding, border로 조정할 수 있는데 border야 뭐.. 그렇다 치고.. margin이랑 padding을 주로 사용해서 레이아웃을 조정합니다. 이 때, JSP나 CSS를 조금 바꾼 담에 브라우저에서 릴로딩해서 보고, 다시 또 수정해서 다시 브라우저가서 릴로딩 하고.. 이런 일을 반복하기 일수인데, 파이어버그를 써서 미리 화면이 어떻게 바뀌는지 조정해서 적당한 값을 알아낼 수 있습니다.


오른쪽 아래에 보이는 레이아웃 창에서 숫자를 클릭해서 조정하면 곧바로 화면에 띄워져 있는 박스들의 위치가 바뀝니다. 캬~~ 멋져요 멋져.

2. 자바스크립트 미리 실행해보기


두번째로 유용하게 쓰고 있는 기능은 '콘솔' 너무 막연해서 뭔지 몰랐는데 여개다가 자바스크립트를 입력해서 미리 실행해 볼 수 있었습니다. 위 화면에서는 복잡한 selection을 하는 제이쿼리를 미리 실험해본 화면입니다.

3. net

왔다 갔다 하는 요청/응답 헤더와 내용을 볼 수 있어서 유용합니다. 스샷은 생략~

IE 8부터는 파이어버그 같은 프로그램이 포함되어 있다던데.. 어떨런지 모르겠습니다. 수수료만 안 붙는다면 10달러 정도 기부하고 싶어지네요.

top

  1. Favicon of http://blog.outsider.ne.kr BlogIcon Outsider 2009.08.12 10:08 PERM. MOD/DEL REPLY

    파이어버그 정말 최고죠....
    IE8의 개발자도구도 이전 IE의 개발도구 지원에 비하면 정말 괜찮아 지긴 했지만 파이어버그정도의 수준을 기대하시면 실망하실듯 합니다. ㅎ

    Favicon of http://whiteship.me BlogIcon 기선 2009.08.12 11:00 PERM MOD/DEL

    넹 그렇군요.
    IE8은 아직 설치도 안했네요.ㅋ

  2. Miracle 2009.08.12 12:53 PERM. MOD/DEL REPLY

    이제 firebug 없는 화면단 개발은 생각도 하기 싫어요...

    Favicon of https://whiteship.tistory.com BlogIcon 기선 2009.08.12 13:27 신고 PERM MOD/DEL

    넹..ㅎㅎ 형 덕분에 제이쿼리랑 파이어버그 잘 쓰고 있어요.

Write a comment.




: 1 : ··· : 33 : 34 : 35 : 36 : 37 : 38 : 39 : 40 : 41 : ··· : 186 :