Как отлаживать веб-работников - PullRequest
54 голосов
/ 24 февраля 2010

Я работаю с веб-работниками в HTML 5 и ищу способы их отладки. В идеале что-то вроде firebug или хромированных отладчиков. Есть ли у кого-нибудь хорошее решение для этого. без доступа к консоли или DOM это довольно сложно отладить iffy code

Ответы [ 11 ]

55 голосов
/ 28 апреля 2010

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

22 голосов
/ 13 февраля 2011

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

16 голосов
/ 22 октября 2014

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

Найдите нужного работающего веб-работника и нажмите «проверить».Откроется отдельное окно dev-tool, посвященное этому веб-работнику.Официальные [инструкции] [2] стоит проверить.

11 голосов
/ 08 апреля 2012

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

10 голосов
/ 13 июня 2014

Как в Chrome v35

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

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

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

    Debugging workers in Chrome Dev Tools

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

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

9 голосов
/ 16 февраля 2018

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

enter image description here

Подробнее см. В примечании к выпуску .

3 голосов
/ 23 апреля 2014

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

1 голос
/ 07 января 2015

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

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

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

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

0 голосов
/ 16 сентября 2016

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

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

Отладчик WebStorm JavaScript теперь может достигать точек останова внутри этих фоновых рабочих. Вы можете просматривать кадры и исследовать переменные так же, как вы привыкли. В раскрывающемся списке слева вы можете переключаться между рабочими потоками и основным потоком приложений.

WebStorm web worker debugging screenshot

...