WebAssebmly初级——调试C++代码（三）

系列文章目录

WebAssebmly初级

---

前言

对于一个研发来说，写代码可以在许多编译器上编写，编译器体验感对于写代码来说可以是相当重要，可是更影响程序员体验的是如何调试代码，研发调试代码经常会用到断点，如果连断点都没有，仅仅靠输出Log信息无疑是让人抓狂的。

emsdk是不提供断点调试代码的，2019年gdb研发人员公布可以使用gdb进行调试WebAssebmly二进制文件，但是博主亲测目前还没有能够实现调试功能。

又有人说，安装一个虚拟docker，在docker下进行调试时可以的，博主并没有进行尝试，因为个人如果因为要使用WebAssebmly而专门在docker下进行调试感觉是…

2019年11月，WebAssebmly开发推广工程师则推出了一款工具，使得能够在web浏览器上调试C++代码，这无疑是提供了一个非常好的工具，并且该工具可以进行断点调试、跟进、查看堆栈…

该工具名C/C++ DevTools Support (DWARF)，但是如果不翻墙~~~~~~~~
如果有条件的：DevTools下载
|版本声明：山河君，未经博主允许，禁止转载！

一、安装扩展程序

有条件的可以自行下载

没有条件的使用第三方网址下载，这里都是离线安装，goole在2018年就升级秘钥，离线安装很可能会出现安装不上。

使用第三方Chrome扩展插件搜索下载网站地址 ，搜索DWARF下载。
如果网站失效，那么就从我这CSDN下载吧DevTool

解压安装包后，直接将crx文件拖入到web浏览器上，如果报‘CRX_HEADER_INVALID’错误，修改crx后缀为.zip，解压后点击web更多工具->扩展程序

打开开发者模式->加载已解压的扩展程序，找到安装包位置

二、使用

之前的文章已经初步介绍了如何使用WebAssebmly和WebAssebmly使用注意的地方，知道了emsdk除了可以导出main函数，还可以导出其他C/C++函数，但是必须强制为C接口，但是为了避免在编译时被优化器删除普通的C/C++函数，所以需要在函数前加EMSCRIPTEN_KEEPALIVE标识，提前告知编译器保留当前函数。

现在就结合该工具进行调试C++代码，有以下代码hello.c：

1.生成

#include <stdio.h>
#include <stdlib.h>
#include <emscripten/emscripten.h>

#ifdef __cplusplus
extern "C" {
#endif

int EMSCRIPTEN_KEEPALIVE myFunction(int argc, char ** argv) {
  printf("我的函数已被调用\n");
}

int EMSCRIPTEN_KEEPALIVE printBigOne(int i, int j)
{
	i > j ? printf("i is big:%d\n", i) : printf("j is big:%d\n", j); 
	return i + j;
}

int EMSCRIPTEN_KEEPALIVE printSmallOne(int i, int j)
{
	i < j ? printf("i is big:%d\n", i) : printf("j is big:%d\n", j); 
	return i + j;
}

#ifdef __cplusplus
}
#endif

int main()
{
	int a = printBigOne(10,2);
	int b = printSmallOne(234,13432);
	printf("hello world\n");
	emscripten_exit_with_live_runtime(); //挂起main 或者使用命令-s NO_EXIT_RUNTIME=1
	return a +b;
}

输入命令

emcc hello.c -s ALLOW_MEMORY_GROWTH -s USE_SDL=2 -o hello.html -g -fdebug-compilation-dir=.

命令名	命令释义
-s ALLOW_MEMORY_GROWTH	对应Asm.js的堆的大小是可增长
-g	调试
-fdebug-compilation-dir	debug源码目录

2.开启调试

输入命令

emrun --no_browser --port 8080 ./

在web端打开，点击F12，在调试设置中

开启WebAssebmly Debugging

此时就会出现源代码并可以调试了