웹 워커를 디버깅하는 방법
저는 HTML 5에서 웹 작업자와 함께 일하고 있으며 디버깅 방법을 찾고 있습니다. 이상적으로는 방화범이나 크롬 디버거와 같은 것입니다. 누구든지 이것에 대한 좋은 해결책이 있습니까? 콘솔이나 DOM에 대한 액세스가 없으면 iffy 코드를 디버깅하기가 어렵습니다.
누락 된 console.log에 대한 빠른 솔루션으로 다음을 사용할 수 있습니다. throw JSON.stringify({data:data})
Chrome의 Dev Channel 버전은 작업자의 클라이언트 페이지 내에서 iframe을 사용하여 작업자를 시뮬레이션하는 가짜 작업자 구현을 삽입하여 작업자 디버깅을 지원합니다. 스크립트 창으로 이동하여 오른쪽의 작업자 사이드 바에서 디버그 확인란을 선택한 다음 페이지를 다시로드해야합니다. 그러면 작업자 스크립트가 페이지 스크립트 목록에 나타납니다. 하지만이 시뮬레이션에는 몇 가지 제한 사항이 있습니다. 작업자 스크립트는 클라이언트 페이지 스레드에서 실행되기 때문에 작업자의 장기 실행 작업은 브라우저 UI를 고정시킵니다.
WebWorker는 일반 웹 페이지처럼 디버그 할 수 있습니다. Chrome은 chrome : // inspect / # workers 에서 WebWorkers 용 디버깅 개발 도구를 제공합니다 .
원하는 실행중인 웹 작업자를 찾아 "검사"를 클릭합니다. 해당 웹 작업자 전용 별도의 개발 도구 창이 열립니다. 공식 [지침] [2]은 확인할 가치가 있습니다.
크롬 디버거의 스크립트 탭에서 작업자 패널로 스크롤하고 시작시 일시 중지를 선택합니다. 그러면 작업자를 디버깅하고 중단 점을 삽입 할 수 있습니다.하지만 모든 작업은 다른 창에서 수행합니다.
Chrome v35에서와 같이
- 페이지를로드하고 Chrome 개발자 도구를 엽니 다.
- 소스 탭으로 이동합니다 .
확인 시작의 일시 정지 아래와 같이 체크 상자를 :
페이지를 다시로드하면 디버거가 웹 워커에서 일시 중지되지만 새 창에서는 중지됩니다!
편집 : 최신 버전의 Chrome (v39 사용)에서 작업자는 자체 "작업자"탭 대신 "스레드"탭 아래에 있습니다 (실행중인 작업자가있는 경우 스레드 탭이 표시됨).
Chrome 65부터 이제 디버거의 "단계별"기능을 사용하면됩니다.
당신이 사용할 수있는 self.console.log('your debugging message')
받아 들여지는 대답은 실제로 모든 사람에게 해결책이 아닙니다.
이 경우 Firefox의 웹 작업자를 사용 console.log하거나 console.debug또는 사용할 수 있습니다 console.error. 버그 # 620935 및 버그 # 1058644를 참조하십시오 .
Chrome을 사용하는 경우 일반 스크립트를 디버깅하는 것처럼 웹 작업자를 디버깅 할 수 있으며, 그렇게하면 console.log가 탭에 인쇄됩니다. 그러나 작업자가 공유 된 작업자 인 경우 chrome://inspect.
추가 팁 : 작업자는 자바 스크립트를 처음 접하는 사람들에게 배우기가 매우 어렵 기 때문에 두 작업자 유형 모두에서 일관된 API를 제공하는 매우 가벼운 래퍼를 작성했습니다. 이를 Worker-Exchange 라고 합니다.
JSON.stringify () 외에도 port.postMessage( (new Object({o: object})) ). 아마도 함께 사용하면 JSON.stringify더 도움이 될 것입니다.
도움이 되었기를 바랍니다.
2016 년 2 월 WebStorm은 웹 작업자 디버깅 지원을 출시했습니다 .
WebStorm JavaScript 디버거는 이제 이러한 백그라운드 작업자 내에서 중단 점에 도달 할 수 있습니다. 프레임을 살펴보고 익숙한 방식으로 변수를 탐색 할 수 있습니다. 왼쪽의 드롭 다운 목록에서 작업자 스레드와 기본 애플리케이션 스레드 사이를 이동할 수 있습니다.
디버깅 목적으로 작업자로부터 메시지 / 데이터에 액세스하는 간단한 솔루션은 postMessage()작업자 스레드 내 에서 사용 하여 원하는 디버깅 정보를 다시 전달하는 것입니다.
이러한 메시지는 상위 프로세스 onmessage핸들러 에서 '잡힐' 수 있으며, 예를 들어 작업자에서 콘솔로 다시 전달 된 메시지 / 데이터를 기록 할 수 있습니다. 이는 비 차단 접근 방식이라는 장점이 있으며 작업자 프로세스가 실제 스레드로 실행되고 일반적인 브라우저 환경에서 디버깅 될 수 있도록합니다. 이와 같은 솔루션은 작업자 프로세스 코드의 중단 점 수준 검사를 지원하지 않지만 많은 상황에서 디버깅을 지원하기 위해 작업자 프로세스 내에서 필요한만큼의 데이터를 노출 할 수있는 기능을 제공합니다.
간단한 구현은 다음과 같습니다 (관련 발췌 부분이 표시됨).
// 작업자의 onmessage함수 범위 어딘가 (필요한만큼 자주 사용) :
postMessage({debug:{message:"This is a debug message"}});
// 부모의 onmessage핸들러에서 :
myWorker.onmessage = function(event) {
if(event.data && event.data.debug) {
// handle debug message processing here...
if(event.data.debug.message) {
console.log("message from worker: %o", event.data.debug.message);
}
} else {
// handle regular message processing here...
}
};
참조 URL : https://stackoverflow.com/questions/2323778/how-to-debug-web-workers
'developer tip' 카테고리의 다른 글
| PHP를 사용하여 날짜를 ISO 8601 형식으로 표시하는 방법 (0) | 2021.01.06 |
|---|---|
| Windows 배치 파일에서 문자열을 공백으로 분할하는 방법은 무엇입니까? (0) | 2021.01.06 |
| 여러 조건이있는 if의 실행 순서 (0) | 2021.01.06 |
| Spring XML 컨텍스트에서 조건부 리소스 가져 오기를 수행하는 방법은 무엇입니까? (0) | 2021.01.06 |
| psql 출력에서 알림 비활성화 (0) | 2021.01.06 |