Firefox 개발자 도구에 대해 알아야 할 모든 것

Firefox 개발자 에디션은 개발자를 위해 맞춤 제작된 Firefox의 특별 버전입니다. 다양한 전문 개발자 도구와 함께 최신 Firefox 기능을 모두 갖추고 있습니다. 여기에서 Firefox 개발자 도구에 대해 알아야 할 모든 것을 알 수 있도록 기능에 대한 가이드를 제공합니다.

사용자 인터페이스

Firefox Developer Edition을 설치하면 표준 Firefox 도구 모음과 약간 다르게 보입니다. Firefox는 툴바를 디자인할 때 확실히 더 개발자 중심적인 접근 방식을 취하여 모양이 더 좁아지고 기본적으로 훨씬 더 많은 버튼으로 장식되었습니다.

Firefox 개발자 도구의 기본 테마는 어둡습니다. 이는 사용자 테스트의 결과일 가능성이 높습니다. 그러나 어두운 테마가 마음에 들지 않으면 메뉴 > 사용자 정의 로 이동하여 언제든지 개발자 에디션 테마를 끌 수 있습니다.

도구 만들기

Firefox 개발자 에디션에는 웹사이트 및 웹 앱을 제작하는 사람들을 위해 설계된 다양한 제작 도구가 함께 제공됩니다. 이 정보를 검색할 필요가 없도록 아래에서 도구와 그 이점에 대한 개요를 제공했습니다.

스크래치 패드

이 도구는 웹 개발자에게 JavaScript 코드를 실험할 수 있는 기회를 제공합니다. Scratchpad에서 제공하는 환경에서 현재 페이지와 상호 작용하는 코드의 결과를 작성, 실행 및 검사할 수 있습니다.

Scratchpad를 열려면 Shift F4를 누르거나 웹 개발자 메뉴로 이동하여 Scratchpad를 클릭하십시오. 그러면 코드를 작성할 수 있는 창이 열립니다. 완료되면 실행 > 실행을 클릭하면 코드가 현재 탭에서 실행됩니다.

스타일 편집기

스타일 편집기를 사용하면 웹 개발자가 연결된 페이지와 함께 모든 스타일 시트를 보고 편집할 수 있습니다. 또한 새로운 스타일 시트를 처음부터 생성하여 페이지에 적용할 수 있을 뿐만 아니라 기존 스타일 시트를 가져와 현재 페이지에 적용할 수도 있습니다.

스타일 편집기를 열려면 웹 개발자 메뉴로 이동하여 스타일 편집기 를 클릭하십시오. 그러면 스타일 편집기를 사용할 준비가 된 브라우저 하단에 Firefox 개발자 도구 상자가 나타납니다.

셰이더 편집기

Firefox에서 셰이더 편집기를 사용하는 것은 간단합니다. 개발자는 WebGL에서 사용되는 프래그먼트 셰이더와 꼭짓점을 완전히 보고 편집할 수 있습니다. 그리고 모르는 사람들을 위해 WebGL은 지능적으로 JavaScript(API를 통해)를 사용하여 플러그인을 사용할 필요 없이 Firefox 브라우저를 통해 직접 2D 및 3D 그래픽을 렌더링합니다.

Shader Editor를 사용하려면 먼저 활성화해야 합니다. 이렇게 하려면 도구 상자 설정으로 이동한 다음 '셰이더 편집기' 옆에 있는 상자를 선택합니다. 그러면 셰이더 편집기가 Firefox 도구 모음에 표시됩니다. 그것을 클릭하면 열 수 있습니다.

웹 오디오 편집기

Web Audio Editor API를 사용하면 개발자가 오디오 컨텍스트를 만들 수 있습니다. 개발자는 다음을 제공하는 오디오 노드를 생성해야 합니다.

• 오디오 소스
• 변환을 수행하는 노드
• 오디오 스트림에 대해 선택한 대상을 나타내는 메모입니다.

Web Audio Editor는 페이지의 오디오 측면을 검사하고 그래프로 시각적 표현을 제공합니다. 이를 통해 개발자는 기능 및 작동을 검사하고 모든 노드가 제대로 연결되었는지 확인할 수 있습니다. 개발자는 AudioParam 노드 속성은 물론 다른 속성도 편집하고 검사할 수 있습니다.

셰이더 편집기와 마찬가지로 웹 오디오 편집기는 수동으로 활성화해야 하며 기본 설정이 아닙니다. 사용 설정은 간단합니다. 개발자 도구 설정으로 돌아간 다음 '웹 오디오' 옆에 있는 확인란을 선택하기만 하면 됩니다. 그러면 Firefox 도구 상자 도구 모음에 추가 탭이 표시되는 것을 볼 수 있습니다. 이 탭을 클릭하기만 하면 오디오 컨텍스트를 구성할 수 있는 페이지가 로드됩니다.

디버깅 도구

Firefox의 디버깅 도구는 웹사이트와 웹 앱을 검사, 탐색 및 디버깅하도록 설계되었습니다. 아래에서 이러한 도구 중 일부의 주요 기능과 이점을 간략하게 설명했습니다.

페이지 인스펙터

페이지 검사기 도구를 사용하면 개발자가 웹 페이지의 HTML 및 CSS 코딩을 검사하고 편집할 수 있습니다. 이 도구를 사용하여 개발자는 로컬로 로드된 버전이나 원격 대상을 통해 페이지를 조사할 수 있습니다.

페이지 검사기를 여는 것은 쉽습니다. 요소를 선택한 경우 요소를 마우스 오른쪽 버튼으로 클릭한 다음 '요소 검사'를 선택하면 됩니다. 또는 웹 개발자 메뉴로 이동한 다음 검사기 옵션을 클릭할 수 있습니다. 그러면 브라우저 하단에 페이지 검사기가 나타납니다.

웹 콘솔

이 도구는 네트워크 요청, JavaScript, CSS, 보안 오류 및 경고, 오류 경고, 정보 메시지 등 웹 페이지와 관련된 모든 정보를 기록합니다. 또한 JavaScript를 사용하여 웹 페이지와 상호 작용할 수 있습니다.

웹 콘솔은 원래 Firefox 개발자 도구의 일부였던 이전 오류 콘솔을 대체하도록 설계되었습니다. 오류 콘솔은 여러 페이지의 방대한 오류 목록을 제공했지만 웹 콘솔은 특정 웹 페이지와 관련된 정보만 표시하므로 더 유용합니다.

웹 콘솔을 열려면 Firefox 메뉴의 웹 개발자 하위 메뉴로 이동하여 '웹 콘솔'을 클릭하십시오. 단축키 Ctrl Shift K를 사용할 수도 있습니다. 그러면 도구 상자가 '콘솔'이 활성화된 브라우저 하단에 나타납니다.

디버거

Firefox 디버거 도구는 웹 개발자에게 JavaScript 코드를 검사하고 수정할 수 있는 기회를 제공합니다. 버그를 식별하는 데에도 사용할 수 있습니다. 디버거를 사용하여 Firefox에서 로컬로 코드를 디버그하거나 Firefox OS 장치 또는 Android용 Firefox에서 원격으로 코드를 디버그할 수 있습니다.

디버거를 열려면 기본 Firefox 메뉴의 웹 개발자 하위 메뉴로 이동하여 '디버거'를 클릭하십시오. 또는 Ctrl Shift S를 누르면 디버거가 활성화되고 사용할 준비가 된 상태로 도구 상자가 브라우저 하단에 나타납니다.

네트워크 모니터

네트워크 모니터는 Firefox에서 만든 모든 다양한 네트워크 요청, 각 요청에 걸리는 시간 및 각 요청의 세부 정보를 표시하도록 설계되었습니다. 웹 개발자 메뉴 > 네트워크로 이동하여 도구를 활성화합니다. 요청을 보려면 페이지를 새로고침해야 합니다.

네트워크 모니터에서 요청의 타임라인을 보고 유형별로 콘텐츠를 필터링할 수 있습니다. 브라우저가 웹사이트의 다른 부분을 다운로드하는 데 걸리는 시간을 확인하는 데 사용할 수 있는 성능 분석 도구도 있습니다. 이 도구를 실행하려면 네트워크 모니터 하단의 도구 모음에서 스톱워치 아이콘을 클릭하기만 하면 됩니다.

스토리지 인스펙터

웹 페이지에서 사용할 수 있는 다양한 유형의 스토리지에 대해 알아보려면 Storage Inspector 도구를 활성화해야 합니다. 현재로서는 Storage Inspector를 사용하여 쿠키, 로컬 스토리지, 세션 스토리지 및 IndexedDB를 검사할 수 있습니다.

Storage Inspector는 스토리지에 대한 읽기 전용 보기를 제공합니다. 그러나 Firefox는 개발자가 향후 저장소 콘텐츠를 편집할 수 있도록 도구를 개발하는 중이라고 밝혔습니다.

Storage Inspector를 열려면 Web Developer 하위 메뉴로 이동하여 Storage Inspector를 클릭하십시오. 또는 Shift + F9를 눌러 키보드 단축키를 사용할 수 있습니다.

개발자 도구 모음

개발자 도구 모음은 웹 개발자에게 여러 Firefox 개발자 도구에 대한 명령줄 액세스를 제공하도록 설계되었습니다. 여기에서 찾을 수 있는 Firefox에서 설정한 명령을 사용하는 것 외에도 Scratchpad를 사용하여 고유한 명령을 추가할 수도 있습니다. 이것들은 추가 기능으로 변환되어 다른 사람들도 사용할 수 있습니다.

Shift + F2를 눌러 개발자 도구 모음을 엽니다. 또는 웹 개발자 메뉴로 이동하여 개발자 도구 모음을 클릭할 수 있습니다.

기타 디버깅 도구 – 3D 보기, 스포이드, iFrames

Firefox 개발자 도구 패키지에 포함된 기타 디버깅 도구는 다음과 같습니다.

