From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/tools/index.html | 217 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 217 insertions(+) create mode 100644 files/ko/tools/index.html (limited to 'files/ko/tools/index.html') diff --git a/files/ko/tools/index.html b/files/ko/tools/index.html new file mode 100644 index 0000000000..0b7421b03d --- /dev/null +++ b/files/ko/tools/index.html @@ -0,0 +1,217 @@ +--- +title: Firefox 개발자 도구 +slug: Tools +tags: + - 가이드 + - 개발 도구 + - 개발자 에디션 + - 개발자버전 + - 디버그 + - 웹개발 + - 웹애플리케이션 + - 웹페이지 + - 자바스크립트 + - 파이어폭스 +translation_of: Tools +--- +
{{ToolsSidebar}}
+ +
HTML과 CSS, Javascript를 데스크탑이나 모바일에서 확인하거나 편집, 디버깅 합니다.
+ +
Firefox Developer Edition 설치 하기 + +
+

Firefox Developer Edition에 새로 추가된 기능

+ +

Firefox Developer Edition은 가장 최신 버전의 Firefox 기능과 함께, 실험 중인 개발자 도구로 개발자분들에게 맞춤 제작된 Firefox 버전을 제공해드립니다. 현재 Developer Edition은 다음과 같은 기능 업데이트를 포함하고 있습니다.

+ + +
+
+ +
아이디어 공유하기 + +
+

여러분들의 생각을 알려주세요

+ +

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

+
+
+ +

+ +
+
+

만들기

+ +

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

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

탐색 및 디버깅

+ +

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

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

모바일

+ +

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

+ +
+
App 매니저
+
Firefox OS용 애플리케이션을 설계하고 개발하세요.
+
웹 IDE
+
App 매니저를 Firefox 33 이후로 계속 사용할 수 있도록 한 대체품입니다.
+
Firefox OS 시뮬레이터
+
Firefox OS가 설치된 디바이스 없이도 데스크탑에서 Firefox OS용 애플리케이션을 실행하고 디버깅할 수 있습니다.
+
반응형 디자인 보기
+
브라우저 창의 크기를 변경하지 않고도 여러분의 웹사이트나 애플리케이션이 다른 크기의 스크린에서 어떻게 보이는지 확인할 수 있습니다.
+
Android용 Firefox에서 디버깅
+
Android에서 Firefox와 연결하여 디버깅 할 수 있는 개발 도구입니다.
+
Android용 Firefox에서 웹 IDE로 디버깅
+
데스크탑용 Firefox 36, Android용 Firefox 35 이상에서 더 간편하게 디버깅할 수 있습니다.
+
Valence
+
iOS의 Safari와 Android의 Chrome에 연결하여 디버깅 할 수 있는 개발 도구입니다.
+
+
+ +
+

성능

+ +

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

+ +
+
성능 도구 | Performance tool
+
개선된 Javascript 프로파일러와 프레임율 타임라인을 제공합니다.
+
프레임율 그래프
+
당신의 사이트의 프레임율 보기.
+
+ +
+
+
워터폴
+
어떤 브라우저가 사이트에서 무슨일을 하고 있는지 알아보기.
+
콜 트리
+
당신의 Javascript 코드가 어디에서 시간을 소비하고 있는지 알아보기.
+
Paint Flashing 도구
+
이벤트를 통해 페이지가 업데이트 된 부분을 눈에 띄게 표시해 주는 도구입니다.
+
리플로우 이벤트 로깅
+
웹 콘솔에서 페이지의 리플로우 이벤트가 발생했는지 확인할 수 있습니다.
+
네트워크 성능 | Network Performance
+
페이지가 로딩될 때 많은 시간이 소요되는 부분을 점검하세요.
+
+
+
+ +
+
+
+

브라우저 디버깅하기

+ +

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

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

개발자 도구 확장하기

+ +

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

+ +
+
개발자 도구 화면에서 새 패널 추가하기
+
개발자 도구 화면에서 새 패널을 추가하는 애드온을 만들어 보세요.
+
+ +
+
원격 디버깅 프로토콜
+
원격 디버깅 프로토콜은 Firefox 개발자 도구가 Firefox나 Firefox OS 장치로 연결할 수 있게 해줍니다.
+
소스 편집기
+
여러분이 개발한 애드온 프로그램에 Firefox 코드 편집기를 내장할 수 있습니다.
+
디버거 인터페이스
+
작성한 자바스크립트 코드의 실행 결과를 관찰할 수 있는 API입니다. Firefox 개발자 도구는 이 API를 사용해서 Javascript 디버거를 만들었습니다.
+
웹 콘솔 출력 커스터마이징
+
브라우저 콘솔과 웹 콘솔을 커스터마이징 하는 방법을 알아보세요.
+
개발자 도구 애드온 예제
+
예제를 활용하여 개발자 도구 애드온 프로그램이 어떻게 만들어지는지 이해해 보세요.
+
+
+
+ +
+

다른 리소스

+ +

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

+ +
+
+
+
Firebug
+
아주 유명하고 강력한 웹 개발 도구이며, 자바스크립트 디버거와 HTML과 CSS 뷰어, 네트워크 모니터를 포함합니다.
+
DOM 검사기
+
웹 페이지의 DOM이나 XUL 윈도우를 탐색하고 편집하며, 점검해 볼 수 있는 도구입니다.
+
웹 개발자
+
다양한 웹 개발 도구를 브라우저의 메뉴나 툴바에 추가하세요.
+
+
+ +
+
+
웹메이커 도구
+
Mozilla에서 웹 개발을 시작하는 사람들을 위해 만든 도구들을 모아 두었습니다.
+
W3C 검사기
+
W3C 웹사이트는 여러분의 HTML과 CSS를 포함한 웹사이트 정합성을 확인하는 여러 도구들을 제공하고 있습니다.
+
JSHint
+
JavaScript 코드 분석 도구입니다.
+
+
+
-- cgit v1.2.3-54-g00ecf