태그 보관물: Firefox

파이어폭스 15의 개발도구

# 요소검사 레이아웃 정보

이번 버전에 요소검사에 파이어버그 처럼 레이아웃 정보를 보여주는 기능이 추가되었습니다.

이로써 요소검사 기능은 파이어버그와 비교해서 부족하지 않은 것 같습니다.

 

# 스타일 에디터

광범위한 CSS 편집 및 테스트는 스타일 에디터가 좋은 것 같습니다.

새로운 스타일 생성하거나 가져올 수 있으며 눈모양 아이콘으로 해당 스타일을 활성/비활성 할 수 있습니다.

 

# 요소의 :hover, :active, :focus 상태 유지

:hover와 같은 스타일은 마우스를 올려야 볼 수가 있는데 선택한 요소의 :hover, :active, :focus 상태를 유지시키는 기능이 있습니다.

 

# 반응형 웹 디자인 보기

요즘 관심받고 있는 반응형 웹 디자인을 위한 도구가 추가되었습니다.

기존에는 브라우저 크기를 직접 조절하면서 모습을 확인해야 했습니다.

수동 크기 조절 및 회전하기 기능도 있어서 모바일 페이지 제작이 많이 편리해졌습니다.

 

# 스크립트 디버거

드디어 자바스크립트 디버깅 도구가 추가되었습니다.

하지만 아직은 파이어버그에 비해서 기능도 부족하고 불편합니다.

좀 더 개선될때까지 주력 디버거로 쓰기는 어려울 것 같습니다.

 

# 파이어폭스 15 릴리즈 노트

https://www.mozilla.org/en-US/firefox/15.0/releasenotes/

파이어폭스 11의 새로운 개발도구 – 3D view

파이어폭스의 인기가 예전같지 않아서 새로운 웹개발도구에 대한 이야기도 잘 보이지 않습니다.
저는 여전히 파이어폭스를 메인 브라우저로 사용하며 항상 새로운 기능을 접하지만 이렇게 블로그 포스팅과 같은 적극적인 소개는 잘 하지 않게 되네요.

파이어폭스의 대중적 인기는 줄었어도 진정 웹을 생각하는 웹개발자의 브라우저는 파이어폭스라고 자신있게 말 할 수 있습니다. ^^

위 스크린샷은 파이어폭스 10부터 등장한 개발도구인데 보통 파이어버그를 쓰다보니 파이어폭스를 쓰면서도 못본분들도 있으실겁니다. ^^;
그동안 발전되어온 파이어폭스 개발도구 소개를 동영상으로 확인하세요.

그리고 이번 파이어폭스 11에서 기존 문서 검사 도구에 3D view가 추가되었습니다.

문서의 구조를 이렇게 3D로 확인 할 수 있습니다.
3D 게임처럼 마우스로 확대/축소, 회전, 이동이 가능합니다.
키보드로도 조작 할 수 있습니다.

Function Keyboard Mouse
Zoom in/out + / – Scroll wheel up/down
Rotate left/right a / d Mouse left/right
Rotate up/down w / s Mouse up/down
Pan left/right ← / → Mouse left/right
Pan up/down ↑ / ↓ Mouse up/down

각각의 3D 블럭들은 태그별로 다른 색상을 가지고 있습니다.
테이블은 붉은색으로 표시되다보니 테이블 레이아웃으로 구성된 페이지를 보면 새빨갛습니다.

3D 보기는 단순히 눈요기 효과가 아닌 레이아웃 구성이나 계층을 시각적으로 보여주기 때문에 분석은 물론 HTML과 CSS를 가르칠때도 유용합니다.
한눈에 해당 웹페이지의 레이아웃이 잘구성되었는지 여부를 가늠할 수 있습니다.

실제 실행해봐도 버벅이지 않고 무척 부드럽게 동작합니다.

저도 아직은 파이어버그를 주로 사용하고 있습니다.
앞으로는 파이어폭스에 기본으로 제공되는 도구도 적극 활용해볼 생각 입니다. ^^

파어이폭스4 베타에서 웹개발해도 될듯

파이어폭스 부가기능

그동안 파이어폭스3와 파이어폭스4 베타 Minefield를 같이 사용했습니다.

오늘 혹시나해서 부가기능을 확인해보니 중요한 부가기능들이 파이어폭스4 베타를 지원하더군요.

일단 파이어버그만 설치되도 웹개발하는데 문제 없습니다.

Xmarks로 파이어폭스 뿐만 아니라 사파리 크롬까지 모든 브라우저 북마크 동기화가 가능 합니다.

그리고 CPU 점유율 높은 플래시 광고는 애드블럭이 차단해주니 제게 필요한 모든 기능은 갖춰졌습니다.

이제 파이어폭스3는 그만쓰고 파이어폭스4만 써야겠습니다. ^^