JavaScript >> Javascript 文檔 >  >> Tags >> web

網絡工作者:錯誤和調試

上週末我一直在繼續嘗試使用網絡工作者,並發現了一些更有趣的信息。似乎較早的實施者 Firefox 3.5 和 Safari 4 在其功能和行為方面存在一些奇怪的差異。當我試圖弄清楚如果在工作人員內部拋出錯誤會發生什麼時,我發現了這一點。

onerror 事件處理程序

網絡工作者規範表明 error 當工作人員發生 JavaScript 錯誤時,應該觸發事件。 event 對像傳遞到 onerror handler 應該包含三個重要的屬性:message,即錯誤消息,lineno ,這是工人中引發錯誤的行,以及 filename ,這是發生錯誤的 JavaScript 文件。那應該 為您提供足夠的信息來處理髮生的任何錯誤。示例:

var worker = new Worker("worker.js");
worker.onerror = function(event){
    throw new Error(event.message + " (" + event.filename + ":" + event.lineno + ")");
};

Safari 的網絡工作者實現不會觸發 error 發生錯誤時的事件(錯誤),幾乎不可能從工作人員的錯誤中恢復。 Firefox 的實現確實觸發了 error 事件,但 message event 上的屬性 對象未填寫(錯誤)。

調試工作者

Safari 和 Firefox 都可以識別 worker 中的錯誤,因此將它們輸出到各自的控制台中。這是個好消息:您可以知道發生了錯誤。壞消息是你沒有真正的調試方法。

Firebug 和 Safari 的 Web Inspector 都不會在其加載腳本列表中顯示工作 JavaScript 文件。這實際上是有道理的,因為腳本沒有加載到頁面的全局範圍內,因此沒有註冊為正在使用。儘管這很有意義,但它也讓調試工作代碼非常痛苦。還記得在 Firebug 之前調試 JavaScript 是什麼樣的嗎?你就在後面,只是情況更糟。

由於工作代碼在其自己的全局範圍內運行,與頁面的全局範圍分開,這意味著您無權訪問 console 目的。沒有更多 console.log() 幫助您弄清楚發生了什麼。您可能會認為您必須重新使用 alert() ,就像過去的美好時光。壞消息:alert()window的方法 因此在工作人員內部不可用。

假裝它

沒有功能 onerror 事件處理程序,並且無法訪問我們常用的調試技術,因此有必要重載一個在 Safari 和 Firefox 中都有效的事件:message 事件。理想的設置如下所示:

//in page
var worker = new Worker("worker.js");
worker.onmessage = function(event){
    switch (event.data.type){
        case "debug":
            console.log(event.data.message);
            break;

        //other types of data
    }
};

worker.postMessage({
    type: "start",
    value: 12345
});

//in worker.js
self.onmessage = function(event){
    if (event.data.type == "start"){
        process(event.data.value);
    }
};

function process(number){

    self.postMessage({
        type: "debug",
        message: "Starting processing..."
    });

    //code

    self.postMessage({
        type: "debug",
        message: "Processing finished"
    });
}

在這個模型中,一個對象通過 postMessage() 從 worker 傳回 .該對像有一個字段,type ,表示該消息用於調試目的,以及一個 message 包含調試消息的字段。然後頁面通過 onmessage 讀取 事件處理程序,然後將調試消息輸出到控制台。請注意,我說這是理想 考慮到 onerror 無用的場景 .不幸的是,這不能用,因為 Safari 只支持通過 postMessage() 傳遞字符串 (漏洞)。這意味著消息只能是跨瀏覽器實現的字符串,導致如下所示:

//in page
var worker = new Worker("worker.js");
worker.onmessage = function(event){
    var data = event.data.split(":");
    switch (data[0]){
        case "debug":
            console.log(data[1]);
            break;

        //other types of data
    }
};

worker.postMessage("start:12345");

//in worker.js
self.onmessage = function(event){
    var data = event.data.split(":");
    if (data[0] == "start"){
        process(parseInt(data[1],10));
    }
};

function process(number){

    self.postMessage("debug:Starting processing...");

    //code

    self.postMessage("debug:Processing finished");
}

這個版本使用一個非常原始的字符串格式,用冒號分隔來來回傳遞消息(如果 Safari 4 原生支持 JSON,那將是另一種選擇)。每個onmessage 處理程序需要解析傳入的消息以確定要做什麼,然後採取適當的行動。有點hacky,但可以完成工作。

結論

Web Worker 仍在開發中,有很大的潛力,但現在存在很多問題。跨瀏覽器的差異幾乎是嚴重的,而且缺乏調試能力讓我相信工作人員還沒有為企業使用做好準備。當最後期限迫近時,沒有人可以花時間試圖弄清楚他們的工人為什麼不工作(雙關語)。也許每個瀏覽器的下一次迭代會產生更好、更合理的採用機會。在我看來,完整的採用故事最終將取決於我們的調試工具與工作人員集成的程度。


Tutorial JavaScript 教程
  1. AdonisJs 的 TDD 課程 - 8. 第三方 API、ioc 和自定義驗證器

  2. 使用 Puppeteer 抓取 Google 地圖數據

  3. 使用 Typescript 升級您的 VueJS 項目(第 3 部分):Vuex

  4. 我們都應該開始實施差異化服務嗎?

  5. 秋季隊列開放註冊:前端狐狸學校

  6. Angular 14 反應形式白色/空白空間驗證

  7. 全棧 JavaScript 中的 Redux

  1. 使用 k-NN 實現原始 OCR

  2. ES6 – 遍歷對象的對象並使用附加屬性改變對象

  3. 如何使用 findByIdAndUpdate 添加到現有數據而不是完全更新數據

  4. 使用 2FA 和 Authy 保護您的 npm 帳戶

  5. Bootstrap 5 滾動間諜

  6. 為喜歡、分享和訂閱創建超級按鈕

  7. 為動態導入修復 WebpackChunkName

  1. 代碼和 Scrum 100 天的第 24 天:用於生產的 React 框架!

  2. 使用 JavaScript 構建第一個 Twitter 機器人的 4 個簡單步驟

  3. React State for Dummies - 狀態和虛擬 DOM

  4. 在 React 中重新創建材料設計的漣漪效應