울면서개발하기
JAVA SCRIPT / NEXACRO

크롬 개발자도구로 넥사크로 화면 디버깅하기

· 2026년 10월 25일 다시 씀

넥사크로 화면을 개발할 때 실행 방법은 두 가지다.

  1. 넥사크로 런타임(NRE) 전용 브라우저 — 오른쪽 클릭 메뉴에 Reload(Ctrl+F5), View Source(Ctrl+F7) 같은 개발 편의 기능이 있다.
  2. 일반 웹 브라우저(WRE) — 사용자와 같은 환경(CSS 등)에서 확인할 수 있고, 무엇보다 브라우저 개발자도구를 그대로 쓸 수 있다.

웹으로 실행되는 넥사크로 화면은 결국 자바스크립트다. 이 글은 크롬 개발자도구(F12)로 디버깅하는 방법을 정리한다. 화면 이름은 한국어 크롬 기준이고 괄호에 영어 이름을 함께 적었다.

1. 스크립트에서: trace 대신 console.log

trace 는 문자열로 바꿔서 찍는다

넥사크로에서는 로그를 trace 로 남기는데, 웹 환경에서 콘솔에 trace 를 입력해 보면 정의를 볼 수 있다. 제가 본 버전(넥사크로 17)의 SystemBase_HTML5.js 에서는 대략 이렇게 되어 있었다.

if (window.console) {
  window.trace = function () {
    var a = arguments;
    var n = arguments.length;
    switch (n) {
      case 1:
        window.console.log(a[0] + '');
        break;
      // ...
    }
  };
}

a[0] + '' 로 문자열로 바꾼 뒤 console.log 에 넘긴다. 그래서 trace(this.ds_main) 을 하면 스튜디오 Output 창에도, 콘솔에도 객체 대신 [object Dataset] 이라는 글자만 남는다.

console.log 는 객체를 그대로 보여 준다

웹 환경에서는 console.log 를 쓰면 객체가 그대로 찍히고, 펼쳐서 속성을 볼 수 있다.

console.log(this.ds_main);
// ▶ nexacro.NormalDataset {name: 'ds_main', id: 'ds_main', parent: ..., colinfos: ...}

여기서 쓸모 있는 기능이 전역 변수로 저장(Store as global variable) 이다. 콘솔에 찍힌 객체를 오른쪽 클릭해서 고르면 temp1, temp2 … 라는 이름으로 저장된다.

콘솔에 찍힌 데이터셋 객체의 오른쪽 클릭 메뉴에서 ’전역 변수로 object 저장’을 고르는 화면

그 다음부터는 콘솔에서 데이터셋 메서드를 바로 실행해 볼 수 있다.

temp1.getRowCount();
temp1.getColumn(0, "EMP_NAME");
temp1.setColumn(0, "EMP_NAME", "홍길동");

한 가지 주의할 점: 콘솔에서 객체를 펼치는 순간의 값이 보인다. 로그를 찍은 시점의 값이 아니라 지금 값일 수 있으니, 그 시점의 값이 중요하면 console.log(this.ds_main.saveXML()) 처럼 문자열로 찍는다.

2. 스크립트에서: debugger 문

debugger; 문이 실행되면 개발자도구가 열려 있을 때 그 줄에서 멈춘다. 그런데 제가 쓴 넥사크로 스튜디오(17)에서는 debugger 가 키워드로 색칠은 되지만 제너레이트(컴파일)가 되지 않았다. 그래서 eval 로 감싸서 우회했다.

this.Form_onload = function (obj, e) {
  eval("debugger;");
  // ...
};

이렇게 하면 제너레이트도 되고, 브라우저에서 그 줄에서 멈춘다. 멈춘 상태에서 콘솔에 this 를 입력하면 현재 Form 을 확인할 수 있다(직접 eval 은 호출한 함수의 this 를 그대로 쓴다). 넥사크로 런타임 전용 브라우저에서는 아무 반응이 없다.

eval 은 감리 지적 대상이므로 확인이 끝나면 반드시 지운다. 코드를 고치지 않고 멈추고 싶다면 아래 3-2 의 중단점이나, 콘솔에서 debug(함수) 를 쓰는 방법도 있다. 아래 3-1 의 방법으로 찾은 Form 을 콘솔에서 변수에 담아 두고(var f = ...) debug(f.fn_search) 처럼 등록하면 그 함수가 호출될 때 멈춘다. 콘솔 전용 함수라 스크립트 안에서는 쓸 수 없고, 해제는 undebug(f.fn_search) 다.

eval(“debugger;”) 에서 멈추지 않을 때

최근 크롬은 eval 이나 콘솔에서 만든 익명 스크립트를 무시 목록(Ignore list) 에 넣을 수 있다. 이 설정이 켜져 있으면 eval("debugger;") 에서 멈추지 않는다. 개발자도구 설정(톱니바퀴) → Ignore list → Anonymous scripts from eval or console 체크를 해제한다.

크롬 개발자도구 설정의 Ignore list 에서 Anonymous scripts from eval or console 항목

3. 브라우저에서: 코드를 고치지 않고 디버깅하기

3-1. 요소 선택으로 컴포넌트 객체 찾기

