Firefox 11에는 두 가지 새로운 웹 개발자 도구가 추가되었습니다. Firefox의 이미 인상적인 무기고 . 틸트 기능은 웹 사이트 구조를 3D로 시각화하는 반면 스타일 편집기는 CSS 스타일 시트를 즉석에서 편집 할 수 있습니다.
3D 기능인 Tilt는 웹 사이트의 DOM을 시각화하는 방법입니다. 기존 문서 검사기와 통합되며 WebGL을 사용하여 브라우저에 풍부한 3D 그래픽을 표시합니다.
틸트 – 3D 웹 사이트 시각화
Firefox의 페이지 검사기에서 Tilt에 액세스 할 수 있습니다. 시작하려면 웹 개발자 메뉴에서 "검사"를 선택하여 페이지 검사기를 엽니 다. 또한 현재 페이지를 마우스 오른쪽 버튼으로 클릭하고 "요소 검사"를 선택하여 특정 요소에서 속성을 시작할 수 있습니다.
인스펙터 툴바에서 "3D"버튼을 클릭하십시오.
3D 모드를 활성화하면 페이지의 구조가 표시되지만 회전 할 때까지 평평하게 보입니다.
왼쪽 클릭으로 모델을 회전하고, 오른쪽 클릭으로 이미지를 이동하고, 마우스 휠을 사용하여 확대 / 축소합니다.
이보기는 검사기의 다른 도구와 통합됩니다. HTML 또는 스타일 패널이 열려있는 경우 페이지에서 요소를 클릭하여 해당 요소의 HTML 코드 또는 CSS 속성을 볼 수 있습니다.
더 많은 3D 기능
3D 시각화 기능은 Tilt 확장을 기반으로하지만 Tilt 확장의 모든 기능을 포함하지는 않습니다. 색상을 사용자 지정하거나 시각화를 3D 편집 프로그램과 함께 사용하기 위해 3D 모델 파일로 내보내려면 다음을 설치해야합니다. Tilt 3D 애드온 . 그런 다음 웹 개발자 메뉴에 새로운 "기울기"옵션이 표시됩니다.
메시지가 표시되면 취소 버튼을 클릭하여 이전 버전의 Tilt를 사용합니다.
창 왼쪽에는 시각화를 맞춤 설정할 수있는 컨트롤이 있으며 페이지 상단에는 내보내기 기능을 포함한 기타 옵션이 있습니다.
CSS 스타일 편집기
페이지의 CSS 스타일 시트를보고 편집하려면 웹 개발자 메뉴에서 스타일 편집기를 엽니 다.
스타일 편집기는 현재 페이지의 스타일 시트를 나열합니다. 스타일 시트 이름 왼쪽에있는 눈 모양 아이콘을 클릭하여 스타일 시트를 켜거나 끕니다. 스타일 시트를 선택하고 코드를 수정하여 편집하십시오.
변경 사항은 페이지에 즉시 반영됩니다. 스타일 시트를 끄면 페이지의 스타일 정보가 손실됩니다. 스타일 시트를 수정하면 입력하는 동안 페이지에 수정 사항이 표시됩니다.
스타일 시트 중 하나의 복사본을 컴퓨터에 저장하거나, 컴퓨터에서 기존 스타일 시트를 가져 오거나, 스타일 편집기 창에서 저장, 가져 오기 또는 새로 만들기 링크를 사용하여 비어있는 새 스타일 시트를 추가 할 수 있습니다.
3D 시각화 기능은 현재 페이지의 변경 사항을 감시하고 변경 사항이 발생하면이를 알립니다. 3D 속성이 열린 상태에서 스타일 편집기를 사용하면 변경 사항이 3D보기에 즉시 반영됩니다. 이는 Firebug와 같은 웹 페이지를 수정하는 타사 확장 기능에서도 작동합니다.
