Firefox의 웹 개발자 도구를 사용하여 웹 사이트 구조를 3D로 보는 방법

파이어 폭스 11은 이미 두 가지 새로운 웹 개발자 도구를 파이어 폭스의 인상적인 무기고에 추가했다. 기울기 기능은 웹 사이트 구조를 3D로 시각화하는 동시에 스타일 편집기는 CSS 스타일 시트를 즉시 편집 할 수 있습니다..

Tilt라고하는 3D 기능은 웹 사이트의 DOM을 시각화하는 방법입니다. 기존의 문서 검사기와 통합되어 WebGL을 사용하여 브라우저에 풍부한 3D 그래픽을 표시합니다..

기울이기 - 3D 웹 사이트 시각화

Firefox의 Page Inspector에서 Tilt에 액세스 할 수 있습니다. 시작하려면 Web Developer 메뉴에서 "Inspect"를 선택하여 Page Inspector를 엽니 다. 현재 페이지에서 마우스 오른쪽 버튼을 클릭하고 "요소 검사"를 선택하여 특정 요소에서 속성을 시작할 수도 있습니다.

속성 도구 모음에서 "3D"버튼을 클릭하십시오..

3D 모드를 활성화 한 후에 페이지의 구조를 볼 수 있지만 회전 할 때까지 평면으로 보입니다..

마우스 왼쪽 버튼을 클릭하여 모델을 회전하고 마우스 오른쪽 버튼을 클릭하여 이미지를 이동하고 마우스 휠을 사용하여 확대 / 축소합니다..

이보기는 검사기의 다른 도구와 통합되어 있습니다. HTML 또는 스타일 패널이 열려있는 경우 hte 페이지의 요소를 클릭하여 해당 요소의 HTML 코드 또는 CSS 속성을 볼 수 있습니다.

더 많은 3D 기능

3D 시각화 기능은 Tilt 확장 기능을 기반으로하지만 Tilt 확장 기능의 모든 기능을 가지고 있지는 않습니다. 색상을 사용자 정의하거나 시각화를 3D 편집 프로그램에서 사용하기위한 3D 모델 파일로 내보내려면 Tilt 3D 부가 기능을 설치해야합니다. 일단 당신이, 당신은 웹 개발자 메뉴에서 새로운 "틸트"옵션을 얻을거야.

메시지가 표시 될 때 이전 버전의 틸트를 사용하려면 취소 버튼을 클릭하십시오..

창 왼쪽의 시각화를 사용자 정의하는 컨트롤과 페이지 상단의 내보내기 기능을 포함한 기타 옵션을 찾을 수 있습니다..

CSS 스타일 편집기

페이지의 CSS 스타일 시트를보고 편집하려면 웹 개발자 메뉴에서 스타일 편집기를 엽니 다.

스타일 편집기는 현재 페이지의 스타일 시트를 나열합니다. 스타일 시트의 왼쪽에있는 눈 모양 아이콘을 클릭하여 스타일 시트를 켜거나 끕니다. 스타일 시트를 선택하고 코드를 수정하여 스타일 시트 편집하기.

변경 사항은 즉시 페이지에 반영됩니다. 스타일 시트를 끄면 페이지의 스타일 정보가 손실됩니다. 스타일 시트를 편집하면 입력하는 동안 페이지에 수정 사항이 표시됩니다..

스타일 편집기 중 하나의 복사본을 컴퓨터에 저장하거나 컴퓨터에서 기존 스타일 시트를 가져 오거나 스타일 편집기 창에서 저장, 가져 오기 또는 새 링크가있는 빈 빈 스타일 시트를 추가 할 수 있습니다.

3D 시각화 기능은 현재 페이지의 변경 사항을 감시하고 변경 사항이 발생할 경우이를 알려줍니다. 3D 속성을 연 상태에서 스타일 편집기를 사용하면 변경 사항이 3D보기에 즉시 반영됩니다. 이 기능은 Firebug와 같은 웹 페이지를 수정하는 타사 확장 기능에서도 작동합니다..