06 | WAT：如何让一个 WebAssembly 二进制模块的内容易于解读？

于航

你好，我是于航。
在前面的两节课中，我们分别讲解了 Wasm 模块在二进制层面的基本组成结构与数据编码方式。在 04 的结尾，我们还通过一个简单的例子，逐个字节地分析了定义在 C/C++ 源代码中的函数，在被编译到 Wasm 之后所对应的字节码组成结构。
比如字节码 “0x60 0x2 0x7f 0x7f 0x1 0x7f” ，便表示了 Type Section 中定义的一个函数类型（签名）。而该函数类型为 “接受两个 i32 类型参数，并返回一个 i32 类型值”。
我相信，无论你对 Wasm 的字节码组成结构、V-ISA 指令集中的各种指令使用方式有多么熟悉，在仅通过二进制字节码来分析一个 Wasm 模块时，都会觉得无从入手。那感觉仿佛是在上古时期时，直接面对着机器码来调试应用程序。那么，有没有一种更为简单、更具有可读性的方式来解读一个 Wasm 模块的内容呢？答案，就在 WAT。
WAT（WebAssembly Text Format）首先，我们来直观地感受一下 WAT 的“样貌”。假设我们有如下这样一段 C/C++ 源代码，在这段代码中，我们定义了一个函数 factorial，该函数接受一个 int 类型的整数 n，然后返回该整数所对应的阶乘。现在，我们来将它编译成对应的 WAT 代码。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

WebAssembly Text Format（WAT）是一种能够以人类可读的方式展现WebAssembly（Wasm）二进制字节码的文本代码格式。它使用S-表达式的结构来表达Wasm模块及其定义，使得字节码更加线性、可读。文章详细介绍了S-表达式的结构和求值方式，并通过示例展示了源码、字节码和Flat-WAT之间的对应关系。此外，文章还展示了WAT如何描述Wasm模块中各个Section的具体结构。通过WAT，开发者可以更直观地了解Wasm模块的内容，方便进行调试和理解。此外，文章还介绍了WAT相关工具，如wasm2wat和wat2wasm，以及Flat-WAT形式的代码。最后，文章提出了使用C/C++编写斐波那契数列函数并查看对应生成的WAT可读文本代码的课后练习。整体而言，本文通过介绍WAT的结构、工具和实际应用，为读者提供了全面了解WAT的指南。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《WebAssembly 入门课》，新⼈⾸单¥29

立即购买

登录后留言

全部留言(8)

最新
精选

慌慌张张
老师您好，请教一个问题。我们一般都是把c或者c++直接编译成wasm，只要native通了，wasm也没问题。那么出现wat得意义在哪里？貌似不需要通过wat来调试之类的……
作者回复: 其实就如同 WAT 的字面意思，这种格式就是为了能够以更加方便的形式来阅读 Wasm 字节码的内容。因为并不是所有的 Wasm 字节码都有其对应的源代码。对于一些特殊情况，我们可以直接人工编写 WAT 代码然后编译的字节码使用。
2020-10-20
3
6
weineel
感觉 Flat-WAT，比 WAT 看着好懂，为啥不直接只用 Flat-WAT？
作者回复: 这个主要是由于对“S-表达式”这种代码表达方式的选择。而为什么选择“S-表达式”则是由于几个因素的考虑：1、尽量不自行创建新的格式，而是直接利用已有的成熟的格式；2、这种格式可以“转换”为方便人们阅读的形式；3、这种格式可以表达 Wasm 模块的内部结构，与字节码一一对应。综上，核心团队选择了“S-表达式”。而对于编译器和工具来说，这种“S-表达式”可以被现有的很对代码实现直接解析和使用，不用重新造轮子，减轻了 Wasm 早期发展时的难度和负担。而同时“S-表达式”也可以被转换为对应的“Linear Representation”的形式，也就是“Flat-WAT”的格式。所以因果关系是先有的“S-表达式”形式的 WAT，才有的对应的 Flat-WAT。
2020-10-02

3
军秋
老师能在浏览器中像调试js一样调试wasm的C代码吗？（浏览器source中显示C代码，断点单步调试？）我自己尝试了一些方法还没成功
作者回复: 可以的，具体可以参考这篇文章：https://developers.google.com/web/updates/2019/12/webassembly。我在后面实践篇的文章中也会介绍哈。
2020-09-26

2
Running
因为最近工作涉及到一些WASM，及时购买了这个课程恶补基础，很好的一门课程。最近遇到一点技术问题想请教一下于老师，Chrome Web Store要求新上架的应用需要支持Manifest V3, 由于应用有部分代码是使用C语言实现的，编译成WASM，那么问题是WASM 在支持 Manifest V3 遇到了加载的问题。在Manifest V2使用CSP unsafe-eval 是可以运行的，但是V3 已经禁止了eval运行。 https://bugs.chromium.org/p/chromium/issues/detail?id=1173354#c19 于老师，对于这个问题有什么建议吗?这个问题困扰了好久
作者回复: 抱歉，Manifest V3 这块我不太了解，可以在 StackOverflow 上问问看呢？
2022-05-21

1
纳兰容若
老师您好有个问题请教一下：正文中 “经过编译和转换后，该函数对应的 WAT 文本代码如下所示。”下面的wat代码，我使用WABT中的wat-desugar进行flat时候出现错误： ASM/test.wat:8:6: error: unexpected token "get_local", expected an expr. ../../WASM/test.wat:11:4: error: unexpected token set_local. ../../WASM/test.wat:15:4: error: unexpected token (, expected ). ../../WASM/test.wat:15:5: error: unexpected token set_local. ../../WASM/test.wat:17:7: error: unexpected token "get_local", expected an expr. ../../WASM/test.wat:18:7: error: unexpected token get_local. ../../WASM/test.wat:21:5: error: unexpected token set_local. ../../WASM/test.wat:22:6: error: unexpected token tee_local. ../../WASM/test.wat:24:8: error: unexpected token "get_local", expected an expr. ../../WASM/test.wat:27:5: error: unexpected token ), expected EOF. 这个是什么原因呢是我的wabt安装的不正确么
作者回复: 是用什么编译的呢？
2022-05-20


Clearly
老师那个给的演示地址，查看对应生成的 WAT 可读文本代码，怎么用啊，一直在build状态
作者回复: 你是说 WasmFiddle 吗？这个工具在输好左侧的代码后，点击上面的 Build 然后再点击 Run 就可以了。我刚刚试了一下是 ok 的，可以看下是不是有网络问题哈。
2021-12-20


Jason
老师的原理讲解很细致，受益匪浅，以前自认为自己了解了 wasm，课程看到此意识到自己所知甚少。谢谢于老师的讲解，期待于航老师的实战讲解！
作者回复: 很高兴能够对你有帮助！
2020-09-17


Bachue Zhou
wat 代码里出现了多次 255 立即数，请问是用来做什么的？按理说 i32 的最大值也不是 255 吧。
2023-05-04归属地：上海

1

收起评论