Firefox 4를 온전히 지원하는 Firebug 1.7이 출시됐습니다. 그리고, 이번 버전에서 새로 소개된 몇몇 기능들을 설명하는 기회를 놓칠 수 없어 이렇게 이글을 씁니다.

Firebug 블로그를 구독하지 않거나 Firebug에 익숙치 않은 분들은 Firebug 세계를 좀 더 상세히 설명해 주는 다음과 같은 링크들을 확인해 보시기 바랍니다.

• Firebug: getfirebug.com
• 블로그: blog.getfirebug.com
• 위키: getfirebug.com/wiki/index.php/Main_Page
• 포럼: groups.google.com/group/firebug

DOM 저장소(Storage)

DOM 저장소는 이제 많은 웹 애플리케이션에서 중요한 부분이 되고 있습니다. 그래서, 우리는 DOM 패널(panel)을 통해 모든 (전역, 세션, 지역) DOM 저장소 객체의 내용을 쉽게 사용할 수 있게 만들었습니다.

또한 이런한 객체들의 로그를 남기기 위해 콘솔 패널을 사용할 수 있습니다. 예를 들어, 명령행에서 window.sessionStorage를 실행하면, 다음과 같은 출력이 나타납니다.

물론, 페이지 내에서 표준 console.log API를 사용하여 DOM 저장소 객체를 로그로 남길 수 있습니다. 두 방법 모두 결과는 같습니다.

큰 명령행 이력(Large Command Line History)

알고 계신 것처럼 Firgbug에는 두 가지 명령행 방식이 있습니다. 한줄 방식은 작은 명령행(Small Command Line)으로 불리고, 여러줄 방식은 큰 명령행(Large Command Line)이라고 불립니다. 한가지 새로운 점은 큰 명령행 방식으로 전환하는 경우 이전에 수행한 명령어들의 이력(history)이 남아 이를 실행할 수 있다는 것입니다.

이력(history)이 없는 경우에는 비활성화되고, 그렇지 않은 경우에는 클릭하여 목록을 확인할 수 있습니다. 또 하나의 새로운 기능이 다음 그림에 묘사돼 있습니다. 작은 명령행(Small Command Line) 방식에서도 왼쪽에 있는 버튼을 클릭함으로써 같은 목록을 확인할 수 있습니다.

날짜 객체 로그 남기기

날짜 객체를 로그로 남길 수 있는 기능은 Firebug 콘솔 로그에서 작지만 멋진 향상된 기능입니다. Date() 객체의 인스턴스를 로그로 남기면…

…인스턴스의 실제 값을 볼 수 있습니다. 저는 이 모든 작은 기능들이 Firebug 브라우저에 내장되는 개발 도구 중에 대표주자로 유지 시켜줄 것이라고 믿어 의심치 않습니다.

산출된 스타일 정렬(Sort Computed Styles)

이제 산출된 스타일들(computed styled)의 목록을 알파벳 순으로 정렬할 수 있습니다.(HTML 패널에서 가장자리에 있는 Computed 패널에서 사용 가능)

기본 정렬은 범주(category)입니다

중단 알림 메시지(Break Notification messages)

중단 알림 메시지 UI가 재설계 됐습니다. 그래서, 알림 메시지 자체가 최대한 간단한 UI를 갖습니다.

이런 변경 사항은 디버거를 통해 중단점을 사용할 때 의심할 여지없이 가장 중요한 일인, 사용자가 실제적으로 소스 코드를 보는 데 도움이 됩니다. 그림에서 볼 수 있는 것처럼(약간 번지기는 했지만 글씨를 읽을 수는 있죠), 알림 기능을 비활성화 할 수 있습니다. UX는 직관적이어야 하며, 빠르게 다시 활성화 할 수 있어야 합니다.

향상된 속성 표시

DOM 패널에 엘리먼트의 속성 목록을 표시하는 방법이 개선됐습니다(이번 개선은 제 개인적으로 오랜 동안의 바램이었습니다). 다음 그림을 보시기 바랍니다.

일반적으로 엘리먼트 속성 목록에서 원하는 것은 이름과 값입니다. 이 내용이 바로 이번 변화의 핵심입니다(이전에 이러한 정보를 얻기 위해서는 얼마나 힘들었는지는 아마 모르시는게 좋을 겁니다). 물론, 개개의 속성(DOM 노드에 해당)에 대한 모든 DOM 요소들을 알고 싶다면, 단지 원하는 항목에 클릭을 하고 더 자세히 살펴보면 됩니다.

파이어버그 시작 버튼 변경

파이어폭스4에 변화된 내용 중 하나는 상태 막대(status bar)가 없다는 것입니다. 상태 막대는 실질적으로 부가기능모음으로 대체됐지만… 요즘 추세가 브라우자 하단에 아무 것도 가지고 가지 않는 것입니다. 파이어버그의 진입점이 상태 막대였던 관계로, 우리는 대안을 마련할 수 밖에 없엇습니다.

이 버튼은 설치 후 자동으로 파이어폭스 툴바에 추가됩니다. 이 버튼은 상태 막대에 있던 이전 버전의 아이콘과 정확히 같은 역할을 합니다. 만약 이러한 UI에 익숙치 않게 느껴진다면 부가기능모음을 활성화 하여 거기에 있는 시작 버튼을 사용하면 됩니다.

시작 버튼과 관련된 더 자세한 내용은 여기를 보세요.

특정 스크립트 행으로 빠른 스크롤

사용자들이 스크립트 패널 등에서 특정 줄로 점프하는 기능에 대해서 잘 모른다는 생각이 들어 이를 보다 직관적으로 만들었습니다.

특정 줄로 이동하기 위해서 필요한 것은 # + 줄번호가 전부입니다(엔터를 누를 필요도 없습니다).

줄번호를 치면 스크립트 패널의 내용은 자동으로 스크롤 되고 해당 줄은 강조됩니다.

새로운 확장 API

Firebug architecture has been well improved and there are two new extension points that are worth mentioning.

Firebug 구조는 좋게 개선됐으며, 다음과 같은 새로운 두가지 확장 접점이 생겼습니다.

• 다른 확장 기능에서 Firebug 인스펙터를 재사용하기 위한 새로운 API
• 다른 확장 기능에서 Firebug 인포팁을 재사용하기 위한 새로운 API

Honza

원저자: Honza – 원문으로 가기