Firefox의 웹 개발자 도구 사용 방법
Firefox의 Web Developer 메뉴에는 페이지 검사, 임의의 JavaScript 코드 실행, HTTP 요청 및 기타 메시지보기 도구가 포함되어 있습니다. Firefox 10은 완전히 새로운 Inspector 도구를 추가하고 Scratchpad를 업데이트했습니다..
Firebug 및 Web Developer Toolbar와 같은 멋진 웹 개발자 애드온과 함께 Firefox의 새로운 웹 개발자 기능은 Firefox를 웹 개발자에게 이상적인 브라우저로 만듭니다. 모든 도구는 Firefox 메뉴의 Web Developer에서 사용할 수 있습니다..
페이지 관리자
특정 요소를 마우스 오른쪽 단추로 클릭하고 선택하여 검사합니다. 검사하다 (또는 큐). 또한 검사관 웹 개발자 메뉴에서.
화면 하단에 도구 막대가 표시되며이 도구 모음을 사용하여 관리자를 제어 할 수 있습니다. 선택한 요소가 강조 표시되고 페이지의 다른 요소가 흐리게 표시됩니다..
새 요소를 선택하려면 검사하다 버튼을 클릭하고 페이지 위로 마우스를 이동하여 요소를 클릭하십시오. Firefox가 커서 아래의 요소를 강조 표시합니다..
툴바의 탐색 경로를 클릭하여 부모 요소와 하위 요소를 탐색 할 수 있습니다.
HTML 검사기
클릭 HTML 버튼을 클릭하면 현재 선택된 요소의 HTML 코드를 볼 수 있습니다..
HTML 속성을 사용하면 HTML 태그를 확장하거나 축소 할 수 있으므로 한눈에 시각화하기가 쉽습니다. 플랫 파일에서 페이지의 HTML을보고 싶다면 페이지 소스보기 웹 개발자 메뉴에서.
CSS 검사기
클릭 스타일 선택한 요소에 적용된 CSS 규칙을 보려면 버튼을 클릭하십시오..
CSS 속성 패널도 있습니다. 규칙 과 등록 정보 버튼. 특정 속성을 쉽게 찾을 수 있도록 속성 패널에는 검색 상자.
규칙 패널에서 요소의 CSS를 즉시 편집 할 수 있습니다. 확인란을 선택 취소하여 규칙을 비활성화하거나, 텍스트를 클릭하여 규칙을 변경하거나, 창의 맨 위에있는 요소에 고유 한 규칙을 추가하십시오. 여기에 font-weight : bold; 요소의 텍스트를 굵은 체로 만드는 CSS 규칙.
자바 스크립트 스크래치 패드
Scratchpad는 또한 Firefox 10으로 업데이트를 보았으며 이제 구문 강조 표시 기능을 포함하고 있습니다. 자바 스크립트 코드를 입력하면 현재 페이지에서 실행할 수 있습니다..
일단 다운로드가 완료되면 실행 메뉴 및 선택 운영. 코드는 현재 탭에서 실행됩니다..
웹 콘솔
웹 콘솔은 더 이상 사용되지 않으며 이후 버전의 Firefox에서 제거 될 이전 오류 콘솔을 대체합니다..
콘솔은 네트워크 요청, CSS 오류 메시지, JavaScript 오류 메시지 및 웹 개발자 메시지의 가시성을 토글 할 수있는 네 가지 유형의 메시지를 표시합니다.
웹 개발자 메시지 란 무엇입니까? window.console 객체에 출력되는 메시지입니다. 예를 들어 window.console.log ( "Hello World"); Scratchpad의 JavaScript 코드를 사용하여 개발자 메시지를 콘솔에 인쇄합니다. 웹 개발자는 이러한 메시지를 JavaScript 코드에 통합하여 디버깅에 도움을 줄 수 있습니다..
페이지를 새로 고침하면 생성 된 네트워크 요청 및 기타 메시지가 표시됩니다..
검색 창을 사용하여 메시지를 필터링하십시오. 자세한 내용을 보려면 요청을 클릭하십시오..
Firefox 10부터 Web Console은 Page Inspector와 함께 사용할 수 있습니다. $ 0 변수는 검사기에서 현재 선택된 객체를 나타냅니다. 예를 들어, 현재 선택한 객체를 숨기려면, $ 0.style.display = "none" 콘솔에서.
콘솔 및 기본 제공 기능 사용에 대한 자세한 내용을 보려면 Mozilla 개발자 네트워크 웹 사이트의 웹 콘솔 페이지를 확인하십시오..
추가 도구 가져 오기
그만큼 추가 도구 가져 오기 옵션을 사용하면 Mozilla 애드온 웹 사이트의 Web Developer 's Toolbox 부가 기능 모음으로 이동합니다. Firebug 및 Web Developer Toolbar를 포함하여 웹 개발자를위한 최고의 부가 기능을 포함하고 있습니다..
몇 년 동안 Firefox를 사용 해왔다면 DOM Inspector를 기억할 것입니다. 파이어 폭스의 통합 개발자 도구는 그 이후로 먼 길을왔다..
