service worker debug in chrome

크롬에서 Service Worker Javascript Debug 하기

https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers/?hl=ko 참조

1. F12 키 또는 alt-shift+i 를 눌려서 디버깅 창을 띄우고 상단 메뉴에서 application을 선택한다.

2. Application 에서 Service worker 를 선택하면 현재 운영중인 service worker 가 출력 된다. 그중 자신이 등록한 service worker를 찾는다.

3. 상단 선택 체크 박스 항목 설명

• Offline - 네트워크에서 연결이 끊긴 상태를 시뮬레이션합니다. 이를 통해 서비스 워커 페치 핸들러가 올바로 작동하는지 빠르게 확인할 수 있습니다.
• Update on reload - 기존의 서비스 워커를 강제로 새로운 서비스 워커로 바꿉니다(개발자가 service-worker.js에 대한 업데이트를 만든 경우). 일반적으로 브라우저는 사용자가 현재 사이트를 포함하는 탭을 전부 닫을 때까지 기다린 후 새로운 서비스 워커로 업데이트할 것입니다.
• Bypass for network - 브라우저가 모든 활성 서비스 워커를 무시하고 네트워크에서 리소스를 가져오도록 강제 적용합니다. 이는 CSS 또는 자바스크립트 작업을 하고 싶은데 서비스 워커가 우연히 이전 파일을 캐시하여 반환하지 않을까 하는 걱정을 떨쳐버리고 싶은 경우에 매우 유용합니다.

4. service worker 를 새로운 버전으로 update 하려고 하면 

우측의 update를 선택하여 누르면 status 앞쪽 ID 값이 변경되는 것을 알수 있다.

5. 테스트 문구를 push 에 작성해서 push 버튼을 누르면 inspect 가 활성화 되고 누르면 세부 내용을 확인할 수 있습니다.

6 . 추가 적인 debug는 상단의 참조 url을 참고하시길..