유틸리티 Mozilla Firefox Developer Edition 46.0a2
2016.01.29 07:42
파이어폭스가 웹 개발자용 에디션을 따로 만들었네요.
파이어폭스에 Firebug를 설치해서 개발해도 되겠지만 따로 개발자용 에디션이 따로 나왔으니 한 번 써보는 것도 나쁘지 않을 것 같습니다.
사무실에도 어제 설치해서 자세한 설명은 못드리겠으나 매니안에도 올리면 괜찮을 것 같다는 생각에 직접 캡처해서 올려봅니다.
개발자를 위한 브라우저
개발자를 위해 만들어진 Firefox Developer Edition은 개발자의 작업 흐름을 염두에 두고 만들어 졌습니다. 지금부터는 빌드와 테스트, 측정을 한곳에서 해보세요.
모든 브라우저 디버깅
Valence를 사용해서 모든 브라우저나 기기에서 검사와 디버깅을 하세요 — Firefox Developer Edition에 미리 설치되어 있는 강력한 확장기능입니다.
완벽한 픽셀 맞춤
반응형 디자인 보기 기능으로 화면 크기를 맞추고 미리 탑재되어 있는 스타일 편집기로 CSS를 바로 수정하면 완벽한 필셀 맞춤이 쉬워집니다.
유용하고 다양한 개발 도구
Firefox Developer Edition은 한곳에서 다양한 플랫폼을 테스트 할 수 있는 새로운 개발 도구와 핵심 개발도구를 제공합니다. 이미 익숙한 기능들이고 기능이 개선되었습니다. Firefox에만 있습니다.
시각적 편집 도구
검사 패널로 부터 페이지에 있는 HTML 및 CSS에 대한 시각적인 편집이 가능합니다. 위치, 두께 등 각 요소의 측정을 할 수 있습니다.
개발 도구 콘테스트
창의성을 높이고 다양한 아이디어를 탐험하기 위해 CSS 편집 도구 및 시각적 애니메이션 기능을 개발자 버전에서 확인해 보세요.
성능을 위한 도구
통합 타임라인에서 웹 콘텐츠의 프레임 재생 횟수나 메모리 사용량, JS 프로파일을 살펴보고 성능의 병목 지점을 쉽게 찾고 해결할 수 있습니다.
페이지 검사기
웹 페이지의 HTML과 CSS를 살펴보고 페이지의 구조와 레이아웃을 쉽게 변경해 보세요.
웹 오디오 편집기
원하는 대로 모든 오디오 노드가 연결될 수 있도록 실시간으로 Web Audio API를 검사하고 활용해 보세요.
웹 콘솔
웹페이지와 연관된 로그 정보를 살펴보고 JavaScript로 웹 페이지를 다루기 위해서 웹 콘솔을 사용해 보세요.
JavaScript 디버거
버그를 추적하기 위해서 JavaScript Step through JavaScript code and examine or modify its state to help track down bugs.
네트워크 모니터
브라우가 요청하는 모든 네트워크를 보고 개별 네트워크에 걸리는 시간과 상세 내용을 확인해 보세요.
스타일 편집기
웹페이지에 연관되어있는 CSS 스타일을 보고 편집할 수 있고 새로 만들거나 기존 CSS 스타일 시트를 임의의 페이지에 적용할 수 있습니다.
반응형 디자인 보기
브라우저 창 크기를 바꾸지 않고서도 서로 다른 해상도에서 웹사이트나 웹앱이 어떻게 보이는지 확인할 수 있습니다.
WebIDE
App Manager를 대체하는 이 도구를 이용해서 브라우저나 Firefox OS 기기에서 직접 Firefox OS 앱을 개발하고 배포, 디버깅 할 수 있습니다.
Valence
Firefox Developer Edition에 기본으로 설치되어 있는 강력한 확장기능으로 다양한 브라우저와 기기에서 앱을 개발하고 디버깅하세요.
공식 사이트: https://www.mozilla.org/ko/firefox/developer/