Thingworx Mashup 개발에는 Mashup에 연결된 Thing의 서비스, 세션 변수, UI 간의 이벤트 바인딩으로 로직을 구성하고 서비스 input/output 바인딩의 작업을 필요로 합니다.
간단한 로직의 경우 몇번의 테스트 만으로도 서비스가 의도된 대로 동작하는지 확인할 수 있지만, 로직의 복잡도가 증가할 수록, 서비스의 개수가 많아질 수록, 바인딩된 이벤트가 많아질 수록 테스트의 난이도가 쉽게 증가합니다.
브라우저의 개발자 도구 기능을 이용하면 서비스에 하나하나 로그를 출력하는 것 대신 쉽게 문제 발생지점을 찾아낼 수 있으며, Thingworx 객체에 직접 접근하여 이벤트 제어를 통해 원하는 지점부터 로직을 테스트 할 수 있습니다.
브라우저 개발자 도구를 이용한 서비스 디버깅 #
Edge 브라우저 기준으로 관리자 도구를 이용한 서비스 디버깅에 대한 소개를 진행하겠습니다.
브라우저 개발자 도구 실행 방법 #
디버깅 하고자 하는 Mashup 화면에서 F12 단축키를 누르면 브라우저의 개발자 도구가 활성화 됩니다. 이 개발자 도구의 네트워크 탭에서는 서버와의 데이터 통신을 편리하게 디버깅 할 수 있으며, 각 소스들의 정보와 속도, 응답 등 데이터를 확인할 때도 유용하게 사용할 수 있습니다.
브라우저 개발자 도구를 이용한 서비스 성공 여부 확인 #
Mashup 로드 후에 > test_A 실행 > test_B 실행 > test_C 실행 > test_D 실행 되는 로직이 있다고 가정해보겠습니다.
다음 로직에서 각각의 서비스들은 ServiceInvokeCompleted 이벤트를 통해 바인딩 되어 있으며 해당 이벤트는 선행 서비스가 호출이 완료되면 바인딩 된 다음 서비스를 실행시키게 됩니다.
서비스가 오류없이 동작 할 경우 개발자 도구의 네트워크 탭에서는 test_A, test_B, test_C, test_D 서비스가 순차적으로 실행되고 모든 서비스가 오류없이 완료된 것을 다음과 같이 확인할 수 있습니다.
브라우저 개발자 도구를 이용한 서비스 실패 여부 확인 #
이번에는 위의 서비스 중 test_C 서비스를 의도적으로 에러를 발생시켜 보겠습니다.
브라우저 개발자 도구를 사용하면 ‘상태’ 열의 값을 통해 test_C 서비스 실행 실패를 확인할 수 있으며, test_C 서비스가 정상적으로 수행되지 않았기에 test_C의 다음 순서로 바인딩 되어있던 test_D 서비스 또한 수행되지 않았음을 확인할 수 있습니다.
브라우저 개발자 도구를 이용한 서비스 i/o 결과값 확인 #
브라우저 개발자 도구에서 서비스를 선택하여 해당 서비스의 Request와 Response를 확인할 수 있습니다.
선택한 서비스의 페이로드 탭을 확인하여 Request 에 a 변수의 값이 의도된 대로 들어간 것을 확인할 수 있으며,
응답 탭에서도 Response가 의도한 대로 반환되는 것을 확인할 수 있습니다.
응답 탭의 데이터는 미리 보기 탭을 이용해 보다 정리된 형태로 응답을 확인할 수 있습니다.
물론 Thingworx에서도 서비스 에디터에서 테스트 데이터를 세팅하고 실행 해볼 수 있는 테스트 기능을 제공하고 있습니다. 하지만, 테스트 기능은 단일 서비스 내 스크립트 범위에서만 가능하기 때문에 서비스들 간의 연결 테스트는 다른 서비스를 직접 참조하도록 스크립트를 수정/롤백 하거나 Mashup에서 바인딩을 하나씩 끊어가며 테스트 할 수 밖에 없습니다.
브라우저의 개발자 도구 기능을 통해 테스트의 정확도를 높이고 Thingworx 개발 효율을 향상시킬 수 있습니다.