태그 보관물: 불여우

파이어폭스 16의 새기능 개발자 도구 모음

파이어폭스 16에 새로운 기능이 추가되었습니다.

메뉴의 도구 -> 웹 개발 도구 -> 개발자 도구 모음 을 선택합니다.
브라우저 하단에 명령창과 웹 콘솔, 문서 검사, 스크립트 디버거가 나타납니다.

명령창에 help 를 입력하면 위와 같이 사용 가능한 명령들이 나타납니다.

 

위 스크린샷은 help screenshot 을 입력한 모습 입니다.

재밌어 보이는 이 기능은 알고보면 엄청 좋은 기능 입니다.
여러분들이 개발하는 과정에서 여러번 반복해야 하는 일을 명령어 복사/붙여넣기로 반복 수행 할 수 있습니다.

예로 특정 쿠키를 지우고 싶다면 아래의 명령어로 지울 수 있습니다.

>> cookie remove KEY

그런데 아직 버그가 있는지 쿠키가 지워지지는 않더군요.
앞으로 이 기능이 발전하면 명령어로 파이어폭스를 다양하게 제어할 수 있을 것 입니다.

* 파이어폭스 16 릴리즈 노트: https://www.mozilla.org/en-US/firefox/16.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.0b2pre 리뷰

올블로그에서 웹초보님의 ‘파이어폭스 4.0 pre-beta 버전 릴리즈 :: 탭 위치 변경, 메뉴 버튼..‘ 글을 읽고 저도 파이어폭스 4.0b2pre 다운받아 우분투에서 사용해봤습니다.

요즘 두각받기 시작하는 HTML5로 인해 파이어폭스4에 대한 기대가 큽니다.
Firefox 4 비전: fast, powerful, and empowering

UI가 크롬과 비슷해졌다고 해서 두근두근 실행해봤는데 “헉! 거의 변화가 없어~ ㅠㅠ

변화가 없어 급좌절하고 있었는데 못보던 메뉴를 발견했습니다.

메뉴에서 ‘보기 -> 툴바 -> 탭을 위로’를 선택하면 짜잔~! 아래와 같이 바뀝니다. ^^

기본으로 북마크 툴바는 숨겨져 있고 우측 끝에 있는 별모양 책은 북마크 관련 도구가 있습니다.

 

설정에 특이한 변화는 없습니다.


위 스크린샷에서 탭을 보시면 파비콘이 나오는 위치에 로딩 진행상황이 표시되는 것을 보실 수 있습니다.
이전에는 빙글빙글 로딩되는 모습만 보였는데 이제는 얼만큼 로딩되었는지 확인 할 수 있어서 편리해졌습니다. ^^


부가기능 페이지 입니다.
이제는 이렇게 탭으로 뜨네요.
새창으로 뜨던 것 보다 편리한 것 같습니다.


웹개발자를 위한 ‘Heads Up Display’ 라는 것이 생겼습니다.
긴 설명 필요없이 아래 스크린샷을 보시면 이해가 됩니다. ^^

웹페이지 위에 콘솔 로그들이 출력되는 것을 볼 수 있습니다.
뿐만 아니라 아래쪽에 입력란이 있는데 이곳에 자바스크립트를 입력 할 수 있습니다.

제가 자바스크립트를 입력하여 현재 띄워져 있는 구글 페이지의 색상을 바꾸고 경고창도 띄웠습니다.
아마 자바스크립트 입력 말고도 다양한 활용법이 있을 것 같습니다. ^^


북마크 관리도 크게 달라진 점은 없습니다.

HTML5 테스트를 ‘파이어폭스 3.6.6, 파이어폭스 4.0b2pre, 크로미움 6.0.466.0‘에서 실행해봤습니다.


HTML5 지원이 파이어폭스 4.0b2pre가 이전 버전보다 나아졌지만 아직 크로미움 보다는 부족하군요.
저는 크로미움을 우분투 저장소에 넣어서 수시로 업데이트 하고 있습니다.
파이어폭스4 정식버전에서 HTML5를 마음껏 쓸 수 있다면 좋겠습니다. ^^


PS. 이 글은 파이어폭스 4.0b2pre에서 작성하였는데 오류없이 글 작성을 완료했습니다.
베타버전이지만 안정적인게 쓸만 한 것 같습니다. ^^)b