Chrome DevTools로 Interactive Canvas 웹 앱 디버그

Chrome DevTools를 사용하여 Interactive Canvas 웹 앱을 디버그할 수 있습니다. Chrome 디버거는 소프트웨어 버전 30 이상 (이 업데이트는 2020년 10월에 출시되기 시작) 및 Cast 펌웨어 버전이 1.50 이상인 Google Home 또는 Google Nest 스마트 디스플레이에서 지원됩니다. 스마트 디스플레이에서 System settings / About device 아래의 버전을 확인할 수 있습니다.

환경 설정

디버그하기 전에 다음을 수행하여 환경을 올바르게 설정하세요.

  • Actions 콘솔 시뮬레이터에서 테스트할 작업을 사용 설정합니다.
  • 테스트 중인 Google Home 또는 Google Nest 기기와 동일한 근거리 통신망에 머신을 연결합니다.
  • 네트워크가 기기 간 패킷을 차단하지 않는지 확인합니다.
  • Actions 콘솔과 Google Home 또는 Google Nest 기기에서 동일한 Google 계정으로 로그인합니다.

환경이 준비되면 테스트 스마트 디스플레이에서 작업을 실행할 수 있습니다.

Canvas 웹 앱을 디버거에 연결

캔버스 웹 앱을 Chrome DevTools 디버거에 연결하려면 다음 단계를 따르세요.

  1. 로컬 개발 머신에서 Chrome 브라우저를 설치하고 실행합니다.
  2. Chrome 브라우저의 주소 입력란에 chrome://inspect#devices를 입력하여 Chrome 검사기를 실행합니다. 페이지에 기기 목록이 표시되고 테스트 Google Home 또는 Google Nest 기기 이름 아래에 캔버스 HTML URL이 나열됩니다. Chrome이 네트워크에 있는 모든 기기를 검색하는 데 다소 시간이 걸릴 수 있습니다.
  3. HTML URL 아래의 inspect 링크를 클릭하여 Chrome DevTools를 실행합니다.

Chrome DevTools가 자체 창에 로드됩니다. 스크린캐스트() 버튼을 클릭하면 기기에서 렌더링된 웹 GUI를 확인할 수 있습니다. 다음 스크린샷은 Chrome DevTools에서 웹 앱이 표시되는 방식을 보여줍니다.

캔버스 웹 앱은 iframe에서 로드됩니다.

디버깅 도움말

디버깅하는 동안 다음 추가 도움말에 유의하세요.

  • Chrome DevTools에서 페이지를 새로고침하여 개발 URL의 최신 코드로 로컬 처리 앱 컨테이너를 새로고침합니다.
  • JavaScript 앱이 오류 없이 로드되는지 확인합니다. 이렇게 하려면 DevTools 페이지의 콘솔 섹션을 확인하세요.
  • 웹 앱 코드 내에서 debugger;를 사용하여 코드에 수동 중단점을 추가합니다.
  • 기기가 장시간 chrome://inspect#devices에 표시되지 않으면 검사 페이지를 새로고침합니다.
  • 성능 문제를 디버그하려면 런타임 성능 분석 시작하기 가이드를 따르세요.
  • 스마트 디스플레이 메모리가 제한되어 있으므로 200MB를 초과하면 웹 앱이 비정상 종료되거나 중단될 수 있습니다. 메모리 문제를 디버그하려면 메모리 문제 해결 튜토리얼을 따르세요.
  • 처리 오류는 Actions on Google 서버가 웹훅 로그 또는 Stackdriver 로그에서 웹훅으로 전송한 요청을 확인하세요.