Как отлаживать веб-воркеры

В качестве быстрого решения отсутствующего console.log вы можете просто использовать throw JSON.stringify({data:data})

Версия Chrome для Dev Channel поддерживает отладку рабочих процессов путем внедрения поддельной реализации рабочих процессов, которая имитирует рабочие процессы с использованием iframe на странице клиента рабочего процесса. Вам нужно будет перейти на панель «Сценарии» и установить флажок «Отладка» на боковой панели «Рабочие» справа, а затем перезагрузить страницу. После этого рабочий скрипт появится в списке скриптов страниц. Однако эта симуляция имеет определенные ограничения: поскольку рабочий скрипт будет выполняться в потоке клиентской страницы, любые длительные операции в рабочем потоке зависают в пользовательском интерфейсе браузера.

WebWorker можно отлаживать так же, как обычную веб-страницу. Chrome предоставляет средства отладки для WebWorkers по адресу: chrome://inspect/#workers.

Найдите нужный работающий веб-воркер и нажмите «Проверить». Откроется отдельное окно инструмента разработки, посвященное этому веб-воркеру. Стоит ознакомиться с официальными инструкциями.

Начиная с Chrome 65, теперь вы можете просто использовать функцию «входа» отладчика:

Дополнительные сведения см. в их примечаниях к выпуску.

в отладчике Chrome на вкладке сценария прокрутите до рабочей панели и выберите паузу при запуске.. это позволит вам отлаживать рабочего и вставлять точки останова.. но вы делаете все это в другом окне

Как в Chrome v35

• Загрузите свою страницу и откройте Инструменты разработчика Chrome.
  
  

• Перейдите на вкладку Источники.
  
  

• Установите флажок Пауза при запуске, как показано ниже:
  
  

• Перезагрузите страницу, отладчик приостановится в веб-воркере, правда, в новом окне!

Редактировать: в более новых версиях Chrome (я использую v39) рабочие процессы находятся на вкладке «Потоки» вместо собственной вкладки «Рабочие» (вкладка «Потоки» станет видимой, если есть какие-либо работающие рабочие процессы).

Вы можете использовать self.console.log('your debugging message')

Принятый ответ на самом деле не является решением для всех.

В этом случае вы можете использовать console.log или console.debug или console.error в Web Workers в Firefox. См. Ошибка №620935 и Ошибка №1058644.

и если вы используете Chrome, вы можете отлаживать веб-воркеры так же, как отлаживаете обычные скрипты, console.log будет напечатан на вашей вкладке, если вы это сделаете. Но если ваш воркер является общим, вы можете взглянуть на chrome://inspect.

Дополнительный совет: поскольку людям, плохо знакомым с javascript, довольно сложно освоить Workers, я написал для них чрезвычайно легкую оболочку, которая предоставляет вам согласованный API для обоих типов Workers. Он называется Worker-Exchange.

Простое решение для получения доступа к сообщениям/данным от рабочего потока в целях отладки — использовать 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...
   }
};

Помимо JSON.stringify() есть еще port.postMessage( (new Object({o: object})) ). Возможно, использование его в тандеме с JSON.stringify будет более полезным.

Надеюсь, это было полезно!

В феврале 2016 г. WebStorm выпустил поддержку отладки веб-воркеров. .

В новых версиях Google Chrome просто выберите Deveverloper Tools › Sources (или меню правой кнопки мыши › Inspect › Sources).

В нижней части Page списка левой панели вы увидите сервис-воркеров в значке движка.