如何調試網絡工作者

Question

我一直在與 HTML 5 中的網絡工作者一起工作，並且正在尋找調試它們的方法。 理想情況下，類似於螢火蟲或 chrome 調試器。 有沒有人對此有任何好的解決方案。 無法訪問控制台或 DOM，這是一種難以調試的代碼

Answer 1

Chrome 的 Dev Channel 版本通過注入假的工作人員實現來支持工作人員的調試，這些工作人員使用工作人員的客戶端頁面中的 iframe 來模擬工作人員。 您需要導航到 Scripts 窗格並勾選右側 Workers 側邊欄上的 Debug 復選框，然后重新加載頁面。 工作腳本將出現在頁面腳本列表中。 不過，這種模擬有一定的局限性——因為工作腳本將在客戶端頁面線程中運行，工作中任何長時間運行的操作都會凍結瀏覽器 UI。

Answer 2

作為缺少 console.log 的快速解決方案，您可以使用throw JSON.stringify({data:data})

Answer 3

WebWorker 可以像普通網頁一樣調試。 Chrome 為 WebWorkers 提供調試開發工具： chrome://inspect/#workers

找到所需運行的 webworker，然后單擊“檢查”。 一個單獨的開發工具窗口將打開專供該網絡工作者使用。 官方說明值得一看。

Answer 4

從 Chrome 65 開始，您現在可以簡單地使用調試器的“介入”功能：

有關更多詳細信息，請參閱他們的發行說明。

Answer 5

在 chrome 調試器中，在腳本選項卡中，滾動到工作器面板，然后選擇啟動時暫停..這將允許您調試工作器，並插入斷點..但您在不同的窗口中執行所有操作

Answer 6

就像在 Chrome v35 中一樣

• 加載您的頁面並打開 Chrome 開發者工具。
  
  

• 導航到源選項卡。
  
  

• 勾選Pause on Start復選框，如下圖：
  
  

• 重新加載頁面，調試器將在 web worker 中暫停，但在新窗口中！

編輯：在較新版本的 Chrome（我使用的是 v39）中，工作人員位於“線程”選項卡下，而不是擁有自己的“工作人員”選項卡（如果有任何正在運行的工作人員，則“線程”選項卡將變得可見）。

Answer 7

您可以使用self.console.log('your debugging message')

Answer 8

接受的答案並不是每個人的真正解決方案。

在這種情況下，您可以在 Firefox 的 Web Workers 中使用console.log或console.debug或console.error 。 請參閱錯誤 #620935和錯誤 #1058644 。

如果你在 Chrome 中，你可以像調試普通腳本一樣調試 web workers，如果你這樣做，console.log 會打印到你的選項卡上。 但是，如果您的工作人員是共享工作人員，您可能需要查看chrome://inspect 。

額外提示：因為對於 JavaScript 新手來說，Worker 很難學習，所以我為它們編寫了一個非常輕量級的包裝器，為您提供了跨兩種類型的 Worker 的一致 API。 它被稱為Worker-Exchange 。

Answer 9

為了調試目的而從工作線程訪問消息/數據的一個簡單解決方案是在工作線程中使用postMessage()來傳回所需的調試信息。

然后，這些消息可能會在您的父進程的onmessage處理程序中“捕獲”，例如，它可以記錄從工作進程傳回控制台的消息/數據。 這具有作為非阻塞方法的優點，並允許工作進程作為真正的線程運行並在通常的瀏覽器環境中進行調試。 雖然像這樣的解決方案不能對工作進程代碼進行斷點級檢查，但在許多情況下，它提供了從工作進程中根據需要公開盡可能多或盡可能少的數據以幫助調試的能力。

一個簡單的實現可能如下所示（顯示相關摘錄）：

// 在 worker 的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 10

除了 JSON.stringify()，還有port.postMessage( (new Object({o: object})) ) 。 也許將它與JSON.stringify一起使用會更有幫助。

希望這是有幫助的！

Answer 11

2016 年 2 月，WebStorm 發布了對調試 Web Workers 的支持。

WebStorm JavaScript 調試器現在可以在這些后台工作程序中觸發斷點。 您可以像以往一樣瀏覽框架並探索變量。 在左側的下拉列表中，您可以在工作線程和主應用程序線程之間跳轉。

Answer 12

在新版本的 Google Chrome 上，只需轉到Deveverloper Tools > Sources （或右鍵單擊菜單 > Inspect > Sources ）。

在Page左側面板列表的底部，您將在引擎圖標中看到服務工作人員。

Answer 13

在 workerpool npm 中，您只需使用：

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