웹 개발자를위한 필수 Firefox 도구 살펴보기

파이어 폭스는 오랫동안 웹 개발에 선호되는 브라우저였다. 이 작업을 수행하는 데 유용한 추가 기능이 많이 있습니다. 이 글에서는 웹 개발을 할 계획이라면 설치하는 것이 필수적이라고 생각되는 몇 가지 부가 기능을 살펴볼 것입니다. 또한 우리는 이러한 추가 기능에서 도움이 될 수있는 몇 가지 기능을 밝힐 것입니다..

먼저 Firebug를 설치해야합니다..

방화범

Firebug는 웹 개발을 위해 반드시 설치해야하는 애드온입니다. Firebug를 어디에서 구해야하는지 모를 경우 여기에 설치할 수 있습니다. 아마도 활성화되기 전에 Firefox를 다시 시작해야합니다..

그 다음에는 Firebug를 다음 방법 중 하나를 통해 볼 수 있습니다 :이 메뉴를 따르십시오 도구> 웹 개발자> 방화범 입력, 웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 “방화 광구로 요소 검사”.

또는 파이어 폭스에서 파이어 버그 아이콘을 찾아서 클릭하면 파이어 버그 창을 볼 수 있습니다.

방화 광케이블은 Chrome 개발자 도구. HTML 구조와 스타일을 볼 수있는 패널과 오류, 경고 및 로그를 볼 수있는 콘솔 패널이 있습니다. 하지만 유용한 정보를 얻으려면 몇 가지 추가 정보가 필요합니다..

상자 크기 조정

HTML 요소는 여백, 패딩 및 객체 크기 (너비 / 높이)로 구성된 CSS 상자 모델로 구성됩니다. 이러한 속성을 수정해야하는 경우가 있습니다. 이 경우 변경하려는 요소 중 하나를 선택하고 형세 패널.

이 패널에는 CSS 상자 모델의 그림과 그 정보가 포함되어 있습니다. 폭 과 신장. 이 두 속성은 CSS에 지정되어 있지 않지만, 이 도구는 값을 결정할만큼 충분히 똑똑합니다. 값을 수정해야하는 경우 값을 클릭하고 위 또는 아래 화살표 키를 사용하여 값을 늘리거나 줄일 수 있습니다.

계산 된 스타일

많은 경우에 특정 스타일이 적용되지 않는 이유가 궁금 할 것입니다. 쉽고 빠른 방법 중 하나는 특히 수천 줄의 스타일을 가지고있을 때 계산 된 스타일 패널. 이 예제는 앵커 태그 텍스트 색상이에 의해 .단추 클래스의 배경은 .단추 클래스를 덮어 쓴다. .button.add.

글꼴 패밀리 검사하기 (쉬운 방법)

당신은 아마 다음과 같은 것을 발견 할 것입니다. 글꼴 모음 다양한 글꼴 군을 가진 CSS의 속성. 불행하게도, 브라우저가 어떤 글꼴을 사용하는지 구체적으로 알려주지는 않습니다. 쉽게 식별 할 수 있도록이 Firebug 확장을 설치할 수 있습니다. FireFontFamily.

설치가 완료되면 웹 페이지를로드하면 이제 적용되는 글꼴 군을 명확하게 알 수 있습니다. 우리의 경우에는 실제로 헬 베티 아 노에 (총 참조).

실적 분석

이것은 평온한 것일 수도 있지만 사이트 속도는 이제 웹 사이트 품질을 결정하는 Google 매개 변수 (알고리즘) 중 하나입니다. 더 빨리로드되는 웹 사이트는 잘 발달 된 것으로 간주되고 콘텐츠 측면에서 더 높은 순위를 매 깁니다. 그래서 속도는 간과해야하는 것이 아닙니다..

순 패널

웹 사이트 실적을 조사하기 위해 방문해야 할 첫 번째 장소는 그물 패널. 이 패널은로드 될 때 웹 사이트의 HTTP 요청을 기록합니다. 아래 스크린 샷은로드하는 웹 페이지를 보여줍니다. 42 요청 주변을 둘러싼 다. 4.36 초 적재하다.

그런 다음 HTML, CSS 및 이미지와 같은 유형별로 HTTP 요청을 정렬 할 수 있습니다.

Yslow!

또한, YSlow, 야후!에서 Firebug를위한 확장 기능. 그것이 활성화 된 후에는 명시 적으로 Yslow라고 불리는 추가 패널을 발견 할 것입니다!.

