CSS 개발
Firebug의 CSS 탭은 웹페이지에서 당신이 알 필요가 있는 스타일에 대한 모든 것을 알려줍니다, 그리고 당신이 원치 않는 것이 있다면, 그것을 변경할 수 있고 그 효과를 곧바로 확인할 수 있습니다.
상속 살펴보기
Firebug 없이, 사용자들에게 검정색으로 보여야할 헤드라인이 파란색으로 보일때 어리둥절 합니다. Firebug와 함께라면, 문제가 있는 엘리먼트를 가리켜 고개를 갸웃거리기 전에 문제를 일으킨 CSS를 발견할 수 있습니다.
Firebug는 각각의 엘리먼트에 상속된 룰을 보여줍니다. 룰들은 우선순위에 맞게 정렬되어 나타납니다, 그리고 덮어씌여진 속성에는 strike형태(가운데 줄이 그어진)로 나타납니다. 각각의 룰들은 클릭하면 그 룰이 온 해당 파일의 해당하는 라인으로 곧바로 갈수 있는 링크를 포함하고 있습니다.
색상과 이미지 미리보기
CSS탭에서 색상 또는 이미지 URL에 마우스를 올리면, 색상 또는 이미지를 미리보여주는 작은 툴팁이 나타납니다. 이미지 툴팁은 이미지 파일의 크기를 보여주고 특히 이미지 크기에 맞춰서 정밀하게 엘리먼트 크기를 조절하고자 할때 많은 시간을 절약하게 해줍니다.
미세조정하기
CSS를 수정하는 것은 이보다 쉬울수 없습니다. CSS 속성을 클릭하면 작은 텍스트에디터가 나타납니다. 당신이 타이핑하는대로, 즉시 변경되어 적용됩니다. 당신이 수정하려는 속성에 해당하는 가능한 값들이 타이핑하는데 맞춰서 자동완성이 될때 당신은 Firebug에 키스를 하고 싶어질 것입니다. escape키를 사용해서 변경을 취소할 수 있고, tab키를 사용해서 다음 속성으로 이동할 수 있습니다.
좀 더 크게, 좀 더 작게
단어를 타이핑할때 자동완성은 시간을 절약해주는데 아주 좋지만, 숫자를 타이핑 할때는 어떤가요? 완벽한 줄맞추기를 시도한다면, 숫자를 수정하기 위해 위아래 방향키를 사용하면 됩니다. Firebug는 1씩 증가시키거나 감소시킬수 있고, 또는 page up과 page down 키를 사용하여 10단위로 증감시킬 수 있습니다.
배우자
CSS를 배우고 있는 중이라면, Firebug는 당신의 실력을 향상시켜주는 아주 좋은 도구입니다. CSS 속성을 수정하는 동안에, 위 아래 방향키를 사용하면 속성에 사용가능한 값들을 알파벳순으로 순차적으로 보여줍니다. Firebug는 Mozilla에서 추가된 것과 함께 표준 CSS 키워드의 완벽한 사전을 메모리에 가지고 있습니다.
보거나 말거나
종종, 몇가지 CSS속성을 비활성화함으로 문제의 해결책이 될 수 있고 그것들을 빼고 어떻게 보이는지 알고 싶을 때가 있습니다. 각각의 속성위에 마우스를 올리면 왼쪽에 작은 동그란 아이콘을 볼 수 있습니다. 클릭하면 해당 속성이 비활성화 됩니다. 그리고 다시 클릭하면 다시 정상으로 됩니다.
스타일시트 보기
HTML탭이 하나의 엘리먼트에 대한 CSS를 알려주는 반면에, CSS탭은 전체의 스타일시트를 볼 수 있습니다. 툴바의 파일리스트를 클릭하면 페이지에 삽입된 모든 스타일시트를 볼 수 있습니다.
이미지 URL과 색상 복사하기
대다수에 있어서 copy-and-paste는 모든 개발의 핵심입니다. Firebug는 엘리먼트의 색상과 이미지 URL의 복사를 쉽게 해줍니다. 마우스 우측버튼을 클릭하면 클립보드를 사용하는 다양한 콘텍스트 메뉴를 볼 수 있습니다.
이미지의 URL을 복사하고 싶을 때 FireBug는 CSS가 상대적인 경로를 보여주더라도 이미지의 절대경로를 복사합니다.