유용한 Firefox 개발자 도구 10 가지
Firefox는 "개발자의 브라우저"가되어 우리의 작업을 더 쉽게 할 수있는 많은 훌륭한 도구를 가지고 있습니다. 도구 모음에 대한 자세한 내용은 Firefox 개발자 도구 웹 페이지에서 확인하고 테스트중인 더 많은 기능과 도구가있는 개발자 버전 브라우저를 사용해 볼 수도 있습니다.
이 게시물에 대해서는 편리한 도구 10 개 당신은 그것의 개발자 도구 모음에서 좋아할지도 모른다. 나는 또한이 도구들이 GIF와 함께 무엇을 할 수 있는지, 그리고 빠른 참조를 위해 그것들에 접근하는 방법을 보여 주었다..
1. 수평 및 수직 눈금자보기
Firefox에는 눈금자 도구가 있습니다. 픽셀 단위로 가로 및 세로 눈금자를 모두 표시합니다. 페이지에. 이 도구는 페이지 전체에 요소 정렬에 유용합니다..
메뉴를 통해 눈금자에 액세스하려면 다음으로 이동하십시오. ☰> 개발자 > 개발자 툴바 (바로 가기 : Shift + F2). 도구 모음이 페이지 하단에 나타나면 다음을 입력하십시오. 통치자 언론 들어가다.
이것을 개발자 도구 창에 표시하려면 "도구 상자 옵션"으로 이동하십시오. "사용 가능한 도구 상자 버튼"섹션에서 "페이지에 대한 눈금자 토글"확인란.
2. CSS 선택기를 사용하여 스크린 샷 가져 오기
Firefox 도구 모음을 사용하면 전체 페이지 또는 보이는 부분의 스크린 샷을 찍을 수 있지만, CSS 선택기 방법은 캡처에 더 유용합니다. 개별 요소의 스크린 샷 뿐만 아니라 마우스 오버시 표시되는 요소 (메뉴와 같은).
메뉴를 통해 스크린 샷을 가져 오려면 ☰> 개발자 > 개발자 툴바 (바로 가기 Shift + F2). 도구 모음이 페이지 하단에 나타나면 다음을 입력하십시오. 스크린 샷 - 선택기 any_unique_css_selector 언론 들어가다.
이 도구를 개발자 도구 창에 표시하려면 "도구 상자 옵션"을 클릭하고 "사용 가능한 도구 상자 단추"섹션에서 "전체 페이지 스크린 샷 가져 오기 " 확인란.
3. 웹 페이지에서 색상 선택
Firefox에는 "스포이드"라는 이름으로 내장 된 색상 선택 도구가 있습니다. 메뉴를 통해 "스포이드"도구에 액세스하려면 ☰> 개발자 > 스포이드.
이 도구를 개발자 도구 창에 표시하려면 "도구 상자 옵션"을 클릭하고 "사용 가능한 도구 상자 단추"섹션에서 "페이지에서 색상 가져 오기"확인란.
4. 3D로 페이지 레이아웃보기
3D로 웹 페이지를 보면 레이아웃 문제를 해결할 수 있습니다. 서로 다른 레이어 요소를 3D보기에서 훨씬 더 명확하게 볼 수 있습니다. 웹 페이지를 3D로 보려면 "3D보기"도구 버튼을 클릭하십시오..
이 도구를 개발자 도구 창에 표시하려면 "도구 상자 옵션"을 클릭하고 "사용 가능한 도구 상자 단추"섹션에서 "3D보기"확인란.
5. 브라우저 스타일보기
브라우저 스타일은 브라우저가 모든 요소에 할당하는 기본 스타일과 브라우저 별 스타일 (브라우저 접두사가있는 스타일)의 두 가지 유형으로 구성됩니다. 브라우저 스타일을 살펴보면 스타일 시트에서 오버라이드 문제를 진단한다. 기존의 브라우저 별 스타일을 알게되었습니다. .
메뉴를 통해 '브라우저 스타일'에 액세스하려면 ☰> 개발자 > 검사관. 그런 다음 오른쪽 섹션의 '계산 된'탭을 클릭하고 '브라우저 스타일'확인란을 선택하십시오..
당신은 또한 "검사관"단축키 Ctrl + Shift + C를 탭하여"브라우저 스타일 "에 액세스하십시오..
6. 현재 세션에서 자바 스크립트 사용 중지
모범 사례와 화면 판독기 호환성을 위해 자바 스크립트가 비활성화 된 환경에서 기능이 방해받지 않는 방식으로 모든 웹 사이트를 코딩하는 것이 좋습니다. 이러한 환경을 테스트하려면 현재 작업중인 세션의 JavaScript 비활성화.
현재 세션에서 자바 스크립트를 사용하지 않으려면 "도구 상자 옵션"을 클릭하고 "고급 설정"섹션에서 "자바 스크립트 사용 안함* "확인란.
7. 페이지에서 CSS 스타일 숨기기
JavaScript와 마찬가지로 접근성 문제로 인해 웹 사이트를 디자인하는 것이 가장 좋습니다. 페이지는 스타일이 없어도 읽을 수 있어야합니다.. 어떤 스타일없이 페이지가 어떻게 보이는지 보려면 개발자 도구에서 페이지를 비활성화 할 수 있습니다.
웹 페이지에 적용된 CSS 스타일 (인라인, 내부 또는 외부)을 제거하려면 나열된 스타일 시트의 눈 기호를 클릭하십시오. 스타일 편집기 "탭에서 원래보기로 되돌리려면 다시 클릭하십시오..
메뉴를 통해 "스타일 편집기"에 액세스하려면 ☰> 개발자 > 스타일 편집기 (바로 가기 : Shift + F7.
8. 요청에 대한 HTML 콘텐츠 응답 미리보기
Firefox 개발자 도구는 다음과 같은 옵션을 제공합니다. 미리보기 HTML 콘텐츠 유형 응답. 이렇게하면 개발자가 302 리디렉션을 미리보고 응답에 중요한 정보가 렌더링되었는지 여부를 확인하는 데 도움이됩니다..
메뉴를 통해 '미리보기'에 액세스하려면 ☰> 개발자 > 회로망 (바로 가기 : Ctrl + Shift + Q) 그런 다음 원하는 웹 페이지를 열거 나 현재 페이지를 다시로드하고 원하는 요청 (HTML 응답 포함) 요청 목록에서 "시사"오른쪽 섹션의 탭.
9. 다양한 화면 크기로 웹 페이지 미리보기
응답 성을 위해 웹 페이지를 테스트하려면 "Responsive Design View"를 사용하십시오.이보기는 ☰> 개발자 > 반응 형 디자인보기 또는 바로 가기 : Ctrl + Shift + M.
"반응 형 디자인 모드"도구 버튼을 표시하려면 "도구 상자 옵션"을 클릭하고 "사용 가능한 도구 상자 버튼"섹션에서 "반응 형 디자인 모드"확인란을 선택하십시오..
10. 페이지에서 JavaScript 실행
웹 페이지에서 빠른 자바 스크립트 실행을 위해서는 Firefox의 "Scratchpad"도구를 사용하십시오. 메뉴를 통해 "Scratchpad"에 액세스하려면; ☰> 개발자 > 스크래치 패드 단축키 Shift + F4를 사용하십시오..
"스크래치 패드"도구 버튼을 개발자 도구 창에 표시하여 빠르게 사용할 수있게하려면 "도구 상자 옵션"그리고"사용 가능한 도구 상자 버튼"섹션에서"Scratchpad " 확인란.
