웹 수신기 SDK는 개발자가 웹 수신기 앱을 쉽게 디버그할 수 있는 CastDebugLogger API 및 연결된 명령어 및 제어 (CaC) 도구를 제공하여 로그를 캡처합니다.
초기화
CastDebugLogger API를 사용하려면 웹 수신기 SDK 스크립트 바로 뒤에 웹 수신기 앱에 다음 스크립트를 포함하세요.
<!-- Web Receiver SDK -->
<script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<!-- Cast Debug Logger -->
<script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
CastDebugLogger
객체를 만들고 로거를 사용 설정합니다.
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const context = cast.framework.CastReceiverContext.getInstance();
context.addEventListener(cast.framework.system.EventType.READY, () => {
if (!castDebugLogger.debugOverlayElement_) {
// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
castDebugLogger.setEnabled(true);
}
});
디버그 로거가 사용 설정되면 수신기에 디버그 모드를 표시하는 오버레이가 표시됩니다.
플레이어 이벤트 기록
CastDebugLogger
를 사용하면 웹 수신기 SDK에서 실행된 플레이어 이벤트를 쉽게 로깅하고 다양한 로거 수준을 사용하여 이벤트 데이터를 로깅할 수 있습니다.
loggerLevelByEvents
구성은 cast.framework.events.EventType
및 cast.framework.events.category
를 사용하여 로깅할 이벤트를 지정합니다.
예를 들어 플레이어 CORE
이벤트가 트리거되거나 mediaStatus
변경사항이 브로드캐스트되는 시점을 파악하려면 다음 구성을 사용하여 이벤트를 로깅합니다.
castDebugLogger.loggerLevelByEvents = {
'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}
커스텀 태그로 커스텀 메시지 로깅
CastDebugLogger API를 사용하면 다른 색상으로 웹 수신기 디버그 오버레이에 표시되는 로그 메시지를 만들 수 있습니다. 다음 로그 메서드를 사용합니다. 가장 높은 우선순위부터 가장 낮은 우선순위 순으로 나열되어 있습니다.
castDebugLogger.error(custom_tag, message);
castDebugLogger.warn(custom_tag, message);
castDebugLogger.info(custom_tag, message);
castDebugLogger.debug(custom_tag, message);
각 로그 메서드에서 첫 번째 매개변수는 커스텀 태그여야 하며 두 번째 매개변수는 로그 메시지입니다. 태그는 유용하다고 생각하는 문자열일 수 있습니다.
다음은 LOAD
인터셉터에서 디버그 로거를 사용하는 방법의 예입니다.
const LOG_TAG = 'MyReceiverApp';
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD,
request => {
castDebugLogger.debug(LOG_TAG, 'Intercepting LOAD request');
return new Promise((resolve, reject) => {
fetchMediaAsset(request.media.contentId).then(
data => {
let item = data[request.media.contentId];
if (!item) {
castDebugLogger.error(LOG_TAG, 'Content not found');
reject();
} else {
request.media.contentUrl = item.stream.hls;
castDebugLogger.info(LOG_TAG,
'Playable URL:', request.media.contentUrl);
resolve(request);
}
}
);
});
}
);
각 맞춤 태그의 loggerLevelByTags
에 로그 수준을 설정하여 디버그 오버레이에 표시되는 메시지를 제어할 수 있습니다. 예를 들어 로그 수준이 cast.framework.LoggerLevel.DEBUG
인 맞춤 태그를 사용 설정하면 오류, 경고, 정보, 디버그 로그 메시지와 함께 추가된 모든 메시지가 표시됩니다. 또 다른 예로 WARNING
수준으로 맞춤 태그를 사용 설정하면 오류 메시지 및 경고 로그 메시지만 표시됩니다.
loggerLevelByTags
구성은 선택사항입니다. 맞춤 태그가 로거 수준에 구성되지 않으면 모든 로그 메시지가 디버그 오버레이에 표시됩니다.
const LOG_TAG1 = 'Tag1';
const LOG_TAG2 = 'Tag2';
// Set verbosity level for custom tags
castDebugLogger.loggerLevelByTags = {
[LOG_TAG1]: cast.framework.LoggerLevel.WARNING,
[LOG_TAG2]: cast.framework.LoggerLevel.DEBUG,
};
castDebugLogger.debug(LOG_TAG1, 'debug log from tag1');
castDebugLogger.info(LOG_TAG1, 'info log from tag1');
castDebugLogger.warn(LOG_TAG1, 'warn log from tag1');
castDebugLogger.error(LOG_TAG1, 'error log from tag1');
castDebugLogger.debug(LOG_TAG2, 'debug log from tag2');
castDebugLogger.info(LOG_TAG2, 'info log from tag2');
castDebugLogger.warn(LOG_TAG2, 'warn log from tag2');
castDebugLogger.error(LOG_TAG2, 'error log from tag2');
// example outputs:
// [Tag1] [WARN] warn log from tag1
// [Tag1] [ERROR] error log from tag1
// [Tag2] [DEBUG] debug log from tag2
// [Tag2] [INFO] info log from tag2
// [Tag2] [WARN] warn log from tag2
// [Tag2] [ERROR] error log from tag2
디버그 오버레이
Cast 디버그 로거는 웹 수신기에 맞춤 로그 메시지를 표시하는 디버그 오버레이를 제공합니다. showDebugLogs
를 사용하여 디버그 오버레이를 전환하고 clearDebugLogs
를 사용하여 오버레이의 로그 메시지를 지웁니다.
알림: CastDebugLogger가 사용 설정된 후 showDebugLogs
와 clearDebugLogs
를 사용하세요.
const context = cast.framework.CastReceiverContext.getInstance();
context.addEventListener(cast.framework.system.EventType.READY, () => {
if (!castDebugLogger.debugOverlayElement_) {
// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
castDebugLogger.setEnabled(true);
// Show debug overlay
castDebugLogger.showDebugLogs(true);
// Clear log messages on debug overlay
castDebugLogger.clearDebugLogs();
}
});