• 3D 보기: 중첩된 HTML 및 콘텐츠 블록의 3D 보기를 제공합니다.
• 스포이드: 페이지에서 특정 색상을 선택하여 클립보드에 복사할 수 있습니다.
• iFrame 선택: 개발자 도구가 문서 내의 특정 iFrame을 가리키도록 할 수 있습니다.

모바일 도구

Firefox 생성 및 디버깅 도구 외에도 개발자가 모바일 개발에 사용할 수 있는 여러 모바일 도구가 있습니다. 아래에서 자세히 살펴보겠습니다.

앱 매니저

이 도구를 사용하면 개발자가 Firefox OS 장치에서 HTML5 앱을 테스트, 배포 및 디버그할 수 있습니다. 또한 시뮬레이터 역할도 하므로 Firefox 데스크톱 브라우저에서 직접 테스트를 수행할 수 있습니다.

앱 관리자는 개발자가 외부에서 호스팅되는 로컬 앱과 앱을 관리할 수 있는 앱 패널과 함께 제공됩니다. OS 버전 및 설치된 앱과 같은 연결된 장치에 대한 정보를 제공하는 장치 패널; 실행 중인 앱에서 사용할 수 있는 Firefox 개발자 도구 세트인 도구 상자.

웹IDE

이 모바일 도구를 사용하면 개발자가 Firefox OS 시뮬레이터 또는 Firefox OS 장치를 통해 웹 앱을 생성, 편집, 실행 및 디버그할 수 있습니다. Android용 Firefox 및 Android용 Chrome과 같은 다른 브라우저에서 Firefox 개발자 도구에 연결하는 데 사용할 수 있습니다.

기타 모바일 도구

기타 모바일 도구는 다음과 같습니다.

• Android용 Firefox 원격 디버깅
• Firefox OS 시뮬레이터: Firefox OS 장치를 시뮬레이션하지만 데스크탑에서 실행됩니다.
• 반응형 디자인 보기: 화면 크기가 다른 다양한 장치에서 웹사이트 또는 웹 앱이 어떻게 보이는지 볼 수 있습니다.

성능 도구

성능은 웹 개발에서 매우 중요합니다. 이것이 Firefox가 웹 개발자에게 웹 사이트 및 웹 앱의 성능 문제를 진단하고 수정하는 데 사용할 수 있는 여러 도구를 제공하는 이유입니다.

성능 도구

성능 도구는 Firefox의 원래 JavaScript 샘플링 프로파일러를 대체했습니다. 여기에는 샘플링 프로필의 업데이트된 버전이 포함되어 있습니다. 그러나 프레임 속도 타임라인도 있습니다. 앞으로 더 많은 기능이 제공될 예정입니다.

성능 도구를 사용하여 프로필을 생성, 분석 및 샘플링할 수 있습니다.

자바스크립트 프로파일러

JavaScript 프로파일러는 개발자가 JavaScript 코드에서 문제를 찾을 수 있도록 설계되었습니다. 현재 JavaScript 호출 스택을 샘플링하고 이에 대한 통계를 제공하여 이를 수행합니다.

페인트 깜박임 도구

이 도구는 입력에 대한 응답으로 브라우저가 다시 그려야 하는 웹 페이지 부분을 강조 표시합니다. 이를 통해 웹 개발자는 웹 사이트가 브라우저를 필요 이상으로 다시 그리도록 하는지 여부를 파악할 수 있습니다. 다시 그리기는 성능에 부정적인 영향을 미칠 수 있으므로 이 도구를 사용하여 불필요한 다시 그리기를 제거하고 웹사이트 성능을 향상시키는 것이 좋습니다.

별도의 개발자 프로필

Firefox 버전 간에 전환해야 하는 것은 정말 고통스러운 일입니다. 좋은 소식은 Firefox Developer Edition은 사용자가 설치한 다른 버전의 Firefox와 완전히 별도의 프로필을 사용한다는 것입니다.

개발자 릴리스 노트

현재 및 과거 Firefox 개발자 에디션 릴리스와 관련된 참고 사항을 읽고자 하는 개발자는 이 링크를 방문하여 간단히 읽을 수 있습니다.

마무리

신규 또는 경험이 풍부한 웹 개발자라면 상세하고 다양한 Firefox 개발자 도구를 사용하면 큰 이점을 얻을 수 있습니다. 코드 생성에서 HTML 디버깅에 이르기까지 도구를 사용하면 웹 사이트 또는 웹 앱을 개발하는 데 필요한 다양한 작업을 수행할 수 있습니다. 모바일 도구는 특히 최신(2015년 4월 21 ^일 ) Google 알고리즘 업데이트를 활용하기 위해 반응형 웹사이트를 만들려는 사람들에게 매우 유용합니다.

Firefox 개발자 도구에 대한 자세한 내용을 보려면 Mozilla 개발자 웹 사이트로 이동하여 개발자 커뮤니티에 가입하십시오. Firefox 개발자 에디션은 무료로 다운로드하여 사용할 수 있습니다.