플래시 디버거 툴 중에 몬스터 디버거라는게 있다는걸
플래시 액션스크립트 카페(http://cafe.naver.com/flashactionscript)에서 알게 되었는데요.
이게 어디에 어떻게 쓰는 물건인가 살펴보면서 간략정리를 시도해보았습니다.
공식 홈페이지 - http://www.monsterdebugger.com/
AsDoc - http://www.monsterdebugger.com/asdoc/
설치는 홈페이지에서 다운받으셔서 air 파일을 설치하면 됩니다.
에어로 배포되니 윈도우건 맥의 osx건 상관없이 사용할 수 있는 장점이 있네요.
air가 설치가 안되셨으면 먼저 어도비 홈페이지부터 가셔서 air부터 설치하시면 되구요.
몬스터디버거의 첫 실행화면
처음 실행시키면 이런 모양으로 뜨네요.
영어로 뭐라뭐라 써있는데 까막눈이라 읽을줄 몰라서 일단 패스.
빨간색으로 체크해둔 부분을 누르면
1. Project type
Actionscript 3.0 / Flex MXML (플래시와 플렉스 모두 지원하는군요)
2. Project target
Web/Desktop / Mobile (모바일용으로도 지원하나봐요)
3. Client SWC
SWC 파일을 저장하는 창이 나옵니다.
4. Example Code
저는 웹쟁이니까 Actionscript 3.0 / Web 기준으로..!!
Flash CS5 / Flash Builder Burrito 를 사용하였습니다. (플래시빌더는 저도 어색어색)
플래시에서 fla 파일을 만들고 플래시빌더에서 Flash Professional Project 를 만들었습니다.
fla 파일에 아까 저장해두었던 MonsterDebugger.swc 파일을 연결해줍니다. (저는 fla 파일과 같은 경로에 저장했습니다.)
빨간색 체크 부분을 순서대로 눌러가며 찾아시면 끝.
이걸 언제 쓰면 유용하려나요?
웹상에 swf 파일을 올려놓고 동작이 안되거나 하는 것들을 체크하려면 참 번거롭고 귀찮죠.
그런 상황들이 어떤게 있을까요.
메뉴 네비게이션 같은 경우 xml 경로를 flashVars로 받아서 swf 가 로드해서 사용하는데 경로가 잘못되었을 경우
경로가 제대로 받아와지는지 확인하려면 다른 분들은 어떻게 확인 하실지 모르겠지만
저는 텍스트 필드를 화면에 붙여넣고 그 안에 경로를 찍어서 확인해봅니다.
확인이 끝나면 텍스트필드를 없애고 확인을 위한 관련 코드를 또 삭제해줘야 하죠.
이런 경우 이렇게 사용할 수 있을거 같네요.
HTML 파일 추가.
<param name="flashVars" value="xmlPath=xml경로" />
Actionscript Code.
var paramObj:Object = this.loaderInfo.parameters;
var xmlPath:String = paramObj.xmlPath;
MonsterDebugger.trace(this, xmlPath);
몬스터디버거에는 이렇게 찍혀나오네요. 외부에서 받아오는 값이 제대로 들어오는지 확인하기 편한듯 합니다.
또 이런 경우도 있을수 있겠네요.
서버쪽으로 값을 전송할때 전송될 값들이 제대로 들어가는지 확인 할 때
GET 방식으로 보낸다면 URL에 찍혀나올테니 상관 없겠지만
POST 방식으로 보낸다면 눈으로 확인하기가 쉽지 않죠.
this.send_btn.addEventListener( MouseEvent.CLICK, onSendClick);
private function onSendClick( e:MouseEvent ):void {
var url:String = "http://doworld.tistory.com/";
var request:URLRequest = new URLRequest( url );
var variables:URLVariables = new URLVariables();
variables.time = new Date().getTime();
variables.myName = "doworld";
request.method = URLRequestMethod.POST;
request.data = variables;
MonsterDebugger.trace(this, variables);
navigateToURL( request );
}
SEND 버튼을 누르면 이름과 지금 시간을 보내는 코드가 있습니다.
GET 방식으로 보낸다면
이렇게 브라우저 URL 부분에서 확인이 가능하지만
POST 방식으로 전송한다면 몬스터 디버거에서 편하게 할 수 있습니다.
GET 과 POST 의 전송방식의 차이점은
GET : 속도가 빠르지만 정보가 노출되어 보안에 취약하고 정보의 크기가 1024바이트로 제한적.
POST : URL 주소에 정보노출이 되지 않으니 보안성이 좋고 정보의 크기 제한이 없지만 GET방식보다 느리다.
좀 더 자세한 내용이 궁금하신분들은 따로 검색해보세요.
만약에 버튼 위에 눈에 보이지 않는 무언가가 덮혀 있어서 버튼이 클릭되지 않는다고 가정해봅니다.
코드에서 작성되어서 addChild 된 녀석이 어느샌가 나타나서 가리고 있으면
이게 언제 나타나서 가리고 있는지 참 알아내려면 참 속상합니다-_-;;
몬스터 디버거를 이용하니 이런 점도 편하네요.
화면에 붙어있는 오브젝트들 리스트가 다 나옵니다. (인스턴스 네임까지 찍혀나오네요)
하나를 클릭해보니 해당 오브젝트가 웹상에 있는 swf 에서도 저렇게 표시가 되니 찾기도 편하고
오른쪽 Properties 탭을 보면 속성들이 표시되는데
x, y 좌표 또는 alpha 값이라던가 visible 값을 바꾼다던가 저기서 값을 바꾸면 웹상에 있는 swf 에도 변화가 일어납니다.
Methods 탭을 눌러보면 그 오브젝트의 메소드들이 주우욱 나오는데 public 메소드들만 나올거 같네요.
FPS 와 메모리 점유율도 보기 편하게 제공해주고요.
MonsterDebugger.trace(); 이외에도 여러가지 메서드 들이 제공되고 있습니다.
MonsterDebugger.clear();
trace 한 결과들을 모두 지워줍니다.
MonsterDebugger.log( ..args );
trace와 비슷한거 같은데 여러개를 한번에 확인할 수 있네요. ex) MonsterDebugger.log( x, y, width, height );
MonsterDebugger.snapshot();
메소드 이름에서 알수 있듯이 스냅샷을 찍을수 있나봐요. 숨겨진 인터페이스 항목을 표시해야 할 경우 유용할 수 있다네요.
MonsterDebugger.breakpoints();
이번에 업데이트 된 몬스터디버거 3.0 버전부터 생겼나본데요. 중단점을 설정해두고 디버깅 할 수 있게끔 하는 녀석인듯.
마지막으로 플래시에서 trace() 로 확인을 하고 웹에 올리기 전엔 trace() 문을 사용한 곳들을 찾아다니면서
주석처리를 해주거나 지워줬었는데요. ( trace()도 많이 찍어놓으면 퍼포먼스가 떨어지더라구요 )
MonsterDebugger.enabled = false;
몬스터 디버거 초기화 해둔곳 바로 밑에 줄에 요렇게 한줄 넣어주면 일일이 찾아다니면서 주석 또는 삭제 할 필요없이
몬스터 디버거 관련 코드는 모두 기능 상실하네요.
