mozilla
검색 결과

    파이어폭스 개발자 도구

    HTML, CSS 그리고 자바스크립트를 데스크탑이나 모바일에서 확인해 보거나, 편집, 혹은 디버깅 합니다.
    Firefox Developer Edition 설치 하기

    파이어 폭스 개발자 에디션의 새로운 기능은 무엇입니까?

    파이어폭스 개발자 에디션은 개발자들을 위한 파이어폭스의 맞춤형 버전이며, 최신 버전 파이어폭스의 모든 기능과, 실험용 개발자 도구를 포함합니다. 현재 파이어폭스 개발자 에디션에서 제공되는 기능은 다음과 같습니다.

    아이디어 공유하기

    아이디어 공유하기

    개발자 도구들의 새로운 기능을 제안하거나 다른 개발자들이 제안한 아이디어에 투표하세요.

    만들기

    웹사이트나 웹 애플리케이션을 위한 저작 도구입니다.

    스크래치패드 | Scratchpad
    자바스크립트를 작성하고 실행해볼 수 있는 파이어폭스에 내장 편집기입니다.
    스타일 편집기 | Style Editor
    현재 페이지의 CSS 스타일을 보거나 편집합니다.
    셰이더 편집기 | Shader Editor
    WebGL이 사용하는 버텍스나 부분 셰이더를 열어보고 편집합니다.
    웹 오디오 편집기 | Web Audio Editor
    오디오 컨텍스트에 있는 오디오 노드 그래프를 검사하거나 매개변수를 수정합니다.

    탐색 및 디버깅

    웹사이트나 웹 애플리케이션을 검사하고, 탐색하거나 디버깅 합니다.

    웹 콘솔 | Web Console
    웹 페이지의 로그 메세지를 확인하거나, 자바스크립트를 사용하여 페이지와 상호 작용합니다.
    페이지 인스펙터 | Page Inspector
    페이지의 HTML과 CSS를 보거나 수정할 수 있습니다.
    자바스크립트 디버거 | JavaScript Debugger
    페이지의 자바스크립트 실행을 멈추거나, 단계별로 검사 혹은 수정할 수 있습니다.
    네트워크 모니터 | Network Monitor
    페이지를 로드 할 때 어떤 네트워크 요청이 일어나는지 확인하세요.
    스토리지 인스펙터 | Storage Inspector
    페이지에 존재하는 쿠키, 로컬 저장소, indexedDB 및 세션 저장소를 검사합니다.
    개발자 도구 | Developer Toolbar
    개발자 도구를 위한 커맨드라인 인터페이스입니다.
    3D 뷰 | 3D View
    페이지를 3차원으로 시각화 하여 보여줍니다.
    아이드롭 | Eyedropper
    페이지에서 색상을 선택하세요.
    iframe 작업
    컨텐츠가 어떤 iframe에서 표시될지 결정하세요.

    Mobile

    모바일 개발을 위한 도구입니다.

    앱 매니저 | App Manager
    Firefox OS용 애플리케이션을 설계하고 개발하세요.
    웹 통합 개발 환경 | WebIDE
    App Manager를 Firefox 33 이후로 계속 사용할 수 있도록 한 대체품입니다.
    파이어폭스OS 시뮬레이터 | Firefox OS Simulator
    파이어폭스OS가 설치된 디바이스 없이도 데스크탑에서 Firefox OS용 애플리케이션을 실행하고 디버그 할 수 있습니다.
    반응형 디자인 뷰 | Responsive Design View
    브라우저 창의 크기를 변경하지 않고도 여러분의 웹사이트나 애플리케이션이 다른 크기의 스크린에서 어떻게 보이는지 확인할 수 있습니다.
    안드로이드용 파이어폭스에서 디버깅
    안드로이드용 파이어폭스와 연결하여 디버깅 할 수 있는 개발 도구입니다.
    발란스 | Valence
    iOS의 사파리나 안드로이드의 크롬과 연결하여 디버깅 할 수 있는 개발 도구입니다.

    Performance

    성능 문제를 진단하고, 개선합니다.

    성능 도구 | Performance tool
    개선된 자바스크립트 프로파일러와 프레임레이트 타임라인을 제공합니다.
    자바스크립트 프로파일러 | JavaScript Profiler
    여러분의 자바스크립트 코드에서 어느 부분이 많은 시간을 소요하는지 알아보세요.
    페이지 업데이트 표시 도구 | Paint Flashing Tool
    이벤트를 통해 페이지가 업데이트 된 부분을 눈에 띄게 표시해 주는 도구입니다.
    리플로우 이벤트 로깅 | Reflow Event Logging
    웹 콘솔에서 페이지의 리플로우 이벤트가 발생했는지 확인할 수 있습니다.
    네트워크 성능 | Network Performance
    페이지가 로딩될 때 많은 시간이 소요되는 부분을 점검하세요.

    브라우저 디버깅하기

    보통의 경우, 개발자 도구는 웹 페이지나 웹 애플리케이션을 디버깅 하지만 브라우저에 연결하여 브라우저나 애드온 프로그램 개발에 유용하게 사용할 수도 있습니다.

    브라우저 콘솔 | Browser Console
    브라우저나 애드온 프로그램에서 발생한 로그 메시지를 확인하세요. 페이지에서 직접 자바스크립트 코드를 실행할 수도 있습니다.
    브라우저 툴박스 | Browser Toolbox
    브라우저에 개발자 도구를 추가하세요.

    개발자 도구 확장하기

    개발자 도구는 확장이 용이하도록 디자인 되었습니다. 파이어폭스 애드온은 기존의 도구를 확장하거나 새로운 도구를 추가하기 위한 컴포넌트 및 개발자 도구를 다룰 수 있으며, 원격 디버깅 프로토콜을 통해 여러분만의 도구를 사용해 웹사이트를 디버그 하거나, 혹은 파이어폭스에서 다른 디바이스를 디버그 하는 여러분만의 클라이언트나 서버를 구현할 수도 있습니다.

    원격 디버깅 프로토콜 | Remote Debugging Protocol
    원격 디버깅 프로토콜은 파이어폭스 개발자 도구가 파이어폭스나 파이어폭스OS 장치로 연결할 수 있게 해줍니다.
    코드 편집기 | Source Editor
    여러분이 개발한 애드온 프로그램에 파이어폭스 코드 편집기를 내장할 수 있습니다.
    디버그 인터페이스 | The Debugger Interface
    작성한 자바스크립트 코드의 실행 결과를 관찰할 수 있는 API입니다. 파이어폭스 개발자 도구는 이 API를 사용해서 자바스크립트 디버거를 만들었습니다.
    웹 콘솔 아웃풋 커스터마이징
    브라우저 콘솔웹 콘솔을 커스터마이징 하는 방법을 알아보세요.

    그 외의 리소스

    이 섹션의 리소스들은 모질라 개발자 도구 팀에서 제공하는 것이 아니지만 웹 개발자들에게 잘 알려진 것들이며, 이 중에는 파이어폭스 애드온 프로그램에 포함된 것도 있습니다. 전체 목록을 보려면 addons.mozilla.org 사이트의 "Web Developer" 카테고리를 확인하세요.

    Firebug
    매우 잘 알려진 강력한 웹 개발 도구이며, 자바스크립트 디버거 및 HTML과 CSS뷰어, 그리고 네트워크 모니터를 포함합니다.
    DOM Inspector
    웹 페이지의 DOM이나 XUL 윈도우를 탐색하고 편집하며, 점검해 볼 수 있는 도구입니다.
    Web Developer
    다양한 웹 개발 도구를 브라우저의 메뉴나 툴바에 추가하세요.
    Webmaker Tools
    웹 개발을 시작하는 사람들을 위한 도구 모음입니다. 모질라에서 개발된 도구들로 이루어져 있습니다.
    W3C Validators
    W3C 웹사이트는 여러분의 HTMLCSS를 포함한 웹사이트 정합성을 확인하는 여러 도구들을 제공하고 있습니다.
    JSHint
    자바스크립트용 코드 분석 도구입니다.

    Join the Developer tools community

    Choose your preferred method for joining the discussion: