그럼 간단한 애플리케이션을 만들면서 디버깅에 대해 살펴보겠습니다.
만들어볼 애플리케이션은 간단한 그리드에 간단한 데이터가 들어가고
각 셀을 클릭하면 이벤트를 발생시키도록 했습니다.
새로운 프로젝트를 만들고 (File > New > Project)
새로운 폼을 만듭니다 (File > New > Item > Form)
툴바에서 그리드를 선택하고 폼에 배치합니다.
크기는 상관없습니다.
그리고 DataSet도 하나 만들어줍니다.
DataSet 은 실체는 있지만 눈에 보이지 않는 객체로 폼에서 그려도 상관없지만
폼에 표현되지 않고 Invisible Objects 영역에 표시됩니다.
데이터도 설정해놓고 DataSet을 그리드로 드래그앤드롭해서 연결하면 셋팅이 완료됩니다.
그리드 이벤트에서 oncellclick 를 선택하고 다음과 같이 function을 만들어줍니다.
function Grid00_oncellclick(obj:Grid, e:GridClickEventInfo)
{
var a = 'test :';
trace(a);
}
oncellclick 이벤트에서는 Event 가 발생한 객체인 그리드와 이벤트정보가 담긴 값을 던져줍니다.
이벤트정보에 들어가는 값은 GridClickEventInfo 라는 형태로 던져지는데
이 값에 어떤 내용이 들어가는지 확인을 하고 싶다면 하나하나 로그를 찍어보는 것보다
디버깅 모드에서 확인하는 것이 좀 더 간단합니다.
자 그럼 Grid00_oncellclick 라는 function 내에 브레이크포인트를 찍어주고 해당 애플리케이션을 실행해봅니다.
화면이 실행되면 그리드에 표시된 셀을 클릭합니다.
그럼 이벤트가 처리되는 function 내 브레이크포인트에서 멈춘 상태에서 몇가지 정보를 담은 패널을 확인할 수 있습니다.
- variables 패널
: 현재 상태에서 확인 가능한 변수의 상태값을 보여줍니다.
하위 속성을 가지고 있는 오브젝트인 경우에는 하위 트리를 감춘 상태에서 보여지고
문자열 변수인 경우에는 바로 값을 보여줍니다.
여기서 알고 싶은 것은 GridClickEventInfo 안에 어떤 값이 들어가는지 알고 싶은 것이니깐
해당 부분을 펼쳐줍니다.
각 속성에 대한 값을 확인할 수 있습니다.
어떤 셀을 클릭했는지 확인하기 위해서는 row와 col 값이 필요한데
여기서 바로 확인이 가능합니다.
여기서 특정 변수를 계속해서 관찰해야 한다면 매번 수많은 속성 가운데서 찾는것이 쉽지는 않을겁니다.
그럴때에는 원하는 속성을 Watch 패널로 옮길 수 있습니다.
옮기는 방법이 좀 애매하긴 한데
그냥 직접 입력하는게 가장 편합니다.
Expression 항목에 e.col, e.row 를 입력하시면 다음과 같이 보이게 됩니다.
각 속성 뿐 아니라 오브젝트 자체를 가져다 놓을 수도 있습니다.
그리고 또 하나 확인 가능한 패널은 Call Stack 입니다.
브레이크 포인트까지 거쳐온 함수를 역순으로 표기해줍니다.
특정 변수값이 이상하게 꼬였을 경우에는 어떤 경로를 거쳐 왔는지 확인해야만 문제를 찾을 수 있습니다.
엑스플랫폼으로 개발하는 경우에는 그렇게 까지 꼬여서 들어오는 값이 있지는 않겠지만
그래도 모르는 것보다는 낫다는..^^
Call Stack 패널에서도 해당 Function 을 클릭하면 해당 라인으로 이동하게 됩니다.
패널 내에서 바로 이동해서 내용을 확인할 수 있습니다.
* 변수 역추적이 가능할까 싶었는데 거기까지는 안되네요.
