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 패널과 같은 컨텍스트 메뉴 항목이 있어 선택한 항목을 살펴보거나 관련한 코드 예제를 볼 수 있습니다.
from FireScope: Add a Web reference to your Firebug
Posted by 행복한고니 트랙백 1 : 댓글 0

댓글을 달아 주세요

사용자 삽입 이미지
Nitobi 에서 크로스 브라우저 디버깅 스크립트인 NitobiBug를 릴리스했습니다:
이것은 브라우저 기반의 JavaScript  객체 로거이자 인스펙터입니다 - Firebug와 유사하죠. NitobiBug는 일관성과 rich Ajax 응용프로그램 개발을 위한 강력한 도구를 제공하기 위해 다른 브라우저에서도 동작합니다(IE6+, Safari, Opera, Firefox).
이렇게 사용할 수 있습니다:
[code:js]
// inspect an object
var myObject = {a:234523, something:'else', mylist:[32423,4556,'sdfs']}; nitobi.Debug.log(myObject);
 
// inspect a DOM element
var myDomObject = document.getElementById('someID'); nitobi.Debug.log(myDomObject);
 
// output text
nitobi.Debug.log("This is a test");
창의 위치를 기억하며, DOM 디버그 창의 "show me" 링크를 클릭하면 강조된 엘리먼트를 (가능하다면) 보시게 될 것입니다.


from NitobiBug: Cross browser debugging
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

Mike Wilcox씨가 Dojo를 위한 Firebug Lite에 대한 글을 작성하고 그것이 어떻게 console.log()를 뛰어넘었는지를 보여주었습니다.

꽤 그럴 듯 해보이는 것 같습니다. ^^
사용자 삽입 이미지

Dion씨는 DOM Inspector 가 가장 흥미로웠다고 하는군요.
사용자 삽입 이미지


from Dojo Firebug Lite: Beyond console.log on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

IE를 버전별로 테스트하는 것은 짜증나고 힘든 일입니다. Microsoft가 Windows에 여러 버전의 브라우저를 사용할 수 없도록 했기 때문이죠. 물론, 이런 제한을 우회할 해결책이야 찾으면 있습니다만, 경험상 늘 예기치 않은 결과를 가져오고 불안정하거나 VM을 실행해야합니다. 좋진 않죠.

IE 디버거 중 하나인 DebugBar를 만드신 Jean-Fabice RABAUTE 씨가, IETester 라 부르는 괜찮은 해결책을 제시했습니다. 이것을 이용하면 Vista와 XP에서의 IE8 beta 1, IE7, IE6, IE5.5의 렌더링과 JavaScript 엔진을 한 프로세스 안에서 테스트할 수 있도록 해줍니다.
사용자 삽입 이미지
동영상도 함께 보세요.

ScreenCast IETester from WebInventif.fr on Vimeo.

from Testing IE Versions Just Got a Little Easier on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

Firebug 1.2 beta 가 릴리스 되면서 FF3RC1 을 지원하게 되었습니다. 보다 잘 동작하게 되었다거나 성능이 좋아지거나 내부적으로 재설계된 것이 대부분인 것 같습니다.

중요한 점이 있다면 UI가 활성화되지 않으면 디버거도 동작하지 않아 부하를 줄이게 됐다는 것입니다. 비단 디버거 뿐만 아니라 HTML, CSS, DOM 등도 UI가 활성화 될 때만 같이 활성화되고, Script, Net 등의 패널은 "처음엔 사용하지 않음" 혹은 "항상 사용함"으로 설정할 수 있습니다.

위 기능 때문에 허용할 사이트(Allowed Sites)와 같은 기능은 사라지게 되었습니다.

from Firebug 1.2 beta for Firefox 3 RC 1 on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

사용자 삽입 이미지
Opera에서 새로운 멋진 웹 디버깅 툴 Opera Dragonfly가 알파버전으로 릴리스 됐다고 합니다.

JavaScript 디버깅, CSS와 DOM 조사(inspect), 에러 보기 - Opera Dragonfly는 Opera를 사용한 개발을 컴퓨터나 모바일 전화기에서나 한층 쉽게 만들어줍니다.

Shawn Lauriat씨가 관련된 이야기에 대해 글을 썼습니다.

기능

  • 단계별 중단점 설정: Opera Dragonfly의 풍부한 기능을 갖춘 JavaScript 디버거는 복잡한 Ajax 응용프로그램을 보다 쉽게 작성하도록 합니다. 코드를 줄 단위로 실행하며, 중단점을 설정할 수 있습니다. 이를 이용해 설계한 대로 스크립트가 잘 동작하는지 확인할 수 있습니다.
  • 스타일 재정의: 조사할 수 있는 것은 DOM 만이 아닙니다. 엘리먼트에 어떤 CSS가 적용되었는지, 무엇을 상속받았는지 혹은 브라우저에 의해 기본값으로 설정된 것은 무엇인지 확인할 수 있습니다. 재정의된 규칙은 강조되므로 어떤 스타일이 적용되고 어떤 스타일이 적용되지 않았는지 알 수 있습니다. CSS 규칙 편집 기능은 다음 버전에서 추가될 것입니다.
  • 에러 검출: 개선된 오류 콘솔은 스크립트에서 발생한 오류 기록을 보거나 필터링 할 수 있으며, 에러가 발생한 정확한 위치를 가리킵니다. 사이트의 버그를 찾아내고 수정하는데 다른 툴과 이를 조합해서 사용하세요.
  • DOM 디버깅: 소스 보기는 DOM을 대체하는 DOM스크립팅을 사용할 때 유용하지 않습니다. Opera Dragonfly는 업데이트된 DOM 및 모든 프로퍼티를 조사할 수 있습니다. DOM 편집 기능은 다음 버전에서 추가될 것입니다.

몇몇 기능들은 아직 포함되지 않았으나 곧 포함될 예정입니다. 이를 테면, CSS, JavaScript, DOM 편집 지원, 단일창 모드, 개선된 JavaScript 스레드 핸들링, XHR과 HTTP 모니터링, 개선된 키보드 네비게이션, 여러 언어로 번역 등이 있습니다.

Firebug는 이제 웹 브라우저 디버거들의 기준이 되어버린 느낌입니다. 무료로 사용할 수 있는 Firebug 수준의 디버거들이 여러 브라우저에서 늘어나기만 한다면 정말 대환영일 것 같습니다. Dragonfly가 제 역할을 해준다면 이제 사파리하고 IE만 남았군요.

from Opera Dragonfly : New Web Tooling on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

이벤트 호환성 표

2008. 5. 7. 00:30 from [IT] Web Tech

PPK 씨가 이벤트 등록 모델(traditional, W3C and Microsoft)과 이벤트 버블링 및 캡쳐를 테스트한 이벤트 호환성 표를 공개했습니다.

다양한 브라우저의 quirks 모드에 대한 많은 데이터가 있습니다.

이벤트 호환성 테이블

이벤트 호환성 테이블


from Events Compatibility Tables on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요