테스트 및 디버그
테스트 및 디버그 (Test and debug)
Docker Desktop 확장을 테스트하고 디버깅하는 데 도움이 되는 도구들을 설명하는 문서예요.
출처: 문서
본문
개발자 경험을 개선하기 위해 Docker Desktop은 확장을 테스트하고 디버깅하는 데 도움이 되는 도구 세트를 제공해요.
Chrome DevTools 열기 (Open Chrome DevTools)
Extensions 탭을 선택할 때 확장의 Chrome DevTools를 열려면 다음을 실행하세요:
$ docker extension dev debug <name-of-your-extensions>
이후 확장 탭을 클릭할 때마다 Chrome DevTools도 열려요. 이 동작을 중지하려면 다음을 실행하세요:
$ docker extension dev reset <name-of-your-extensions>
확장이 배포된 후에는 Konami Code의 변형을 사용해 UI 확장 부분에서 Chrome DevTools를 열 수도 있어요. Extensions 탭을 선택하고 up, up, down, down, left, right, left, right, p, d, t 키 시퀀스를 누르세요.
UI 개발 중 핫 리로딩 (Hot reloading whilst developing the UI)
UI 개발 중에는 전체 확장을 다시 빌드하지 않고 변경 사항을 테스트하기 위해 핫 리로딩을 사용하는 것이 유용해요. 이렇게 하려면 Docker Desktop이 npm start로 호출할 때 Vite가 시작하는 것 같은 개발 서버에서 UI를 로드하도록 구성할 수 있어요.
앱이 기본 포트에서 실행된다고 가정하고 UI 앱을 시작한 후 다음을 실행하세요:
$ cd ui
$ npm run dev
이렇게 하면 포트 3000에서 수신하는 개발 서버가 시작돼요.
이제 Docker Desktop에 이 서버를 프론트엔드 소스로 사용하라고 알릴 수 있어요. 다른 터미널에서 다음을 실행하세요:
$ docker extension dev ui-source <name-of-your-extensions> http://localhost:3000
Docker Desktop 대시보드를 닫았다가 다시 열고 확장으로 이동하세요. 프론트엔드 코드의 모든 변경 사항이 즉시 표시돼요.
완료되면 확장 구성을 원래 설정으로 재설정할 수 있어요. docker extension dev debug <name-of-your-extensions>를 사용했다면 Chrome DevTools 열기도 역시 재설정돼요:
$ docker extension dev reset <name-of-your-extensions>
확장 컨테이너 표시하기 (Show the extension containers)
확장이 Docker Desktop VM에서 컨테이너로 실행되는 하나 이상의 서비스로 구성되어 있다면, Docker Desktop 대시보드에서 쉽게 접근할 수 있어요.
- Docker Desktop에서 Settings로 이동하세요.
- Extensions 탭에서 Show Docker Desktop Extensions system containers 옵션을 선택하세요. 이제 확장 컨테이너와 그 로그를 볼 수 있어요.
정리 (Clean up)
확장을 제거하려면 다음을 실행하세요:
$ docker extension rm <name-of-your-extension>
다음은 무엇인가요?
- 고급 프론트엔드 확장 빌드하기.
- 확장 아키텍처에 대해 자세히 알아보기.
- 우리 디자인 원칙 탐색하기.
- 우리 UI 스타일링 가이드라인 살펴보기.
- 확장용 CI 설정 방법 알아보기.