WebAssembly - 在Firefox中除錯WASM

現今所有最新的瀏覽器中都添加了 WebAssembly 支援，例如 Chrome、Firefox。Firefox 版本 54 及以上為您提供了除錯 wasm 程式碼的特殊功能。

要執行此操作，請在呼叫 wasm 的 Firefox 瀏覽器中執行程式碼。例如，考慮以下尋找該數字平方的 C 程式碼。

C 程式的示例如下 −

#include<stdio.h>
int square(int n) {
   return n*n;
}

我們將利用 WASM 瀏覽器獲取 wasm 程式碼 −

下載 WASM 程式碼並使用它檢視瀏覽器中的輸出。

載入 wasm 的 html 檔案如下 −

!doctype html> 
<html>
   <head>
      <meta charset="utf-8"> 
      <title>WebAssembly Square function</title> 
      <style> 
         div { 
            font-size : 30px; text-align : center; color:orange; 
         } 
      </style> 
   </head> 
   <body> 
      <div id="textcontent"></div> 
      <script> 
         let square; 
         fetch("findsquare.wasm").then(bytes => bytes.arrayBuffer()) 
            .then(mod => WebAssembly.compile(mod)) 
            .then(module => {return new WebAssembly.Instance(module) }) 
            .then(instance => {  
            square = instance.exports.square(13);
            console.log("The square of 13 = " +square);           
            document.getElementById("textcontent").innerHTML = "The square of 13 = " +square; 
         }); 
      </script> 
   </body> 
</html>

開啟 Firefox 瀏覽器並載入上述 html 檔案，然後開啟偵錯程式工具。

您應該在偵錯程式工具中看到 wasm:// 條目。點選 wasm://，它會顯示轉換為 .wat 格式的 wasm 程式碼，如上所示。

您可以檢視匯出函式的程式碼，並在出現任何問題時除錯此程式碼。Firefox 還打算新增斷點，以便您可以除錯程式碼並檢查執行流程。

列印頁面

上一個

下一個