blog
discuss
contribute
documentation

HTML 개발

Firebug는 페이지내에서 간단하게 HTML 엘리먼트를 찾는 것을 도와줍니다. 당신이 찾고 있는 것을 발견하면, Firebug는 다양한 정보를 제공하며 그리고 실시간으로 HTML 수정할 수 있도록 합니다.

실시간 소스보기

Firefox에 "소스보기"가 있습니다, 그러나 JavaScript에 의해서 변형된 HTML 소스가 실제로 어떻게 보여지는지 보여주지 않습니다. Firebug의 HTML탭은 즉시 실제로 보여지는 HTML을 보여줍니다.

게다가, 탭의 오른쪽에는 그것을 스타일링한 CSS규칙을 포함하고, 정의된 위치와 크기에 대한 픽셀값, 그리고 JavaScript를 통해 접근할수 있는 DOM속성에 대해 각각의 엘리먼트의 속성들을 보여줍니다.

하이라이트를 통해 변경된 부분 보기

JavaScript가 사용되어지는 웹사이트에서, HTML 엘리먼트는 끊임없이 생성되고, 제거되고, 수정됩니다. 무엇이 언제 그리고 어디에서 변경이 발생하는지 볼 수 있다면 멋지지 않나요?

변화가 발생했을때 Firebug는 즉시 변경된 HTML을 노란색으로 하이라이트하여 보여줍니다. 그 어떤 변화도 감지하기 위해서, scroll every change into view(변화가 있는 부분으로 스크롤 하기)라는 옵션이 있습니다, 그렇기 때문에 변화를 놓칠 일은 없을 것입니다.

즉시 HTML 수정

Firebug는 실험적으로 HTML 변경을 하고 그것이 어떤 효과를 나타내는지 곧바로 보기위해 재미있는 방법을 제공합니다. 클릭하거나 다음으로 가기위해 탭을 클릭하는 것으로 HTML 속성과 텍스트를 생성하고 삭제하고 수정할수 있습니다. 당신이 타이핑한 변화는 곧바로 적용되어집니다.

당신이 더 많은 수정을 하고자 할때, Firebug는 모든 엘리먼트의 전체 HTML 소스에 대해서 수정할 수 있도록 합니다. 엘리먼트를 우측클릭 하고 메뉴에서 "Edit HTML..." 를 선택하세요.

마우스를 사용하여 엘리먼트 찾기

페이지에서 뭔가 정상적으로 보여지지 않고 왜 그런지 알고 싶습니다. Firebug 툴바의 "Inspect" 버튼을 클릭하는 것만큼 그 대답을 얻는 빠른 방법은 없습니다. 그러면 즉시 당신을 만족시키기 위해 준비를 합니다. 페이지 위로 마우스를 움직이면, 마우스 아래 무엇이든지 곧바로 Firebug를 통해 드러납니다, 그 뒤로 HTML 과 CSS를 보여줍니다.

검색하라 너는 찾을 것이다

때론 당신이 찾고 있는 것을 보기 위해서, 그러나 그것을 페이지에서 찾을 수 없을 때. Firebug 툴바의 검색상자를 사용하여 HTML 소스를 찾을 수 있고 당신이 입력한 결과를 하이라이트하여 볼 수 있습니다.

확인, 수정, 리로드

HTML탭에서 엘리먼트를 가리켰을때, 페이지가 리로드되도 Firebug는 같은 엘리먼트를 보여줍니다 (그것이 여전히 존재한다면). 이것은 외부의 에디터에서 코드를 변경하고 Firefox로 돌아와 변경한 것이 어떻게 보여지는지 테스트하기 쉽게 해줍니다.

소스 복사하기

엘리먼트에서 우측클릭을 하면, 엘리먼트의 형태를 클립보드로 복사하기 위해 HTML 일부분을 포함한, "innerHTML" 속성에 의한 값, 또는 유일하게 엘리먼트를 식별하기 위한 XPath를 포함하는 몇가지 옵션을 가지고 있습니다.