WebAssembly - 在 Firefox 中除錯 WASM
WebAssembly 除錯介紹
你好啊，有志者！今天，我們將要踏上一段令人興奮的旅程，進入 WebAssembly 除錯的世界。別擔心如果你是新手——我們會從最基礎的知識開始，然後逐步學習。在這個教學結束時，你將能在 Firefox 中像專業人士一樣除錯 WebAssembly！
WebAssembly 是什麼？
在深入除錯之前，讓我們先了解 WebAssembly（WASM）到底是什麼。WebAssembly 是一種為了在網頁瀏覽器中高效執行而設計的二進制指令格式。它就像是一種計算機能夠理解的秘密語言，讓程序能在網頁上運行得更快。
想像一下你正在試著教你的狗一個新把戲。你可以用長而複雜的句子（像 JavaScript）來解釋，或者你可以使用簡短而直接的指令（像 WebAssembly）。這就是差別——WebAssembly 對計算機來說更直接，也更快。
環境設定
安裝 Firefox 開發者版
為了除錯 WebAssembly，我們將使用 Firefox 開發者版。這就像 Firefox 的更酷、更有技術含量的表親。讓我們來安裝它：
- 訪問 Firefox 開發者版網站
- 點擊下載按鈕
- 按照安裝指示
安裝完畢後，你將手握一個強大的工具，用於除錯 WASM。
創建一個簡單的 WebAssembly 專案
現在，讓我們創建一個基本的 WebAssembly 專案來操作。我們將從一個簡單的 "Hello, World!" 範例開始。
<!DOCTYPE html>
<html>
<head>
<title>WASM 除錯測試</title>
</head>
<body>
<h1 id="greeting">載入中...</h1>
<script>
WebAssembly.instantiateStreaming(fetch('hello.wasm'))
.then(obj => {
document.getElementById('greeting').textContent =
obj.instance.exports.hello();
});
</script>
</body>
</html>這個 HTML 文件加載一個 WebAssembly 模組（hello.wasm）並調用其 hello 函數來設定我們標題的文本。
現在，讓我們創建我們的 WebAssembly 模組。我們將使用一種叫做 AssemblyScript 的語言，這就像 TypeScript 但編譯為 WebAssembly。
// hello.ts
export function hello(): string {
return "Hello, WebAssembly World!";
}為了將這個編譯為 WebAssembly，你需要設定 AssemblyScript，但現在，我們假設我們已經準備好 hello.wasm 檔案。
在 Firefox 中除錯 WASM
打開開發者工具
首先，讓我們在 Firefox 中打開我們的開發者工具：
- 在你的網頁上任何地方右鍵單擊
- 選擇 "檢查元素"
- 點擊 "除錯器" 标签
你现在應該會看到一個面板，其中有你的源代碼和各種除錯工具。
設置斷點
斷點就像代碼中的暫停按鈕。它們讓你能在特定點停止執行以檢查正在發生的事情。以下是如何設置一個斷點：
- 在 "源代碼" 面板中，找到你的 WebAssembly 檔案（它可能被命名為像 "wasm://wasm/00a3f..." 之類的）
- 點擊你想要暫停執行的行號
- 會出現一個藍色標記，表示你的斷點
逐行執行代碼
一旦你設置了斷點，重新加載你的頁面。當代碼執行到你的斷點時，它會暫停。現在你可以逐行執行你的代碼：
| 按鈕 | 行為 | 描述 |
|---|---|---|
| Step Over | F10 | 執行當前行並移動到下一行 |
| Step Into | F11 | 進入函數調用 |
| Step Out | Shift + F11 | 完成當前函數並步出 |
檢查變量
在逐行執行代碼時，你可以檢查變量的值：
- 在除錯器的右手邊面板中查看 "作用域" 和 "變量" 區段
- 展開它們以查看當前步驟中的變量值
這對於理解代碼在每一步發生了什麼非常有用。
高級除錯技巧
使用控制台
控制台是你的最佳夥伴，當你除錯時。你可以用它來記錄信息，甚至直接執行代碼。
試著在你的 HTML 檔案中添加以下代碼：
<script>
console.log("WASM 模組加載！");
</script>現在，當你打開開發者工具的控制台標籤時，你會在 WASM 模組加載時看到這個消息。
除錯記憶體
WebAssembly 直接訪問記憶體，這既強大又可能會有些棘手。Firefox 讓你可以檢查這個記憶體：
- 在除錯器中，尋找 "Wasm 記憶體" 區段
- 你會看到模組記憶體的十六進制視圖
- 你甚至可以直接編輯這個記憶體！
記住，能力越強，責任越大。當你直接修改記憶體時要小心！
結論
恭喜你！你已經踏出了進入 WebAssembly 除錯世界的第一步。我們介紹了設定你的環境、創建一個簡單的 WASM 專案，以及使用 Firefox 强大的除錯工具來檢查和逐行執行你的代碼。
記住，除錯既是一門科學，也是一門藝術。你練習得越多，你就越擅長追蹤那些難以捉摸的錯誤。不要氣餒，即使是經驗豐富的開發者也要花很多時間除錯。
繼續實驗，持續學習，最重要的是，玩得開心！WebAssembly 為網頁開發打開了全新的可能性，而你現在已經準備好去探索它。快樂編程！
Credits: Image by storyset