[JAVA SCRIPT] 브라우저 개발자도구를 활용한 넥사크로 디버깅

UI가 넥사크로인 프로젝트를 진행하다 보면

1. 고객은 웹브라우저에서 프로그램을 실행하고,

2. 개발자는 로컬에서 ①넥사크로런타임브라우저 또는 ②웹브라우저에서 프로그램을 실행한다.

  ① 런타임

     - 전용 브라우저에서 실행했을 때 마우스 우클릭 시, View Source 등을 지원하는 장점이 있다.

      

우클릭하면 Reload, View Source 등의 개발 편의를 제공한다.

 

   ② 웹브라우저

     - 고객과 동일한 환경에서 실행할 수 있는 장점이 있다.(css 등)

     - 그리고 무엇보다도 브라우저의 강력한 디버깅 기능을 사용할 수 있다.

 

 

 

이 글에서는 브라우저에서의 디버깅 방법을 아래 순서로 설명한다.

1. 넥사크로 스튜디오에서의 디버깅

 1-1. console.log 활용

 1-2. debugger 활용

2. 브라우저에서의 디버깅

 2-1. 개발자도구 엘리먼트탭의 요소선택으로 scope 접근

 2-2. 소스탭에서 중단점 지정

 2-3. 소스탭에서 포착되지 않은, 포착된 예외에서 일시중지

 

 

 

 

1. 넥사크로 스튜디오에서의 디버깅

 1-1. console.log 활용

     ① 보통은 추적 로그를 남기는 넥사크로 지원 메소드인 trace를 사용하며, 파라미터는 문자열이다.

     ② 하지만, trace도 console.log로 구현되어 있음을 확인할 수 있다.

넥사크로 프로젝트를 브라우저에서 실행후 콘솔에 trace를 쳐본다.

trace 가 정의 된 것을 확인 할 수 있다.

     ③ 런타임에서 trace로 dataset을 추적하면, 아래와 같이 toString() 메소드가 실행된 결과물이 문자열로 표시된다.

trace는 리턴값이 string이다. 넥사크로 스튜디오의 output에 표시된다.

     ④ 웹환경에서 console.log로 dataset을 출력하면, 아래와 같이 객체가 출력됨을 알 수가 있다. 이때 브라우저 개발자 도구의 강력한 기능을 활용할 수가 있는데, 표시된 객체에 마우스 우클릭하여 '전역 변수로 object 저장'을 클릭하면, 콘솔창에서 그대로 활용 할 수 있다.

1. trace대신 console.log 활용

2. 브라우저 개발자도구의 콘솔 탭에 객체가 출력된다.

3. 전역변수로 저장을 하면 temp1, temp2 ~~ 로 변수가 저장이 된다.

4. temp1.setColumn 등 데이터셋 메소드를 그대로 활용하여 콘솔창에서 디버깅이나 개발을 진행 할 수 있다.

     ☞ 런타임에서 trace 보다는, 웹환경에서 console.log를 활용해 보자

 

 

 1-2. debugger 활용

     ① 넥사크로 스튜디오에서는 debugger 가 키워드로 표시되긴 하지만 정작 제너레이트(컴파일)가 되지 않는다.

     ② 그냥 우회해서 eval("debugger;"); 로 하면 정상적으로 제너레이트도 되고, 브라우저에서 디버깅도 활용할 수 있다.

       (런타임에서 eval("debugger;");가 실행 되었을 때는 아무런 반응도 하지 않는다..)

debugger를 eval로 감싸면 제너레이트가 정상적으로 된다!

 

debugger키워드 시점에 중단점(break point)가 지정 되어 디버깅을 진행 할 수 있다. 콘솔탭의 scope가 중단점이 걸린 부분이 되어, 콘솔탭에 this를 쳐보면 Form을 확인 할 수 있다.

     ☞ javascript debugger; 를 활용해 보자 (debugger는 구글링을 통해 더 많고 유익한 정보를 얻을 수 있다.)

 

 

2. 브라우저에서의 디버깅

 2-1. 개발자도구 엘리먼트탭의 요소선택으로 scope 접근

     ① 개발자도구의 엘리먼트(요소) 탭에서 html의 Div 태그를 통해 scope를 추적할 수 있다.

1. 엘리먼트(요소)탭에서 요소선택을 클릭한다.

2. 웹페이지에서 div를 클릭한다.

     ② 넥사크로 17 예시

      nexacro.getApplication()는 최상위 객체이며 div id를 적당하게 붙여 this scope 내부로 접근이 가능하다.

     (최상위 객체에는 Global Dataset이 붙어 있다. ex) nexacro.getApplication().gds_menu 등등)

1. 엘리먼트(요소)탭에 표시된 div id를 복사한다.

2. 중간에 숫자로만 구성된 속성이 있을 경우, 적당히 브라켓 표기법 으로 객체에 접근이 가능하다.

     

     ③ 넥사크로 14 예시

      application는 최상위 객체이며 div id를 적당하게 붙여 this scope 내부로 접근이 가능하다.

1. 넥사크로 14는 id가 .이 아닌 _로 구성되어 있다.

2. _를 적당히 .으로 변경하여 this scope 내부로 접근이 가능하다.

 2-2. 소스탭에서 중단점 지정

     ① 넥사크로 프로젝트 폴더구조를 파악하고 있다면 소스탭에서 파일을 찾아, 중단점을 지정하여 디버깅을 진행할 수 있다.

192를 클릭하면 해당 행에 중단점이 지정된다. 이후 순차적으로 스크립트 실행 단계를 디버깅 할 수 있다.

 2-3. 소스탭에서 포착되지 않은, 포착된 예외에서 일시중지

     ① 스크립트 오류가 발생한다면 예외발생하는 시점에 중단점을 걸 수 있다.

transactionID라는 변수의 값이 undefined인데 split 메소드를 시도하다 오류가 나는 상황이다.

 

 

마치며

1. 웹 환경에서 실행되는 넥사크로 프로젝트는 결국엔 자바스크립트다.

 

2. 브라우저의 개발자도구는 강력하다.(넥사크로 스튜디오도 자체 디버깅 기능을 지원하긴 하지만..)

 ① console.log

 ② debugger

 ③ 중단점(break point) 등을 활용하면 더 나은 디버깅을 할 수 있다

 (구글링을 통해 더 많고 유익한 정보를 얻을 수 있다.)

 

3. 넥사크로 이외의 다른 상용 툴도 브라우저 디버깅 기능을 적극 활용 할 수 있다.

 ① eXBuilder6

 ② WebSquare 

 ③ SmartClient 등