도킹창은 용도에 따라 크게 프로젝트 탐색, 속성 편집, 메시지, 디버그창으로 나뉩니다. 사용할 수 있는 도킹창은 메뉴 [View] 또는 리본 메뉴 [VIEW - Panes]에서 확인할 수 있습니다.
프로젝트 탐색 (Project Explorer)
프로젝트 탐색 창에서는 프로젝트에 포함된 모든 항목을 트리 형태로 표시해줍니다. 프로젝트 탐색창은 아래와 같이 보입니다.
설명 | |
|---|---|
1 | 검색 및 필터 기능을 적용할 서비스(또는 전체 프로젝트) 선택 ▼ 버튼 클릭 시 프로젝트의 Service 목록이 표시되고 검색 및 필터에서 제외할 Service를 체크 해제할 수 있습니다. Envinronment, TypeDefiniction, Application Information은 검색 및 필터 대상에서 제외할 수 없습니다. |
2 | 검색 및 필터 기능을 적용할 검색어 입력 창 검색어 입력 후 엔터키 또는 F3 키를 입력하면 해당하는 항목이 선택 상태로 변경됩니다. (입력하는 항목은 대소문자 구분을 하지 않습니다) |
3 | 검색창에 입력된 값과 일치하는 항목을 차례로 검색 |
4 | 검색창에 입력된 값과 일치하는 항목만 필터링해서 표시 검색어 입력창에 검색어 입력 후 필터링 아이콘을 클릭하면 검색어와 일치하는 문자열이 포함된 파일 또는 파일이 포함된 서비스만 화면에 표시합니다. |
5 | 프로젝트가 포함하고 있는 파일 및 요소 표시 |
검색
프로젝트에 포함된 파일 및 하위 요소를 대상으로 검색을 처리합니다. 검색어 입력 후 엔터키(또는 F3키)를 치면 바로 검색이 진행되며 다음 검색을 진행하려면 F3키를 입력합니다.
'TEST'라는 검색어를 입력하고 검색 아이콘을 클릭하면 Application Variables의 Dataset 오브젝트와 Base 서비스 내에 있는 Form 중에서 'TEST'가 포함된 항목을 차례로 선택합니다.
필터 (Filter)
필터 기능은 서비스 내에 포함된 파일과 파일 내 속성을 대상으로 입력된 항목이 포함된 파일만 필터링해서 보여주는 기능입니다.
Form 파일을 열지 않은 상태에서는 Form 파일 이름만을 대상으로 필터링을 진행하고 Form 파일을 편집하고 있는 중에는 Form에 포함된 컴포넌트 id나 기타 속성을 대상으로 필터링을 진행합니다.
Form 파일을 열지 않은 상태에서 'form'이라는 검색어를 입력하고 필터 기능 아이콘을 클릭하면 Form 이름에 'form'이 포함된 파일만 보입니다.
필터 기능은 프로젝트 진행 시 업무에 따라 파일(Form) 이름을 정하는 규칙을 지정하는데 원하는 업무에 해당하는 파일을 쉽게 찾을 수 있도록 제공하는 기능입니다.
프로젝트 검색과 필터 기능에서 서비스에 포함된 Form 파일을 열지 않은 상태에서는 Form 파일 이름만을 대상으로 처리되며 Form 파일을 열고 난 후에는 Form에 포함된 레이아웃이나 스크립트 관련 속성까지 포함해 처리됩니다.
프로젝트 검색은 전체 프로젝트에 포함된 아이템과 파일, 파일에 포함된 항목을 대상으로 하지만 필터 기능은 서비스 내에 사용자가 생성한 파일만을 대상으로 처리합니다.
복사
프로젝트 탐색 또는 리소스 탐색창에 있는 항목을 복사한 후 붙여넣기를 하면 _copy라는 문자열을 추가해 항목을 생성합니다. 복사할 수 있는 항목은 아래와 같습니다.
프로젝트 탐색 | Form |
|---|---|
리소스 탐색 | InitValue UserFont ImageResource |
리소스 탐색 (Resource Explorer)
프로젝트에 포함된 리소스 파일을 표시하고 추가로 생성하거나 기존에 생성한 파일을 가져올 수 있습니다.
항목 | 설명 | |
|---|---|---|
1 | New Resource | 새로운 리소스 파일을 생성합니다. |
2 | Import Resource | 기존에 생성한 리소스 파일을 프로젝트에 추가하거나 xpackage 파일을 선택하고 Import Wizard를 실행합니다. |
속성 편집(Properties)
편집 중인 Form이나 컴포넌트, Dataset 등에 대한 속성 및 이벤트 항목을 표시하고 편집할 수 있습니다.
오브젝트 선택하기
편집 중인 Form에 포함된 모든 컴포넌트, Dataset 등을 id 값 (오브젝트 명) 목록으로 보여줍니다. 선택한 오브젝트에 따라 아래의 속성, 이벤트 등의 목록에 다르게 표시됩니다. 디자인 화면에서 특정 오브젝트를 선택할 수도 있습니다.
Component List
정렬 방식 선택하기
- Categorized
선택된 오브젝트의 속성이나 이벤트를 범주로 정렬해 편집합니다. 편집할 때는 그림과 같이 '▶'나 '▼'를 마우스로 클릭하여 범주 항목을 펼치거나 접을 수 있습니다.
- Alphabetical
선택된 오브젝트의 속성이나 이벤트를 이름순으로 정렬하여 편집합니다.
편집 대상 선택하기
- Property
선택된 오브젝트의 속성을 편집하는 기능을 제공합니다. 오브젝트 생성 시 XML에 자동 추가되는 값이나 사용자가 수정한 값은 굵은 글꼴로 표시됩니다.
오브젝트 생성 시 XML에 자동 추가되는 값은 메타인포 파일의 <Property mandatory=""/> 의 값에 따라 지원됩니다.
properties_property
- Event
선택된 오브젝트의 이벤트를 편집하는 기능을 제공합니다. 값 입력 창을 더블 클릭하거나 콤보 아이템을 선택하여 이벤트 생성할 수 있습니다.
properties_event
- Bindable
선택된 오브젝트의 속성에 Dataset을 바인딩하는 기능을 제공합니다. 첫 번째 콤보에는 Dataset의 ID를 지정하고 두 번째 콤보에는 Column ID를 지정하여 바인딩할 수 있습니다.
properties_bindable
- Initialize
최초 앱이 실행했을 때만 지정된 속성값을 사용하고 이후에는 사용자가 입력하거나 실행 중 변경된 값을 사용해야 하는 경우가 있습니다. 그런 항목값은 Init Info 속성으로 별도 관리합니다. 속성값 중 Layout Information에 해당하는 값을 제외한 나머지 값 중에서 일부 항목만 편집할 수 있습니다.
properties_initialize
속성값을 빈 문자열로 설정하기
속성값이 빈 문자열("")인 경우에는 <empty value>로 속성창에 표시됩니다. 속성창에 표시되는 내용은 속성값을 쉽게 알아볼 수 있게 보조적으로 제공되는 표시일뿐 실제 속성값에는 영향을 미치지 않습니다. <empty value>로 표시된 속성값을 클릭해서 속성값을 편집할 수 있는 상태가 되면 <empty value> 표시는 사라집니다.
속성값을 빈 문자열로 지정하고자 하는 경우에는 컨텍스트 메뉴에서 [Set Empty Value] 항목을 선택합니다. 속성을 더 이상 사용하지 않을 때는 컨텍스트 메뉴에서 [Remove Property Value] 항목을 선택합니다.
속성값이 <empty value>로 표시되는 경우에는 source 탭에서 아래와 같이 속성값이 처리되는 상태입니다.
<Button id="Button00" taborder="0" left="348" top="124" width="152" height="66" text="" tooltiptext=""/>
컴포넌트의 속성 중 문자열 형태의 속성일 경우에만 empty value 표시를 지원합니다. 예를 들어 position 관련 속성은 문자열이 아니라 숫자형으로 속성값을 처리하기 때문에 컨텍스트 메뉴에서 Set Empty Value 항목이 비활성화됩니다.
컴포넌트 속성 중 기본값을 가지거나 boolean 값처럼 확정된 속성값이 있는 경우에는 컨텍스트 메뉴에서 Remove Propeory Value, Set Empty Value 항목이 비활성화됩니다.
계산된 스타일 속성값 확인하기
속성 창 하단 탭에서 [Computed Style] 항목을 선택하면 테마, CSS, Style 속성이 처리되어 실제 화면에 적용할 스타일 속성값을 볼 수 있습니다. 아래 항목에서 background 항목은 다른 속성값보다 굵게 표시되는데 이런 항목은 속성창에서 해당 속성값을 직접 수정한 경우입니다.
Computed Style 속성값은 내부적으로 연산 처리를 거쳐 보여주는 값이기 때문에 직접 속성값을 수정할 수 없습니다. 테마, CSS, Style 속성값을 수정하면 해당 값이 반영되어 자동으로 수정된 값이 표시됩니다.
속성창에서도 Style 속성 선택 시 하단에 Computed style property 값을 표시합니다.
사용자 속성 추가하기
디자인 화면에 배치할 수 있는 컴포넌트(Visible Component)와 Dataset 오브젝트, Grid 컴포넌트의 하위 컨트롤(GridCellControl, CellSubCellControl), ListView 컴포넌트의 하위 컨트롤(ListViewCellControl)에 사용자 속성을 추가할 수 있습니다. 속성창에서 컨텍스트 메뉴를 열고 [Add User Property] 항목을 선택합니다.
Grid 컴포넌트의 하위 컨트롤(GridCellControl, CellSubCellControl)은 Grid Contents Editor에서 셀 선택 후 속성창에서 ListView 컴포넌트의 하위 컨트롤(ListViewCellControl)은 ListView Contents Editor에서 셀 선택 후 속성창에서 사용자 속성을 추가할 수 있습니다.
User Property 입력창은 String 형태의 "Name"과 "Value" 값을 입력받습니다.
컴포넌트가 만약에 같은 이름의 Property를 갖고 있다면 에러 메시지가 표시됩니다.
Property 이름을 JavaScript 예약어로 생성할 수 없습니다.
추가된 Property는 "User Properties" 카테고리에 추가됩니다.
복잡한 속성값 편집하기
설정할 속성값을 알고 있다면 바로 편집창에 입력할 수 있지만, 색상값처럼 목록에서 선택해야 하거나, 여러 속성값이 복합적으로 반영되어야 하는 경우에는 직접 입력하는 것이 어렵습니다. 이런 속성에 대해서는 속성값을 편집할 수 있는 별도 편집창을 지원합니다.
색상값 편집하기
색상 관련 속성값을 선택하는 경우에 색상 목록에서 선택하거나 Color Picker를 사용할 수 있습니다.
Color Picker를 사용하면 다양한 형식으로 색상값을 지정할 수 있으며 Edit Color를 저장해놓고 재사용할 수 있습니다.
그라데이션 색상 편집하기
색상 속성값 지정 시 linear-gradient 속성을 편집하는 경우에 사용합니다. [angle] 항목에서 그라데이션을 적용할 방향을 지정하고 [color-stop] 항목에서 그라데이션 색상을 지정할 수 있습니다. 그라데이션 색상 지정 시에는 [Color Picker]를 사용합니다.
[color-stop] 항목의 각 색상을 마우스 오른쪽 버튼으로 클릭하면 값을 편집하거나 해당 색상 항목을 삭제할 수 있습니다.
Border 속성값 편집하기
border 속성을 가지는 컴포넌트는 Border Editor를 사용해 하위 항목을 편집할 수 있습니다. 속성창에서 border 항목 오른쪽에 있는 버튼을 클릭합니다.
버튼 클릭 시 Border Editor가 팝업창으로 실행됩니다.
항목 | 설명 | |
|---|---|---|
1 | Border value | 작성된 Border 속성값을 확인하거나 직접 수정합니다. |
2 | Border | 적용할 Border 속성의 세부 항목을 설정합니다. |
3 | Preview | 설정된 Border 속성을 확인합니다. Preset 버튼을 사용해 Border 항목에서 설정한 속성값을 원하는 부분에 설정할 수 있습니다. |
4 | Detail | 하위 Border 속성값을 설정합니다. 해당 항목은 접거나 펼칠 수 있습니다. |
5 | Description | Border 속성 관련 제약사항을 표시합니다. |
Preset 버튼은 다음과 같은 Border 속성값을 설정합니다.
글꼴 속성값 편집하기
넥사크로 앱은 글꼴을 포함해 제공되지 않고 사용자 운영체제에 설치된 글꼴을 사용합니다. 앱 개발 시 여러 개의 글꼴을 지정해 차례로 사용할 수 있는 글꼴을 찾을 수 있게 지정할 수 있습니다.
글꼴 편집창에서는 글꼴, 크기, 스타일 등의 속성값을 편집하고 적용된 상태를 미리 확인할 수 있습니다.
텍스트 여러 줄 입력하기
속성값에 여러 줄의 텍스트를 입력할 수 있는 경우에는 속성 입력창 오른쪽에 드롭다운 버튼이 표시됩니다. 버튼을 클릭하면 여러 줄 텍스트를 편집할 수 있는 창이 표시됩니다. 줄을 바꿀 때에는 Ctrl+ENTER 키를 입력합니다.
단축키 편집하기
컴포넌트의 hotkey 속성값 편집 시 조합할 수 있는 키를 선택할 수 있는 편집창을 지원합니다.
innerdataset 속성값 편집하기
innerdataset 속성값은 Dataset 오브젝트를 선택해서 설정할 수 있습니다. 해당 컴포넌트에서만 사용하고 간단한 값을 처리하는 경우에는 innerdataset을 직접 편집할 수 있습니다. Row를 추가하거나 삽입하고 삭제하는 기능과 codecolumn, datacolumn 값을 설정하는 기능을 제공합니다.
innerdataset 속성값 추가 후 저장을 하면 codecolumn, datacolumn 속성값이 "codecolumn", "datacolumn"으로 설정됩니다.
formats 속성값 편집하기
Grid, ListView 컴포넌트의 formats 속성값을 편집할 수 있습니다. 디자인 화면에서 컴포넌트를 더블클릭하거나 속성창에서 formats 속성을 선택해 편집창을 실행할 수 있습니다. formats 속성값 편집창에 대한 자세한 내용은 아래 링크를 참고하세요.
Grid Contents Editor ListView Contents Editor
항목 필터링해서 원하는 항목만 보기
속성창에 보이는 항목이 많을 경우 바로 원하는 항목을 찾을 수 있는 필터링 기능을 제공합니다. 필터링을 위해 입력한 텍스트와 일치하는 부분이 있는 항목은 모두 보여줍니다.
콤마(,) 구분자를 사용해 필터링 항목을 여러 개 사용할 수 있습니다.
선택한 속성 도움말 찾기
속성창에서 특정 속성값을 선택한 상태에서 메뉴[Help > Help]를 선택하거나 단축키 F1키를 눌러 도움말을 호출하면 선택한 속성값이 [Index] 항목에 입력되어 원하는 항목의 도움말을 쉽게 찾을 수 있습니다.
속성창에 포커스가 없는 경우에는 도움말 첫 화면이 실행됩니다.
속성명 복사하기
속성창에서 속성명 항목 위에서 오른쪽 마우스를 클릭하고 컨텍스트 메뉴에서 Copy Property Name 항목을 선택하면 클립보드에 속성명이 복사됩니다. Copy Property Description 항목을 선택하면 도움말에서 해당 항목의 Description 내용을 클립보드에 복사합니다.
속성값이 표시되는 글꼴의 의미 확인하기
속성값의 상태에 따라 다른 색상과 다른 스타일로 속성값을 표시합니다. 속성창 오른쪽 상단 [?] 버튼을 클릭하면 이에 대한 범례를 표시합니다. 각 항목을 선택하면 창 아래에 간단한 설명을 확인할 수 있습니다.
각 항목의 적용 우선순위와 설명은 아래와 같습니다.
적용우선순위 | 항목 | 설명 |
|---|---|---|
1 | Current Layout Value | 툴 디자인 폼에서 선택한 레이아웃에 입력한 값 |
2 | Default Layout Value | 디폴트 레이아웃에 입력한 값 |
3 | Form Initialize Value | 폼 Initialize 창에서 입력한 Initialize 값 |
4 | ENV Init Value File Value | Environment 에 입력한 initvaluefileid 에 존재하는 값 |
5 | Component(Metainfo) Default Value | MetaInfo 파일에 저장된 컴포넌트 기본값 |
아래 그림은 폼에 레이아웃을 추가하고 각 속성값을 적용해본 경우입니다. 속성값 상태에 따라 범례에서 설명한 것처럼 글꼴이 표시됩니다.
text 속성값에 위의 항목 모두가 적용된 경우 적용우선순위에 따라 최종값이 반영됩니다. 예를 들어 현재 레이아웃에서 입력한 값을 삭제하게 되면 다음 우선순위인 기본 레이아웃 설정값이 반영됩니다.
initvalueid 설정과 관련해서는 아래 링크를 참고하세요.
InitValueDefiniton
메시지 창(Message Window)
Bookmarks
소스나 스크립트 편집 창에서 사용한 북마크 목록을 관리합니다. 목록에 표시된 북마크를 더블 클릭하면 편집 창이 열리고 해당 라인이 표시됩니다.
이름 | 설명 | |
|---|---|---|
1 | Check Box | 체크되지 않은 항목은 탐색 기능 사용 시 탐색 대상에서 제외됨 |
2 | Toggle Bookmark | 커서 위치의 북마크를 설정 및 삭제 |
3 | Delete Bookmark | 선택한 북마크 삭제 |
4 | Previous Bookmark | 이전 북마크를 찾아 커서를 위치 |
5 | Next Bookmark | 다음 북마크를 찾아 커서를 위치 |
6 | Delete All Bookmarks | 설정된 Bookmark를 모두 삭제 |
7 | Previous Bookmark in Document | 현재 편집 창에서 이전 Bookmark를 찾아 커서를 위치 |
8 | Next Bookmark in Document | 현재 편집 창에서 다음 Bookmark를 찾아 커서를 위치 |
9 | Delete All Bookmarks in Document | 현재 편집 창에서 설정된 Bookmark를 모두 삭제 |
10 | Go to Bookmark | 선택한 북마크를 찾아 커서를 위치 |
11 | Enable/Disable Bookmark | 선택한 북마크를 탐색 대상에 포함/제외 |
12 | Enable/Disable All Bookmarks | 선택한 북마크를 탐색 대상에 포함/제외 |
13 | Project Filter | 서비스별로 북마크 목록을 필터링 (Show All Bookmarks 항목 선택 시에는 프로젝트 내 모든 북마크 목록을 표시) |
Delete Bookmark 기능은 Check Box에서 선택한 항목이 아니라 선택한 행에 해당하는 항목을 삭제합니다. 아래와 같이 삭제할 행을 선택하면 파란색으로 배경색이 바뀌며 Delete Bookmark 아이콘이 활성화됩니다.
북마크를 설정, 해제하면 해당 편집 창에 바로 반영되며, 북마크 목록은 넥사크로 스튜디오 내부적으로 별도 관리하기 때문에 다른 장소에서 만든 프로젝트를 복사해 작업하는 경우 북마크까지 복사되지 않습니다.
추가/삭제
소스, 스크립트, XCSS 편집창이 열린 상태에서 북마크를 추가할 위치에 커서를 위치하고 오른쪽 마우스를 클릭하면 북마크 미니 툴바가 나타납니다. [Toggle Bookmark]를 선택해 해당 위치에 북마크를 설정하거나 삭제할 수 있습니다. 툴바나 북마크창을 이용할 수도 있습니다.
탐색
툴바의 [Previous Bookmark] 또는 [Next Bookmark] 버튼을 클릭하여 필터 기준으로 북마크를 탐색할 수 있습니다. 그리고 [Previous Bookmark in Document] 또는 [Next Bookmark in Document] 버튼을 이용하여 편집 창 내에서만 북마크를 탐색할 수도 있습니다. 북마크 탐색 시에는 [Go to Bookmark]와 마찬가지로 해당 편집 창이 열리고 해당 라인이 표시됩니다.
체크되지 않은 북마크 항목은 탐색 대상에서 제외됩니다.
프로젝트 필터
서비스를 지정하여 북마크 목록을 필터링할 수 있습니다.
Output
넥사크로 스튜디오로 작업하는 중에 발생할 수 있는 각종 메시지를 표시합니다. 메시지에는 각종 오류, 진행과정 표시 메시지 등이 포함됩니다.
Error List
스크립트 또는 XCSS 편집 창에서 입력 시 발생한 오류, 경고, 알림 메시지를 실시간으로 표시합니다. 툴바에서 선택한 메시지 타입에 대해서 목록을 필터링할 수 있습니다.
설명 | |
|---|---|
1 | 오류 메시지 필터링 여부 |
2 | 경고 메시지 필터링 여부 |
3 | 알림 메시지 필터링 여부 |
4 | 메시지 목록 및 내용 표시 |
Find Results
메뉴[Edit > Find in Files] 명령의 처리 결과를 표시합니다. 표시된 각 파일을 더블 클릭하면 해당 편집 창이 열리면서 해당 라인이 표시됩니다. Find in Files 검색 창에서 ‘Find result 2 window’의 체크 여부에 따라 ‘Find Result 1’ 또는 ‘Find Result 2’, 'Find Result 3'에 결과를 표시합니다.
이름 | 설명 | |
|---|---|---|
1 | Go to Source Code | 선택된 항목의 파일 Line으로 이동 |
2 | Previous | 선택된 항목 이전 항목의 파일 Line으로 이동 |
3 | Next | 선택된 항목 다음 항목의 파일 Line으로 이동 |
4 | Clear All | 찾은 결과 전체 삭제 |
5 | Find Canceled | 파일 검색 작업을 취소합니다. (검색 대상 프로젝트에 포함된 파일이 많은 경우 검색 작업 도중에 취소하는 기능입니다). |
6 | multikey filter | 검색 결과 내에서 필터링할 단어를 추가할 수 있습니다. 콤마, 스페이스, 세미콜론으로 구분해 여러 개의 단어를 추가할 수 있습니다. |
툴바의 Previous 또는 Next 버튼을 클릭하거나 특정 항목을 선택하고 Go to Source Code 버튼을 클릭하면 에디터에서 해당 라인으로 이동할 수 있습니다.
Reference
스크립트 창에서 컨텍스트 메뉴 항목 중 [Find Reference]를 선택하면 프로젝트 내에서 해당 문자열과 연관된 파일을 검색하고 사용하는 참조 위치를 표시합니다. 항목을 더블 클릭하면 해당 위치의 편집기를 엽니다.
이름 | 설명 | |
|---|---|---|
1 | Go To Source | 해당 레퍼런스 위치로 이동 |
2 | Refresh | 레퍼런스 재조회 (코드 수정으로 Line 값이 변경되거나 항목이 추가, 변경됐을 때 목록을 다시 조회합니다). |
3 | Clear All | 조회된 레퍼런스 삭제 |
디버그 창(Debug Window)
작성된 코드의 문제점을 찾기 위해 디버깅 작업을 진행할 때 필요한 기능을 제공합니다.
넥사크로 스튜디오에서 제공하는 디버깅 기능은 NRE에서 실행했을 때만 동작합니다. 실행환경이 웹브라우저인 경우에는 웹브라우저에서 제공하는 디버깅 기능을 사용해야 합니다.
웹브라우저에서 제공하는 디버깅 기능은 아래 링크 정보를 참조하세요.
인터넷 익스플로러 https://msdn.microsoft.com/library/gg699336(v=vs.85).aspx
구글 크롬 https://developers.google.com/chrome-developer-tools/docs/javascript-debugging
파이어폭스 https://developer.mozilla.org/en-US/docs/Tools/Debugger
Debug Message
디버깅 모드에서 발생하는 메시지를 표시합니다.
debug_message_pane_3
Breakpoints
디버깅 모드에서 일시 정지할 위치를 스크립트 코드상에서 지정할 수 있습니다. 이렇게 지정된 위치를 중단점이라고 하며 지정된 값은 Breakpoints 창에서 목록 형태로 볼 수 있습니다.
중단점이 설정된 소스 위치로 이동하거나 비활성화 또는 삭제가 가능하며 필요에 따라 특정 조건에만 동작하거나 무시하도록 설정할 수도 있습니다.
중단점 정보는 넥사크로스튜디오 내부적으로 관리되므로 다른 컴퓨터에서 프로젝트를 열었을 때는 표시되지 않습니다.
breakpoint_pane
이름 | 설명 | |
|---|---|---|
1 | Toggle Breakpoint | 중단점 설정 또는 삭제 |
2 | Set Conditional Breakpoint | 조건부 중단점 설정 또는 삭제 |
3 | Edit Breakpoint | 선택한 중단점의 조건을 편집 |
4 | Delete Breakpoint | 선택된 중단점을 삭제 |
5 | Delete All Breakpoints | 모든 중단점을 삭제 |
6 | Go To Source | 선택한 중단점에 해당하는 편집 창이 열리고 해당 라인을 표시 |
7 | Enable/Disable Breakpoint | 선택한 중단점을 활성화/비활성화 |
8 | Enable/Disable All Breakpoints | 모든 중단점을 활성화/비활성화 |
9 | Breakpoint List | 중단점 목록을 표시 (디버깅 시 적중하지 않을 중단점은 체크를 해제) |
Breakpoint 추가/삭제
중단점을 추가하려면 스크립트 편집 창이 활성화된 상태에서 툴바의 Toggle Breakpoint 선택 시 편집 창의 커서 위치에 마커를 추가하고 Breakpoints창에 중단점 정보를 추가합니다.
중단점을 삭제하려면 툴바의 Delete Breakpoint를 이용하거나 중단점 마커 위치에서 Toggle Breakpoint를 선택하여 중단점을 삭제할 수 있습니다.
Conditional Breakpoint 추가/삭제
조건부 중단점을 추가하려면 스크립트 편집 창이 활성화된 상태에서 툴바의 Set Conditional Breakpoint 선택 시 편집 창의 커서 위치에 마커를 추가하고 Breakpoints 창에 중단점 정보를 추가합니다. 기본적인 사용법은 중단점과 동일하나 조건 표현식(Conditional Expression)과 무시 횟수(Number of Ignore)를 설정할 수 있다는 점이 다릅니다.
script_pane_conditional_breakpoint
조건부 중단점을 삭제하는 방법은 중단점 삭제와 동일합니다. 툴바의 Delete Breakpoint를 이용하거나 중단점 마커 위치에서 Toggle Breakpoint를 선택하여 중단점을 삭제할 수 있습니다.
Call Stack
현재 위치까지 호출된 함수를 역순으로 표시합니다. 해당 항목을 더블 클릭하면 이벤트를 호출한 위치의 코드로 이동합니다.
callstack_01
항목 | 설명 | |
|---|---|---|
1 | Function | 호출된 함수명입니다. |
2 | File | 호출된 함수를 포함하고 있는 파일명입니다. 파일의 전체 경로는 툴팁으로 확인할 수 있습니다. |
3 | Line | 호출된 함수가 선언된 파일에서의 줄 번호입니다. |
4 | Quick Show Function | 호출된 함수를 포함하고 있는 파일을 팝업 창에서 보여줍니다. |
소스 보기
마지막 열의 돋보기 아이콘을 더블 클릭하면 팝업 창에서 해당 위치의 소스 코드를 표시합니다. 단순히 보는 용도로만 사용할 수 있으며 수정은 불가합니다.
callstack_02
호출 추적
호출된 함수의 상위 지점을 콜스택 구조 내에서 추적할 수 있습니다.
callstack_03
Variables
중단점이 적중한 위치에서 접근 가능한 변수나 오브젝트의 값을 표시합니다. 멤버를 포함하는 오브젝트의 경우 +/- 버튼으로 상세 내용을 펼치거나 접어서 확인할 수 있습니다. 값의 변동이 발생한 항목의 값은 적색 볼드 텍스트로 표시됩니다.
variables_pane_01
Watch
특정 변수 또는 오브젝트를 Watch 목록에 등록해놓고 디버깅이 진행되는 동안 해당 값의 변화를 살펴보는 기능을 제공합니다.
Watch 정보는 넥사크로 스튜디오 내부적으로 관리되므로 다른 컴퓨터에서 프로젝트를 열었을 때는 표시되지 않습니다.
watch_pane_01
Watch 추가/삭제
오브젝트나 변수를 Watch로 추가하려면 Watch 창에서 + 버튼을 클릭하거나 마지막 행(Input Expression)을 더블 클릭합니다. 스크립트 편집기에서도 추가가 가능한데 오브젝트나 변수 명을 마우스로 드래그하여 선택 후 Watch 창으로 드래그 앤 드롭하거나 마우스 오른쪽 버튼을 클릭하여 콘텍스트 메뉴에서 Add Text to Watch를 선택합니다.
Watch에 추가한 오브젝트나 변수를 삭제하려면 Watch 창에서 삭제하려는 항목을 선택한 후 - 버튼을 클릭하거나 키보드의 Delete 키를 입력합니다.
Script Editor
스크립트 편집기에서는 디버깅 중에 오브젝트와 변수 값을 직관적으로 확인할 수 있도록 Assist Tip과 Inline Assist Variable 기능을 제공합니다.
Assist Tip
Assist Tip은 스크립트 편집기에서 값을 확인하고 싶은 오브젝트나 변수에 마우스 오버시키면 팝업 형태로 해당 정보를 표시해주는 기능입니다. 해당 항목이 변수면 단순히 값만 표시해 주고 오브젝트면 구성되는 멤버와 그 값까지 트리 형태로 표시해 줍니다.
assist_tip
assist_tip_variable
Inline Assist Variable
Inline Assist Variable은 스크립트 편집기에서 함수의 선언부부터 현재 적중된 중단점 사이에 존재하는 모든 오브젝트와 변수의 값을 각 라인의 옆에 표시해 주는 기능입니다.
assist_inline_variable
또한 적중된 중단점이 속한 함수뿐만 아니라 그와 연관된 Call Stack 상의 함수를 더블 클릭하면 스크립트 편집기로 해당 파일을 오픈하고 해당 함수가 호출되기 이전까지의 오브젝트와 변수 값을 표시해 줍니다.
inline_assist_variable_2
Form, 이미지 미리보기
Project Explorer에서 Form을 선택하거나 Resource Explore에서 이미지를 선택하면 컨텍스트 메뉴 또는 단축키(CTRL+ALT+P)로 미리보기 기능을 실행할 수 있습니다.
Form을 선택하고 컨텍스트 메뉴에서 [Show Thumbnail] 항목을 선택하면 디자인 화면 미리보기가 표시됩니다. 미리보기는 2초 정도 표시되고 사라집니다.
Generate 파일을 기준으로 미리보기를 제공하고 있어서 Generate 파일이 없거나 Form 로딩이 실패한 경우에는 미리보기가 표시되지 않습니다.