서비스 워커를 디버깅하는 것은 어렵습니다. 여러분은 수명 주기, 업데이트, 캐시, 그리고 이 모든 것들 간의 상호작용을 다루고 있습니다. 다행히도 Workbox는 서비스 워커를 더 쉽게 개발할 수 있도록 해주며 정보 로깅을 통해 디버깅도 더 쉽게 해줍니다. 이 페이지에서는 사용 가능한 몇 가지 디버깅 도구와 Workbox의 로깅 작동 방식 및 구성 방법을 설명합니다.
사용 가능한 문제 해결 도구
브라우저에서는 서비스 워커를 개발하는 동안 디버깅 및 문제 해결을 위한 다양한 도구를 사용할 수 있습니다. 다음은 선택한 브라우저를 시작하는 데 도움이 되는 몇 가지 리소스입니다.
Chrome 및 Edge
Chrome (및 Blink 엔진을 기반으로 하는 최신 버전의 Edge)에는 강력한 개발자 도구가 있습니다. 특히 Chrome의 DevTools에 포함된 이러한 도구 중 일부는 이 문서의 앞부분에서 다루었으나 다음과 같은 추가 사항이 있습니다.
Firefox
Firefox 사용자는 다음 리소스를 참고할 수 있습니다.
Safari
현재 Safari에는 서비스 워커 디버깅을 위한 더 제한된 개발자 도구 세트가 있습니다. 다음 리소스에서 자세히 알아볼 수 있습니다.
작업 상자 로깅
Workbox에서 제공하는 주요 개발자 환경 개선 사항은 정보 로깅에 있습니다. 로깅이 사용 설정되면 Workbox는 거의 모든 활동을 고유하고 기능적인 방식으로 기록합니다.
Workbox의 개발 빌드에서는 기본적으로 로깅을 사용 설정하지만 프로덕션 빌드에서는 로깅을 사용 중지합니다. 맞춤 Workbox 번들을 만드는지 또는 workbox-sw을 통해 사전 번들 사본을 사용하는지에 따라 개발 빌드와 프로덕션 빌드 간에 전환하는 단계가 다릅니다.
번들러 유무에 관계없음
번들러는 개별 모듈에서 코드를 가져와서 브라우저에서 실행할 준비가 된 자바스크립트 출력을 생성하는 도구입니다. 번들러를 사용하는 경우 사전 캐싱에 도움이 되는 번들러 전용 Workbox 플러그인(예: workbox-webpack-plugin)을 사용하거나 Workbox 런타임 캐싱 로직을 번들로 묶을 수도 있습니다. 두 경우 모두 Workbox 로깅은 번들러 구성에서 프로덕션 모드 설정의 영향을 받습니다.
- webpack에서
mode구성 옵션을'production'또는'development'로 설정할 수 있습니다.workbox-webpack-plugin에서 이 값에 따라 Workbox의 프로덕션 또는 개발 로깅을 사용합니다. - Rollup의 경우
rollup-plugin-workbox는mode구성 옵션을 허용합니다. 이 옵션은 Workbox에서 콘솔에 모든 항목을 로깅하는지 여부에도 영향을 미칩니다. Workbox 전용 플러그인 없이 Rollup을 사용하는 경우process.env.NODE_ENV를'development'또는'production'로 대체하도록@rollup/plugin-replace를 구성해야 합니다.
개발 단계에서 기본 로깅 동작을 재정의해야 한다고 가정해 보겠습니다. 이 경우 번들러에 적합한 Workbox 플러그인을 사용하여 해당 구성에서 로그를 디버깅하기 위한 환경설정을 하드코딩할 수 있습니다. 예를 들어 GenerateSW 메서드에 대해 workbox-webpack-plugin의 mode 옵션을 통해 Workbox에서 로깅을 사용 중지할 수 있습니다.
번들러를 사용하지 않는 경우
번들러는 훌륭하지만 모든 프로젝트에 필요한 것은 아닙니다. 번들러를 사용하지 않는 프로젝트에 Workbox를 추가하려는 경우에는 workbox-sw를 사용하면 됩니다.
workbox-sw 모듈은 다른 Workbox 모듈 (예: workbox-routing, workbox-precaching 등)을 가져옵니다. 개발 번들 또는 프로덕션 번들의 로드 여부는 웹 앱에 액세스하는 데 사용되는 URL에 따라 다릅니다. 기본적으로 workbox-sw는 웹 앱이 http://localhost에서 실행 중인 경우 Workbox의 개발 버전을 로드하고 그 외의 경우에는 프로덕션 버전을 로드합니다.
Workbox의 setConfig 메서드를 호출하여 debug 옵션을 true로 설정하여 기본 동작을 재정의할 수 있습니다.
// Load workbox-sw from a CDN
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');
// This must come before any other workbox.* methods.
workbox.setConfig({
debug: true
});
// Now use workbox.routing.*, workbox.precaching.*, etc.
워크플로에서 개발 빌드에서 로깅 사용 중지
번들러 사용 여부와 관계없이 서비스 워커의 특수 self.__WB_DISABLE_DEV_LOGS 변수에 true를 할당하여 개발 빌드의 모든 로깅을 사용 중지할 수 있습니다.
//
self.__WB_DISABLE_DEV_LOGS = true;
// The rest of your Workbox service worker code goes here
이 접근 방식의 장점 중 하나는 번들러 구성과 완전히 별개이며 workbox-sw를 직접 사용하든 번들러를 사용하여 Workbox 기반 서비스 워커를 패키징하든 상관없이 작동한다는 것입니다.
추가 정보
여전히 버그가 있는 서비스 워커에서 어떤 일이 일어나고 있는지 파악하는 데 어려움을 겪고 있으며 로깅만으로는 충분하지 않다면 workbox 태그를 사용하여 Stack Overflow에 질문을 게시해 보세요. 여기에서 답변을 찾을 수 없으면 참여 가이드라인을 읽은 후 GitHub 문제를 신고하세요. 이렇게 하면 광범위한 개발자가 질문을 읽고 답변할 수 있을 뿐만 아니라 질문에 대한 답변이 나중에 같은 상황에 처한 사람에게 도움이 될 수 있습니다.