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

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

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

Answer 4

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

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

Answer 5

Как в Chrome v35

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

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

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

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

Answer 6

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

Answer 7

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

Answer 8

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

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

ht tps:https://stackru.com/images/e5894d82e687585fb20e57a0069d7e5bb7791384.png

Answer 9

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

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

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

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

Answer 10

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

Answer 11

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

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

Answer 12

в workerpool npm вы просто используете:

      .catch(function (err) {
        console.error(err);
    });

Answer 13

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

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

Answer 14

Перейдите по адресу chrome://serviceworker-internals/ и установите флажок ниже.Open DevTools window and pause JavaScript execution on Service Worker startup for debugging.: