Firefox Developer Edition 6 가장 시원한 도구
Firefox 개발자 에디션은 현재 개발자를 위해 특별히 만들어진 유일한 브라우저입니다. 표준 에디션의 개발자 툴은 개발자 에디션의 첫 번째 버전으로, 개발자 에디션에는 표준 에디션에서 제공되지 않으며 제공되지 않을 툴이 있습니다. 오늘 우리는 지금 그 도구들 중 일부를 살펴볼 것입니다. 개발자 버전에서만 찾을 수 있습니다..
표준 에디션의 개발자 툴을 사용해 본 적이 없거나 개발자 툴에 익숙하지 않은 사람이라면 먼저 Mozilla의 멋진 "DevTools Challenger"를 확인하십시오. Firefox 개발자 버전 브라우저에서 아래에 언급 된 도구 중 일부를 사용하여 연습 할 수 있습니다. 예제는 재미 있고 따라하기 쉽고 지시 사항은 간단하고 따라 잡을 수없는 경우 비디오 자습서를 따르십시오..
1. 애니메이션 검사 도구
CSS 애니메이션은 점차 보편화되고 있으며 Firefox 개발자 버전에서 제공하는 CSS 애니메이션 도구를 사용하면 만든 애니메이션의 모든 단계를 쉽게 따르고 검사 할 수 있습니다. 애니메이션을 일시 중지, 재생 및 되돌릴 수 있습니다. 스크러빙을 통해 프레임 단위로 프레임을 볼 수도 있습니다..
이 도구에 액세스하려면 검사관 도구를 애니메이션 요소를 마우스 오른쪽 버튼으로 클릭하고 "요소 검사"를 선택한 다음 dev 도구 창의 오른쪽에서 "애니메이션"을 클릭하십시오..
2. 애니메이션 타이밍 함수 편집기
애니메이션 타이밍은 dev 도구에서 편집 할 수 있습니다. 규칙 섹션 검사관 도구 및 기능 곡선을 보여주는 팝업이 열립니다. 애니메이션 타이밍을 조정하려면 이것을 드래그하고 수정할 수 있습니다. 커브를 변경하면 애니메이션 속도가 그에 따라 변경됩니다..
큐빅 베 지어 애니메이션 기능에 익숙하지 않은 사용자는이 게시물을 참조하여 자세한 내용을 알아보십시오..
CSS 속성을위한 색상 선택기
파이어 폭스의 표준 버전에서 이미 색상 선택 도구가 사용 가능합니다 (이 게시물에 대한 자세한 내용은이 게시물을 참조하십시오).이 색상 선택 도구는 페이지에서 색상을 선택하여 클립 보드에 복사합니다. 내가 지금 언급하고있는 색상 선택 도구는 속성의 CSS 색상 값에 특정.
의 모든 CSS 색상 값 옆에 규칙 섹션 검사관 도구를 클릭하면 색상환이 열리는 아이콘이 나타납니다. 휠에서 원하는 색상을 선택할 수 있습니다..
이미 원하는 색상과 페이지에있는 색상이있는 경우 팝업 하단의 스포이드 도구를 클릭하여 색상 선택기를 연 다음 원하는 색상으로 선택 도구를 드래그하고 클릭하십시오 . CSS 색상 값이 선택한 색상 색상 값으로 변경됩니다..
4. 측정 도구
이 도구를 사용하면 커서의 XY 위치와 선택한 부분의 높이, 너비 및 대각선 측정 값을 픽셀 단위로 볼 수 있습니다. 이 도구를 사용하려면 먼저 개발자에서 활성화해야합니다. 도구 상자 옵션, "사용 가능한 도구 상자 버튼"아래의 "페이지의 일부분 측정"이라는 체크 박스를 체크함으로써,.
사용 설정되면 개발자 도구 창 상단에 눈금자 아이콘이 표시되고 해당 아이콘을 클릭 한 다음 페이지 위로 커서를 이동합니다. 커서 근처에 XY 위치가 표시됩니다. 너비, 높이 및 대각선을 측정하려면 클릭하고 드래그하여 측정하려는 부분을 선택하십시오..
5. CSS 필터 편집기
페이지의 요소에 CSS 필터를 적용했다면 CSS 필터 옆에 아이콘이 표시됩니다. 규칙 섹션 검사관 도구, 클릭시 CSS 필터 편집기 열기.
필터를 제거하려면 필터 이름의 오른쪽 끝에있는 × 표시를 클릭하십시오. 필터를 추가하려면 하단의 필터 상자를 클릭하고 추가 할 필터 상자를 선택하고 + 기호. 각 항목을 드래그하여 필터를 임의의 순서로 재정렬 할 수도 있습니다.
6. 메모리 도구
이 도구를 사용하여 웹 페이지에서 무엇이 메모리를 차지하는지 확인할 수 있습니다. 이렇게하면 메모리 사용을 줄이고 페이지 속도를 향상시킬 수 있습니다..
이 도구를 사용하려면 먼저 도구에서 활성화해야합니다. 도구 상자 옵션 "기본 Firefox 개발자 도구"에서 "메모리"라는 체크 박스를 선택하십시오. 선택하면 "성능"바로 다음에 개발 도구 창의 맨 위에 "메모리"섹션이 나타납니다. 그것을 선택하십시오.
이 도구를 사용하려면 "스냅 샷 찍기"또는 카메라 버튼을 클릭하십시오. 메모리를 차지하고있는 객체 및 스크립트와 같은 항목 목록이 표시됩니다. .
