Firescope는 디버깅 패널에 레퍼런스 탭과 컨텍스트 메뉴를 추가하는 새로운 Firebug 확장기능입니다.
기능
- HTML 엘리먼트, HTML 속성, CSS 속성을 검색할 수 있습니다(조합도 가능합니다). 입력과 동시에 검색하므로, 한 두 글자만 입력해도 원하는 결과를 얻을 수 있습니다.
- 검색 결과에는 브라우저 호환성, 표준 준수, 간략한 사용 설명 등을 포함합니다. 더 많은 정보를 원하시는 분들을 위해 SitePoint 레퍼런스 웹 사이트로 연결하는 링크도 제공합니다.
- 검색 결과에서 마우스 오른쪽 버튼을 클릭하시면 두 가지 기능을 선택할 수 있습니다. 하나는 온라인에서 더 자세한 정보를 찾는 것이고, 다른 하나는 선택한 항목의 예제 코드를 보는 것입니다.
- 예제 코드는 레퍼런스, HTML, CSS 패널의 옆에 열립니다. 그리고, 해당 항목을 사용하는 방법에 대한 실전 예제를 간략한 설명과 함께 보실 수 있습니다. 예제 코드는 편집할 수 있으며, 복사하기도 편합니다(더블클릭하면 전체선택합니다).
- HTML 패널에서 엘리먼트 이름, 속성 이름 혹은 속성 값(편집도 가능)에서 오른쪽 버튼을 클릭하면 두가지 옵션 중 하나를 선택할 수 있습니다. 클릭한 항목을 "Look up"으로 살펴보거나 "Show Code Example"로 항목의 코드 예제를 볼 수 있습니다.
- 마찬가지로 CSS 패널에서도 속성 이름과 값 위에서 오른쪽 마우스 클릭을 할 수 있으며, 옵션도 같습니다.
- HTML 패널에서 현재 선택한 엘리먼트(보통 군청색 배경으로 강조)의 태그 이름 위에서 마우스 오른쪽 버튼을 클릭하면, 컨텍스트 메뉴에는 "Look up selection(선택영역 살펴보기)"사 나타납니다. 이 메뉴를 클릭하면 해당 엘리먼트에 정의된 모든 속성과 현재 적용된 모든 CSS 속성을 볼 수 있습니다. 이 기능은 "Reference" 탭을 클릭하면 자동으로 실행되어 현재 선택한 엘리먼트의 데이터를 보여줍니다.
- 검사기를 사용해 다른 엘리먼트를 선택할 때, HTML 패널 옆의 코드 예제(Code Example)을 열면 선택한 엘리먼트에 대한 예제를 자동으로 보여줍니다.
- 이와 유사하게, DOM 계층(crumbtrail)을 클릭할 때, 코드 예제(Code Exmaple) 패널이 열려있다면 열면 코드 예제를 보여줍니다. 메인 HTML 패널과 같은 컨텍스트 메뉴 항목이 있어 선택한 항목을 살펴보거나 관련한 코드 예제를 볼 수 있습니다.
'[IT] Web Tech' 카테고리의 다른 글
Gordon : 자바스크립트만으로 플래시를 실행한다! (4) | 2010.01.14 |
---|---|
제대로 막나가는(?) 프로젝트 - Skulpt (1) | 2009.08.14 |
iPhone 스타일의 패스워드 입력창 플러그인 (0) | 2009.08.06 |
구글 크롬 이클립스 디버거 (0) | 2009.08.06 |
FireScope: Firebug에 레퍼런스 추가하기 (0) | 2009.02.09 |
Firefox Trunk에 체크박스 미정 상태 지원이 포함되다! (0) | 2009.02.07 |
최신 iPhone에 포함된 HTML5 기능; 응용프로그램 캐시와 데이터베이스 (0) | 2009.02.04 |
IE='\v'=='v' (0) | 2009.01.30 |
Canvas와 신경망을 사용한 자바스크립트로 하는 CAPTCHA 크래킹 (0) | 2009.01.29 |
댓글을 달아 주세요