006 Web Assembly之除錯方法

linghuyichong發表於2021-08-23
Web除錯

影片地址：www.bilibili.com/video/BV1eg411g7c...
相關原始碼：github.com/anonymousGiga/Rust-and-...

上一節我們對之前寫的程式碼進行了測試，這一節我們來介紹除錯方法。

在我們寫更多的程式碼之前，我們希望有一些除錯工具來讓我們除錯程式碼中的bug。具體的一些工具我們後續介紹。下面我們主要介紹三種除錯方法。

我們的wasm-pack-template附帶了一個可選的，預設情況下啟用的依賴，該依賴屬於console_error_panic_hook包，在wasm-game-of-life/src/utils中配置。我們需要做的就是在初始化函式或者公共程式碼路徑中安裝鉤子。我們可以在Universe::new構造器中呼叫，如下：

pub fn new() -> Universe {
    utils::set_panic_hook();

    // ...
}

在Cargo.toml中新增如下程式碼：

[dependencies.web-sys]
version = "0.3"
features = [
  "console",
]

在src/lib.rs中新增：

extern crate web_sys;

// A macro to provide `println!(..)`-style syntax for `console.log` logging.
macro_rules! log {
    ( $( $t:tt )* ) => {
        web_sys::console::log_1(&format!( $( $t )* ).into());
    }
}

修改src/lib.rs中的tick函式如下：

//計算下一個滴答的狀態
    pub fn tick(&mut self) {
        let mut next = self.cells.clone();        

        for row in 0..self.height {
            for col in 0..self.width {
                let idx = self.get_index(row, col);
                let cell = self.cells[idx];
                let live_neighbors = self.live_neighbor_count(row, col);

                //以下為新增的內容
                log!(
                    "cell[{}, {}] is initially {:?} and has {} live neighbors",
                    row,
                    col,
                    cell,
                    live_neighbors
                );


                let next_cell = match(cell, live_neighbors) {
                    (Cell::Alive, x) if x < 2 => Cell::Dead,
                    (Cell::Alive, 2) | (Cell::Alive, 3) => Cell::Alive,
                    (Cell::Alive, x) if x > 3 => Cell::Dead,
                    (Cell::Dead, 3) => Cell::Alive,
                    (otherwise, _) => otherwise,
                };

                //以下為新增的內容
                log!("    it becomes {:?}", next_cell);

                next[idx] = next_cell;
            }
        }
        self.cells = next;
    }

我們在js程式碼中新增一個js的debugger，如下：

//www/index.js中

function renderLoop() {
    debugger;

    ...
}

3.1 編譯

在wasm-game-of-life目錄下執行：

wasm-pack build

在www目錄下執行：

npm run start

按F12開啟網頁除錯工具，可以進行除錯。

本作品採用《CC 協議》，轉載必須註明作者和本文連結
令狐一衝

相關文章