넥사크로 컴포넌트는 HTML 에서 div 로 그려지고, id 에 컴포넌트 경로가 들어 있다. 이것을 이용하면 화면에서 클릭한 컴포넌트의 객체를 콘솔에서 바로 잡을 수 있다.

  1. 요소(Elements) 패널 왼쪽 위의 요소 선택 아이콘(Ctrl+Shift+C)을 누르고, 화면에서 원하는 영역을 클릭한다.
  2. 선택된 div 의 id 를 복사한다. 콘솔에서 $0.id 를 입력해도 선택한 요소의 id 가 나온다.
  3. id 를 객체 경로로 바꿔서 콘솔에 입력한다.

넥사크로 17 / N 은 id 가 점으로 이어져 있다. 최상위 객체 nexacro.getApplication() 뒤에 그대로 붙이면 되는데, 중간에 숫자로만 된 이름이 있으면 그 부분만 브라켓 표기법으로 바꾼다.

// 요소의 id: mainframe.HFrameSet00.VFrameSet00.WorkFrame.1234.form.div_content.form.div_search.form
nexacro.getApplication().mainframe.HFrameSet00.VFrameSet00.WorkFrame["1234"].form.div_content.form.div_search.form;
// ▶ nexacro._InnerForm {name: 'form', id: 'form', parent: ...}

전역 데이터셋도 최상위 객체에 붙어 있어서 nexacro.getApplication().gds_menu 처럼 볼 수 있다.

넥사크로 14 는 최상위 객체가 application 이고, id 가 점 대신 밑줄(_)로 이어져 있다. 밑줄을 점으로 바꿔 주면 되는데, 컴포넌트 이름 자체에도 밑줄이 있으므로(div_login) 어디서 끊을지는 이름을 보고 판단한다.

// 요소의 id: mainframe_VFS_LoginFrame_form_div_login_div_loginBox_edt_id_input
application.mainframe.VFS.LoginFrame.form.div_login.div_loginBox.edt_id;
// ▶ nexacro.Edit {name: 'edt_id', id: 'edt_id', ...}

3-2. 소스 패널에서 중단점 걸기

소스(Sources) 패널의 페이지(Page) 탭에서 화면 파일을 찾을 수 있다. 화면 하나는 화면이름.xfdl.js 로 생성되어 프로젝트 폴더 구조대로 보인다. Ctrl+P 로 파일 이름을 검색하면 빠르다.

줄 번호를 클릭하면 중단점이 걸리고, 그 뒤로 한 줄씩 실행(F10), 함수 안으로(F11) 등을 쓸 수 있다. 줄 번호를 오른쪽 클릭하면 다음도 고를 수 있다.

  • 조건부 중단점 추가(Add conditional breakpoint) — e.row === 3 처럼 조건이 참일 때만 멈춘다
  • 로그포인트 추가(Add logpoint) — 멈추지 않고 콘솔에 값만 찍는다. 코드에 console.log 를 넣었다 지우는 일을 줄여 준다

3-3. 예외에서 일시중지

원인을 모르는 스크립트 오류가 날 때 가장 빠른 방법이다. 소스 패널 오른쪽 중단점(Breakpoints) 영역에서 두 가지를 체크한다.

  • 포착되지 않은 예외에서 일시중지(Pause on uncaught exceptions)
  • 포착된 예외에서 일시중지(Pause on caught exceptions) — 넥사크로나 프로젝트 공통 코드가 try/catch 로 오류를 삼키는 경우에 필요하다

예외가 나는 순간 그 줄에서 멈추고, 오른쪽 범위(Scope) 영역에 지역 변수 값이 모두 보인다. 예를 들어 transactionId.split(".") 에서 멈췄을 때 transactionId 가 undefined 인 것을 바로 확인할 수 있었다. 포착된 예외까지 켜 두면 라이브러리 내부 예외에서도 자주 멈추므로, 원인을 찾은 뒤에는 꺼 둔다.

정리

  • 웹으로 실행되는 넥사크로 화면은 자바스크립트이므로 브라우저 개발자도구를 그대로 쓸 수 있다
  • trace 는 문자열로 바꿔 찍는다. 객체를 보려면 console.log + 전역 변수로 저장
  • 스크립트에 멈출 곳을 넣어야 하면 eval("debugger;")(확인 후 삭제), 멈추지 않으면 Ignore list 설정 확인
  • 코드를 고치지 않으려면 요소 선택으로 객체 찾기, 중단점·로그포인트, 예외에서 일시중지

eXBuilder6, WebSquare 같은 다른 웹 UI 도구도 같은 방법으로 디버깅할 수 있다.

다시 쓰며 바로잡은 점

  • trace 가 객체를 [object Dataset] 으로 보여 주는 이유(a[0] + '' 로 문자열 변환)를 코드로 밝혔다.
  • 직접 eval 안에서 this 가 Form 인 이유를 덧붙이고, 확인 후 지워야 한다는 점과 debug()·조건부 중단점·로그포인트 같은 대안을 추가했다.
  • 개발자도구 메뉴 이름을 현재 크롬 기준(한국어·영어)으로 맞췄다.