firfox_dev_screenshot

Firefox Developers Edition이 공식 발표가 되었다!
필자가 조금 살펴본 결과 확실히 대단한 개발툴이 틀림이 없어서 이렇게 소개를 하려고 하고 있다.
아직 한국어버전이 안나왔기 때문에 다소 어려움이 느낄 수 있는데… 간단하게 소개를 해보려고 한다.

설명: https://hacks.mozilla.org/2014/11/mozilla-introduces-the-first-browser-built-for-developers-firefox-developer-edition/
다운받기: https://www.mozilla.org/en-US/firefox/developer/

대표적인 기능

  • WebIDE

    유투브 동영상 보기 유투브 동영상 보기
    WebIDE 자세히보기
    개발, 배포 할 수 있으며 디버그 웹 브라우저에서 바로 앱, 또는 파이어 폭스 OS 장치.
    템플릿 (단지 웹 응용 프로그램!) 새로운 파이어 폭스 OS의 응용 프로그램을 작성하거나 기존 응용 프로그램의 코드를 열 수 있다.
    거기에서 응용 프로그램의 파일을 편집 할 수 있다.
    그것은 개발자 도구를 디버깅하는 하나의 시뮬레이터에서 응용 프로그램을 실행을 클릭하고 하나 더 있다.

  • Responsive Design View

    유투브 동영상 보기 유투브 동영상보기
    Responsive Design View 자세히보기
    웹 사이트 또는 웹 응용 프로그램이 브라우저 창 크기를 변경하지 않고 다른 화면 크기에 모양을 참조하면 된다.

  • Valence

    유투브 동영상 보기 유투브 동영상보기
    Valence 자세히 보기

  • 웹 오디오 편집(Web Audio Editor)

    유투브 동영상 보기 유투브 동영상보기
    Web Audio Editor 자세히 보기

    검사하고 모든 오디오 노드가 예상대로에 연결되어 있는지 확인하기 위해 실시간으로 웹 오디오 API와 상호 작용한다.

  • 페이지 검사기(Page Inspector)

    유투브 동영상 보기 유투브 동영상보기
    페이지 검사기 자세히 보기

    임의의 웹 페이지의 HTML 및 CSS를 검사하고 쉽게 페이지의 구조와 레이아웃을 수정할 수 있다.

  • 웹 콘솔(Web Console)

    유투브 동영상 보기 유투브 동영상보기
    Web Console 자세히 보기

    웹 페이지와 관련된 로그온 정보를 참조하고 웹 콘솔을 사용하여 자바 스크립트를 이용하여 웹 페이지와 상호 작용한다.

  • 자바스크립트 디버거(JavaScript Debugger)

    유투브 동영상 보기 유투브 동영상보기
    자바스크립트 디버거 자세히 보기

    자바 스크립트 코드를 단계별로 및 검사하거나 버그를 추적하는 데 도움이 상태를 수정할 수 있다.

  • 네트워크 모니터(Network Monitor)

    유투브 동영상 보기 유투브 동영상보기
    네트워크 모니터 자세히 보기

    각각의 요청을 받아 각 요청의 세부 사항 시간을 브라우저가 만드는 모든 네트워크 요청을 참조할 수 있다.

  • 스타일 에디터(Style Editor)

    유투브 동영상 보기 유투브 동영상보기
    스타일 에디터 자세히 보기

    웹 페이지와 관련된보기 및 편집 CSS 스타일, 새로 생성하고 모든 페이지에 기존 CSS 스타일 시트를 적용합니다.

      Windows OS X Linux
    Go to line Ctrl + J Cmd + J Ctrl + J
    Find in file Ctrl + F Cmd + F Ctrl + F
    Find again Ctrl + G Cmd + G Ctrl + G
    Select all Ctrl + A Cmd + A Ctrl + A
    Cut Ctrl + X Cmd + X Ctrl + X
    Copy Ctrl + C Cmd + C Ctrl + C
    Paste Ctrl + V Cmd + V Ctrl + V
    Undo Ctrl + Z Cmd + Z Ctrl + Z
    Redo Ctrl + Shift + Z / Ctrl + Y Cmd + Shift + Z / Cmd + Y Ctrl + Shift + Z / Ctrl + Y
    Indent Tab Tab Tab
    Unindent Shift + Tab Shift + Tab Shift + Tab
    Move line(s) up Alt + Up Alt + Up Alt + Up
    Move line(s) down Alt + Down Alt + Down Alt + Down
    Comment/uncomment line(s) Ctrl + / Cmd + / Ctrl + /

스크린샷

firfox-dev-screenshot02