비슷하다 그물 패널, Yslow! 로드 될 때 웹 페이지 실적을 기록하지만 웹 페이지가 느린 이유와 해결 방법을 알려줍니다. 이 예에서는 웹 페이지에 대한 테스트를 실행하고 점수가 매겨집니다. 전체 성능 86, 그것은 괜찮은 것으로 간주된다..

페이지 속도

또는 Google에서 Page Speed를 설치할 수도 있습니다. 비슷하다 Yslow!, 테스트 결과가 약간 다를 수 있지만 웹 사이트 속도 성능을 테스트합니다. 이 예제는 동일한 웹 페이지 페이지 속도에 따라 82 점을 획득했습니다..

웹 개발자 도구

웹 개발자 도구는 웹 개발자에게 분명히 적합하며이 도구 모음에 여러 기능이 포함되어 있습니다. 하지만이 아래 하나는 내 즐겨 찾기 중 하나입니다..

이미지 검사

웹 페이지에서 이미지 정보를 가져와야하는 경우가 있습니다. 일반적으로 사람들이 브라우저를 우연히 발견하거나 이미지를 마우스 오른쪽 버튼으로 클릭하고 이미지 정보보기, 이렇게 :

그러나이 방법은 많은 이미지에서 정보를 얻을 필요가있을 때 매우 효율적이지 않습니다. 이 경우, 우리는 이미지 기능을 추가 기능에서. 이 기능은 도구 모음의 이미지 메뉴에서 쉽게 액세스 할 수 있습니다..

그리고이 예제는 이미지 크기와 이미지 파일 크기를 동시에 표시하는 방법을 보여줍니다.

Firefox 내장 도구

최근 버전에서 Firefox는 웹 개발자를위한 내장 기능을 대폭 향상 시켰습니다. 그 중 일부는 다음과 같습니다.

기본 검사 요소

이 원시 요소를 점검하다 Firefox의 경우와 비슷할 수 있습니다. “Firebug에서 요소 검사”, 하지만 실제로는 다른 방식으로 작동합니다..

이번에는 레이아웃과 디자인면에서 차이가 있지만 Firebug HTML과 CSS 패널과 본질적으로 동일하기 때문에이 기능을 더 이상 설명하지 않겠습니다. 하지만 시험해 볼만한 특징이 하나 있습니다. 3D보기.

사용 3D보기 웹 페이지 구조를 깊이 볼 수 있습니다. 이보기를 활성화하려면 오른쪽 하단에있는 버튼을 찾으십시오. “Firefox Native Inspect 요소”. 이것은 3D보기 모양.

그래도 다른 기능처럼 자주 사용하지는 않지만 Mozilla의 혁신적인 기능입니다. 특정 상황에서는 매우 유용합니다..

웹 디자인보기

반응 형 웹 디자인의 인기가 높아지면서 Firefox는 브라우저에 반응 형 북마크릿을 시작했습니다. 이 도구를 사용하면 브라우저 창 크기를 조정하지 않고도 다양한 뷰포트에서 반응 형 웹 사이트를 테스트 할 수 있습니다..

이보기는이 메뉴에서 사용할 수 있습니다. 도구> 웹 개발자> 웹 디자인보기. 그리고,보기가 어떻게 생겼는지.

스타일 편집기

마지막으로 CSS를 자주 사용하는 경우이 기능에 만족할 가능성이 높습니다. 11 버전 이후로 Firefox가 추가되었습니다. 스타일 편집기 네이티브 개발자 도구.

이 기능은 웹 디자인보기, CSS를 편집하고 브라우저에서 즉시 영향을보고 CSS 소스 파일에 직접 영향을주는 변경 사항을 저장할 수 있습니다.

스타일 편집기는 다음 메뉴에서 사용할 수 있습니다. 도구> 웹 개발자> 스타일 편집기.

최종 생각

이 Firefox 부가 기능에는 많은 기능이 포함되어 있으며 여기에서 논의되는 기능은 웹 개발 중에 자주 사용하는 기능 중 일부입니다. 그럼에도 불구하고 Firefox의 웹 개발 생산성을 높이는 데 유용한 다른 팁이있을 수 있습니다..

어떤 기능을 자주 사용합니까? 아래 의견란에 의견을 나눌 수 있습니다..