로그

기본 로그

아래와 같이 $p.log API를 이용하여 기본 로그를 출력할 수 있습니다.

$r_title(로그 출력 예)
$p.log( ":::: WebSquare ::::" );

$p.log()함수를 이용한 로그는 다음과 같은 형태로 생성됩니다.

$r_title(로그 형태)
시간 이전로그출력후경과시간 첫로그출력후경과시간 로그출력기] 로그메시지

$r_title(로그 예시)
06:03:13.838 00032 013248 websquare] convertTypeB

위의 로그는 아래와 같이 해석할 수 있습니다.

브라우저 콘솔 로그

브라우저에서 console 객체를 지원해야 확인 가능합니다. 아래와 같이 console.log 메소드를 이용하십시오.

$r_title(로그 확인)
console.log( ":::: Console Log ::::" );

브라우저에서 로그 확인 (Chrome & IE 기준)

브라우저 실행 후 [F12]를 누르거나 브라우저 메뉴를 통해 개발자 도구를 실행할 수 있습니다. 아래의 방법으로 브라우저에서 로그를 확인할 수 있습니다.

1. 아래 경로에 있는 config.xml 파일을 엽니다.

   • 파일 경로: /WebContent/websquare/config.xml

2. 아래와 같이 설정하십시오.

   • <debug value="true" remoteConsole="false" console="true"/>

3. 브라우저에서 F12 단축키를 누릅니다.

4. 화면을 실행한 후 Console 탭을 선택합니다.

확인할 로그 타입 지정

클라이언트 환경 설정을 통해 개발자 도구 Console 창에서 출력할 로그 타입을 지정할 수 있습니다. 스튜디오에서 client.config.xml 파일을 아래와 같이 설정하십시오.

WebSquare5 제공 기능

디버깅용 컨텍스트 메뉴

WebSquare5로 작성한 화면의 스크립트는 WebSquare5 엔진 위에서 실행됩니다. 
화면 로그는 브라우저 경고 창으로 표현되지 않고 별도로 관리됩니다. 
아래의 방법으로 로그 메시지를 확인하십시오.

1. WebSquare5로 작성한 화면을 브라우저에 실행합니다.

2. 브라우저 상에서 [Ctrl+마우스 우클릭]합니다.

3. [로그보기]를 선택합니다.

디버깅용 컨텍스트 메뉴 허용 및 차단

WebSquare.logger의 enableContextMenu() 및 disableContextMenu() 함수를 사용하여 디버깅용 컨텍스트 메뉴 사용을 허용하거나 차단할 수 있습니다.

$r_title(사용 예)
// 디버깅용 컨텍스트 메뉴 허용
WebSquare.logger.disableContextMenu();


// 디버깅용 컨텍스트 메뉴 차단
WebSquare.logger.enableContextMenu();

위의 함수들은 config.xml 설정 파일의 <debugMenu> 항목의 설정 값에 상관 없이 사용할 있습니다. 즉, <debugMenu value="use"/> 혹은 <debugMenu value="block"/>으로 설정된 경우 모두 사용 가능합니다.

각 디버깅 메뉴 설명

로그 보기

DataCollection 보기

현재 컴포넌트와 바인딩된 DataCollection을 확인할 수 있습니다. 아래의 방법으로 실제 메모리에 할당된 데이터를 확인하십시오.

1. WebSquare5로 작성한 화면을 브라우저에 실행합니다.

2. 브라우저 상에서 [Ctrl+마우스 우클릭]합니다.

3. [dataCollection 보기]를 선택합니다.

페이지 소스 보기

1. WebSquare5로 작성한 화면을 브라우저에 실행합니다.

2. 브라우저 상에서 [Ctrl+마우스 우클릭]합니다.

3. [소스보기]를 선택합니다.

현재 화면 이벤트 출력 실행/중단

디버깅 메뉴 중 "현재 화면 이벤트 출력 실행" 및 "현재 화면 이벤트 출력 중단" 메뉴를 사용하면, 현재 화면에서 발생하는 이벤트 관련 로그들을 생성하거나 로그 생성을 중단할 수 있습니다. 이벤트와 바인딩된 컴포넌트, 스코프, 이벤트 이름, 이벤트 함수를 확인할 수 있습니다.

$r_title(로그 모양)
[EVENT LOG] id: [trigger3] scope id: [] ev: [onclick] : ev name: [scwin.trigger3_onclick]

Submission 보기

현재 화면에 포함된 Submission 객체를 확인할 수 있습니다. 또한, 현재 화면이 WFrame을 포함할 경우, WFrame의 src 화면에 포함된 submisison 객체를 함께 확인할 수도 있습니다.

브라우저 개발자 도구를 활용한 디버깅 (Chrome 기준)

다음은 Chrome 브라우저에서 F12를 눌러 개발자 도구를 실행한 모습입니다. Source 탭에서 관련 파일을 확인할 수 있습니다.

웹스퀘어5로 개발한 화면의 JS 파일은 _wpack_ 폴더 아래에 위치합니다. 화면에 해당하는 JS 파일을 선택한 후, 브레이크 포인트를 설정하여 개발자 도구에서 직접 디버깅을 수행할 수 있습니다.