블로그 이미지
ssun++

카테고리

[전체] (73)
Android (7)
JavaScript (9)
CI (5)
Language (14)
ETC (38)
Total317,159
Today1
Yesterday22

'Inspector'에 해당되는 글 4건

  1. 2011.10.25 Inspector와 WebCore 연동
  2. 2011.10.25 Inspector 리소스 사용
  3. 2011.06.11 자바스크립트 디버깅 2
  4. 2011.04.03 자바스크립트 디버깅
[시작]
외부 리소스 만으로는 기능을 다 할 수 없기 때문에 WebCore와 연동이 필요합니다.

[Agent들]
WebCore에는 Inspector의 개별 기능을 담당하는 agent들이 있습니다.
agent는 InspectorXXXAgent라는 이름을 가지며 기능단위로 분리되어 있습니다.
(예. InspectorDOMAgent, InspectorConsoleAgent 등등)

[Message 던지기]
Inspector는 실제로는 WebKit 외부의 html 페이지입니다.
WebCore와의 연동을 위한 연결 고리가 필요하며, InspectorFrontendHost가 그 역할을 합니다.
(inspector.js의 WebInspector는 js에서 정의한 object이며 WebKit의 WebInspector와는 무관)

WebCore/inspector/InspectorFrontendHost.idl 파일을 통해
<빌드경로>/obj/DerivedSources/JSInspectorFrontendHost.cpp가 생성됩니다.
이는 외부에서 InspectorFrontendHost라는 object를 사용할 수 있다는 뜻이며,
실제 함수 호출은 InspectorFrontendHost.cpp의 함수들을 호출합니다.

WebCore로 던질 수 있는 message는 JSON 형태이며 InspectorBackendStub.js에 정의되어 있습니다.
InspectorFrontendHost.prototype.sendMessageToBackend() 메소드를 통해 WebCore로 전달됩니다.
여차저차 하여 InspectorBackendDispatcher에서 message를 파싱하고
message에 해당하는 agent를 찾아 필요한 함수를 호출하게 됩니다.

대략적인 구조는 아래와 같습니다 (파란색은 외부 js, 오렌지색은 WebCore).
 

[끝]
쓸 얘기는 다 쓴 것 같은데 급하게 정리한 느낌이 나네요 :p
아무튼 Inspector 얘기는 마무리. 
Posted by ssun++

댓글을 달아 주세요

[시작]
Inspector의 리소스 사용에 대해 알아봅니다. (windows 포팅 기준)


[Inspector]
크롬에는 "Developer Tools"라는 이름으로 들어가 있는 기능입니다.
(오른 클릭 -> 요소 검사 or 단축키 F12)

 
출력되는 내용은 html, js, css로 구성되어있으며 WebCore와 연동됩니다.


[리소스 복사]
원본 리소스는 아래의 파일들입니다.

  • WebCore/inspector/front-end/모든 파일
  • <빌드 경로>/obj/WebCore/DerivedSources/InspectorBackendStub.js
  • WebCore/English.lproj/localizedStrings.js
  • WebCore/English.lproj/Localizable.strings 


copyWebCoreResourceFiles.cmd 실행시 아래 경로로 복사됩니다.
(WebCoreGenerated 프로젝트)

  • <빌드경로>/bin/WebKit.resources/inspector 
  • <빌드경로>/bin/WebKit.resources/en.lproj 

 
 

[리소스 사용]
WebKit1
WebInspectorClient::openInspectorFrontend() 함수 수행 중 위 경로에 대한 URL을 만듭니다.

WebKit2
WebInspectorProxy::inspectorPageURL() 함수에서 위 경로에 대한 URL을 반환합니다.

inspector 페이지의 URL에 대한 view를 생성하면 inspector가 출력됩니다.

[끝]
다음은 Inspector와 WebCore 연동되는 부분을 보겠습니다.
Posted by ssun++

댓글을 달아 주세요

[들어가기전]
지난 포스팅에서 Inspector의 'Script' 탭에서 디버깅하는 방법을 살펴보았습니다.
이번에는 'Console' 탭을 이용해서 디버깅하는 방법을 간단하게 확인할 예정입니다.

[console object]
크롬(&사파리)에서는 javascript에서 console이라는 object를 사용할 수 있습니다.
 console object는 아래와 같은 method를 가지고 있으며, Inspector의 Console 탭에 로그를 출력합니다.


