태그 보관물: 파폭

파이어폭스 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.0b6pre

요즘 구글 크롬과 관련된 소식보다 파이어폭스에 대한 소식이 적어서 안타깝습니다.

저는 파이어폭스 0.9버전부터 지금까지 주력 브라우저로 파이어폭스를 사용하고 있습니다.
가벼움은 크롬에게 밀리지만 안정성과 다양한 플러그인은 버릴 수 없는 매력 입니다.

지난번에 올린 파이어폭스 4.0b2pre 리뷰에 이어서 새롭게 추가된 기능을 4.0b6pre를 바탕으로 소개하겠습니다.


HTML5 테스트 점수

HTML5 테스트가 지난번(4.0 b2pre) 189점에서 214점으로 크게 올랐습니다.
아직은 지원하지 않는 HTML5용 폼객체가 많습니다.
정식 버전이 나올때쯤이면 모두 구현되길 기대합니다.

새롭고 강력한 탭 기능 – 탭 그룹

새로운 탭기능은 파이어폭스4의 새로운 기능중 정말 제 마음에 쏙 드는 기능입니다.

탭 우측 끝을 보면 특이한 모양의 버튼이 보입니다.
이 버튼을 누르면 탭 그룹이라는 놀라운 기능이 실행됩니다.

현재 자신이 띄워놓은 탭들이 사각영역에 그룹이 되어 표시가 됩니다.
탭 그룹안의 섬네일을 클릭하면 다시 원래의 모습으로 탭이 표시됩니다.
아직은 어떤 장점이 있는지 감이 안오시죠? 스크린샷을 좀 더 보겠습니다.


탭 그룹 안에 있는 탭의 위치를 바꿀 수 있습니다.
그리고 탭 그룹을 여러개 만들 수 있고 탭 그룹 상단에 그룹 이름을 설정할 수 있습니다.

저는 자주 방문하는 사이트는 브라우저를 재시작 하더라도 탭으로 유지시켜서 항상 많은 탭이 떠있습니다.
그래서 해결책으로 파이어폭스와 크롬 2개의 브라우저를 사용해서 탭을 그룹화하고 있었습니다.
하지만 이제 파이어폭스4의 탭 그룹 기능을 이용하면 업무, 놀이 등 연관된 탭을 분류해서 쓸 수 있습니다.


탭이 길면 작게 만들자 – 앱 탭으로 만들기


탭에 마우스 우측 버튼을 클릭하면 ‘앱 탭으로 만들기’라는 메뉴가 있습니다.
이것을 선택하면 탭의 글씨가 사라지고 파비콘만 남습니다.
그리고 앱 탭은 무조건 일반 탭보다 왼쪽에 위치하게 됩니다.

우분투에서의 스크린샷과 맥에서의 스크린샷이 섞여 있습니다.
인터페이스에 혼동이 있지 않으면 좋겠습니다. ^^


북마크, 방문기록, 비밀번호, 설정, 탭 동기화

파이어폭스 우측 하단에 처음보는 아이콘이 생겼습니다.
딱 봐도 동기화라는 느낌이 드는 아이콘 입니다.

동기화 아이콘을 클릭하면 동기화 설정창이 뜹니다.
기존에 처음 동기화를 이용하는 것인지 기존에 동기화를 이용했었는지 선택합니다.

동기화를 처음 이용하는 것이라면 파이어폭스 동기화 서버에 계정을 등록해야 합니다.
개인이 운영하는 동기화 서버를 이용할 수도 있습니다.

모든 설정을 완료하면 우측 하단의 동기화 아이콘이 빙글빙글 돌면서 서버와 동기화 합니다.

제 우분투의 파이어폭스4의 정보를 맥북의 파이어폭스4와 동기화 해봤습니다.
우분투에서 쓰던 파이어폭스4의 북마크, 방문기록, 비밀번호, 설정은 동기화가 되었습니다.
여기서 한가지 더 중요한 사실은 탭의 동기화 입니다.

탭이 여러개 떴을때 탭을 선택하는 버튼에 ‘타 컴퓨터 탭 이용 정보‘라는 것이 생겼습니다.
이것을 선택하면 아래와 같이 제가 우분투에서 사용했던 탭 목록을 이용할 수 있습니다.

아직 파이어폭스4의 변화는 끝나지 않았습니다.
지금 파이어폭스4 베타 버전을 쓰셔도 기본 기능을 사용하는데는 별다른 문제가 없을 정도로 안정적입니다.

파이어폭스 많이 사랑해주세요. ^^