구글 크롬에는 V8 디버거라는 자바스크립트 디버거도 있습니다만, 이번에 새롭게 크롬 개발툴 프로토콜(Chrome Dev Tools Protocol)이라는 것을 선보였습니다.
V8 디버거는 자바스크립트 디버깅만 할 수 있었고, 하나의 V8 가상 머신에서만 동작했었습니다. 사실 하나의 구글 크롬 인스턴스에는 렌더링 프로세스에 따라 한 개 이상의 V8 가상 머신이 존재할 수 있습니다. 게다가 브라우저 탭에서 URL을 가져오거나 DOM 트리를 탐색하고 수정하는 작업은 자바스크립트 만으로는 다룰 수 없습니다.
이러한 제약때문에 원격 디버거와 디버깅되는 프로세스간에 추가 정보를 주고받을 수 있는 크롬 개발툴 프로토콜을 만들었습니다. 크롬 개발툴 프로토콜은 현재의 V8 디버거 프로토콜을 비롯한 다른 디버깅 관련 프로토콜의 전송 수단으로도 사용할 수 있습니다.
이 프로토콜을 사용해서 만든 도구 중 하나가 바로 이클립스 기반의 디버거입니다.
원격 디버거에 대한 노력은 그 밖에도 많이 있습니다. 한가지 예로, 오페라 드래곤플라이의 디버깅 및 검사 아키텍쳐인 스코프 인터페이스를 들 수 있습니다. 파이어버그 역시 웹 디버그 프로토콜을 가지고 있으며, ActiveState 에서 사용하던 전통있는 DBGP도 있습니다.

from Google Chrome Eclipse Debugger

Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요


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

댓글을 달아 주세요

Michael Mahemof 씨가 HTML을 iframe에 넣고 추출하는 방법에 대해 작성하셨습니다. 원래 TiddlyWiki를 많이 사용하시는 분인데, 소스를 보다가 알게된 방법이라고 합니다. 이것은 그런 일을 하는데에 브라우저 파서를 사용할 수 있게 해줍니다:
[code:js]
// put it in
var doc = iframe.document;
if (iframe.contentDocument)
  doc = iframe.contentDocument; // For NS6
else if(iframe.contentWindow)
  doc = iframe.contentWindow.document; // For IE5.5 and IE6
 
// Put the content in the iframe
doc.open();
doc.writeln(content);
doc.close();
 
// and then get it out
var storeArea = doc.getElementById("storeArea");

from Introducing HTML into an iframe and getting it back
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요