1. debug() / info() / log() : 단순 출력
method 이름은 다르지만 내부적으로 동일한 동작을 합니다.
코드 : console.debug("debug입니다");


2. warn() : 단순 출력

코드 : console.warn("warn입니다");


3. error() : 단순 출력

코드 : console.error("error입니다");


4. dir() : object의 정보 출력
코드 : console.dir(new Car());

Car 정의




5. dirxml() : element의 정보 출력
아래 캡쳐보다 많은 항목들이 출력됩니다.
코드 : console.dirxml(document.getElementById("myDiv"));


6. trace() : 호출시의 콜스택 출력
코드 : onload()함수 -> callTrace()함수 -> console.trace() 호출


7. assert() : 조건이 false인 경우 로그 출력(error()와 같은 level)
코드 : console.assert(0>1);


8. count() : 해당코드를 호출한 횟수를 출력
코드 : console.count("카운트"); // for 문으로 3회반복


9. profile() / profileEnd() : Time Profile 생성 (Pair 호출)
"Profile XX" 텍스트를 클릭하면 구간에 대한 profile을 확인할 수 있습니다.
코드 : console.profile(); /* 코드 */ console.profileEnd();


10. time() / timeEnd() : 시간 측정 (Pair 호출)
time() 호출시 출력내용은 없고, timeEnd() 호출시 측정값이 출력됩니다.
코드 : time(); /* 코드 */ timeEnd();


11. group() / groupCollapsed() / groupEnd() : 출력내용 묶음 (Pair 호출)
group() 또는 groupCollapsed()와 groupEnd() pair 호출입니다. (하위항목 펼침/접음)
코드 : group("groupA"); /* 코드 */ groupEnd();

코드 : groupCollapsed("groupB"); /* 코드 */ groupEnd();


12. markTimeline()
정체불명. 아시는 분 있으시면 가르쳐주세요.

[마침]
'Scripts' 탭에서는 코드 실행중의 흐름 제어가 가능했다면
'Console' 탭에서는 원하는 내용의 출력을 통해서 동작을 확인할 수 있습니다.
필요에 따라서 적절하게 사용하면 될 것 같습니다. 
Posted by ssun++

댓글을 달아 주세요

[Inspector]
웹킷 기반 브라우저에는 Inspector가 있습니다.
크롬에서는 오른 클릭해서 '요소 검사'. 사파리에서는 오른 클릭해서 '구성 요소 점검'.
을 선택하면 브라우저 하단에 등장하는 '그것' 입니다.

기본으로는 'Elements'탭이 선택되어있고.
오른 클릭한 위치의 Element에 대한 정보를 확인/수정해볼 수 있습니다.

[자바스크립트 디버깅]
Inspector에서 'Scripts' 탭을 선택해서 자바스크립트 디버깅을 할 수 있습니다.
 
 

1. 디버깅할 파일을 선택
스크립트가 포함된 html 파일, js 파일을 선택할 수 있습니다.

2. Break point 설정, 흐름 제어
라인 넘버 클릭시 break point 설정/해제가 가능합니다.
설정된 라인은 파란색으로 표시되고, 현재 실행중인 라인은 화살표가 붙습니다.
오른쪽의 버튼은 순서대로 <계속실행>, <라인단위 실행>, <함수 내부로 들어가기>, <함수 밖으로 나가기>, <모든 break point 해제> 입니다.

3. 값, 호출스택 확인
<Watch Expression>은 'Add'로 추가한 식의 값을 확인할 수 있습니다.
<Call Stack>은 말 그대로 호출 스택입니다.
<Scope Variables>는 지역, 전역 변수 값을 확인할 수 있습니다.
그밖에 break point 위치를 확인할 수 있고, 이벤트 리스너에도 break point를 설정하는 등등의 기능이 있습니다.
 
[마침]
alert 창을 띄우거나 컨텐츠 내부에 동작 확인을 위한 코드를 넣을 필요없이
컨텐츠 외부에서 동작을 확인할 수 있는 점이 좋은 것 같습니다 :)
Posted by ssun++

댓글을 달아 주세요

최근에 달린 댓글

최근에 받은 트랙백

글 보관함