在webassembly中使用浏览器断点调试c/c++

点击上方蓝字，发现更多精彩

导语

对于webassembly开发者来说，调试代码曾是一件比较痛苦的事情。好消息是，近期chrome canary已支持更高级的调试，本篇对调试方法进行一个实践。

对于webassembly开发者来说，调试代码曾是一件比较痛苦的事情。我们用一个例子来演示调试。一个简单的c文件

 index.c：

int main(int argc, char *argv[])  int a = 1;  printf("hello world, %d\n", a);  return 0;}

编译成webassembly

emcc index.c -o output.html

然后我们在浏览器打开dev-tools，你可以在wasm代码中断点，但是仅仅能看到如下的栈式调用，右侧的scope也无法看到真实的变量名。唯一可以看到的是调用栈。

另一种比较原始的方案是打log，你可能需要很多个printf才能找到问题。打log首先是无法追踪堆栈信息。另一个问题是，webassembly无法直接打印字符串日志信息到浏览器控制台。事实上，js和c代码只能传递数值类型。在js和c代码之间传递字符串是比较麻烦的。

当webassembly应用更大更复杂时，上面的调试方式就显得更加低效。

实际上，我们可以在emscripten的官方网站看到-g编译参数的说明：

也就是说，emscripten工具是可以导出DWARF格式的调试信息的，它包含了源代码的各种调试信息，包括变量名保留等。那么浏览器是完全可以利用DWARF数据进行友好调试的。好消息是，近期在最新chrome canary已支持在浏览器进行高级的调试c/c++代码了，不但可以断点调试，而且可以实时看到变量名称和变量值。下面我们进行一下实践：

1、显然的，我们需要在编译参数中增加-g参数，还有-fdebug-compilation-dir参数

emcc -g index.c -fdebug-compilation-dir='.' -o output.html

其中fdebug-compilation-dir参数指向c代码源码路径

2、更新chrome canary到最新版

3、打开chrome设置

4、打开设置 

5、安装DWARF插件

https://chrome.google.com/webstore/detail/cc -devtools-support-dwa/pdcpmagijalfljmkmjngeonclgbbannb

重新编译wasm文件，然后打开浏览器尝试一下：

是不是很舒服？左侧是我们的源码，鼠标移到a变量上，可以看到a变量的值，在右侧的scope面板可以看到局部变量。

试试指针的显示：

结构体：

甚至可以在控制台输出。不过控制台暂无法进行表达式运算。于此，我们可以在复杂的wasm应用中进行更便捷的调试。

END

▼

更多精彩推荐，请关注我们

▼

你的每个赞和在看，我都喜欢！