22

在浏览器里 Debug C++

 3 years ago
source link: http://www.phodal.com/blog/chrome-debug-wasm/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

最近和同事在使用 Rust 编写 Scie ，即重写 vscode-textmate，期间遇到一个严重的 bug，需要调试一下 vscode-textmate 的底层的 vscode-oniguruma WASM 绑定。

所以呢，为了正确地调试它，我就需要新起一个项目，以便于在浏览器中调试。因此，我需要配置一个 WASM 的 debug 环境。

搜索了一番，发现在去年底，Google 提供了一个 DWARF 的功能： Improved WebAssembly debugging in Chrome DevTools 。

对应的，在不同的编译器 clang 、 emcc 和 rust 中，也提供了对应的支持。这里，vscode-oniguruma 用的是 emcc。

好了，这样一来，我就需要一个对应的 emsdk 环境。

搭建 emcc 环境

  1. 安装 emsdk
brew install emsdk

但是，这种方式好像有点问题，更新也就比较麻烦，所以我就换成了：

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install 1.39.12
./emsdk activate 1.39.12
  1. 添加 -g 参数

嗯，对应的修改完的脚本就是：

emcc -O2 \
    deps/oniguruma/src/.libs/libonig.a \
    src/onig.cc \
    -Isrc -Ideps/oniguruma/src \
    -o out/onig.js \
    -s ENVIRONMENT=shell \
    -s FILESYSTEM=0 \
    -s MODULARIZE=1 \
    -s EXPORT_NAME=Onig \
    -s ALLOW_MEMORY_GROWTH=1 \
    -s EXTRA_EXPORTED_RUNTIME_METHODS="['UTF8ToString']" \
    -g
  1. 在浏览器中调试

接着，写一个简单的 demo，我们就可以在浏览器中打断点了。

当前只有 Chrome 浏览器支持，所以呢， 你懂的。随后，我们需要在控制台中允许 WASM Debug


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK