WebAssembly Studio 预览

WebAssembly.Studio 是一款在线 IDE（集成开发环境），可帮助您学习并向他人教授 WebAssembly。它也是一款瑞士军刀，在使用 WebAssembly 时非常方便。

我们从 2017 年 12 月下旬开始开发 WebAssembly Studio，目的是将我们开发的两个现有工具合并：WasmExplorer 和 WasmFiddle。从那时起，由于几位早期加入项目的贡献者，我们取得了相当大的进展。我们合并了这两个工具并添加了一些新功能。我们的测试版（更像是 Alpha 版）现已在 https://webassembly.studio 上线，我们非常期待您的反馈。

快速入门

要开始使用上面的示例，只需点击构建，然后点击运行。 WebAssembly Studio 首先将 main.c 编译为 out/main.wasm，然后创建一个 iframe 沙箱，并在其中加载 main.html。 HTML 文件加载 main.js，该文件加载并执行 WebAssembly 模块，最终打印“Hello World”。要确切了解正在发生的事情，请阅读项目中包含的 README.md 文件。这是我整理的一个示例，用于演示 C 程序如何与 WebAPI 交互。我们希望其他人能整理出有趣的示例，并使用 WebAssembly Studio 作为教学工具。

功能概述

C/C++/Rust 支持

WebAssembly Studio 默认情况下对 C、C++ 和 Rust 提供基本（非常原始）支持。目前，编译服务主要在服务器端运行，但我们希望在客户端完成更多工作。

可编辑的编译器工件

WebAssembly Studio 可以完全编辑 WebAssembly 二进制模块（.wasm）以及文本文件（.wat）。尝试打开 out/main.wasm，您将看到反汇编的 .wat 输出。您实际上可以编辑此文本，保存后，原始 .wasm 文件将被重新汇编。

请注意，您可以将鼠标悬停在 WebAssembly 文本格式中的各种关键字上，以了解它们的用途。如下所示

易于访问的工具

WebAssembly Studio 中许多有趣的功能都隐藏在上下文菜单中。例如，如果您右键单击 out/main.wasm 文件，您将看到一个弹出菜单，其中包含几个命令

您可以使用这些上下文菜单命令对 .wasm 文件应用各种转换

验证使用 Binaryen 验证 WebAssmebly 模块是否有效。
优化对 WebAssembly 模块运行多个 Binaryen 优化流程。

反汇编使用 Wabt 将文件转换为 WebAssembly 文本格式。然后可以对其进行编辑，并重新汇编回 WebAssembly 文件。

有些命令会生成新的文件，例如“Firefox x86”将生成一个 .x86 文件，其中包含 Firefox 的 WebAssembly 引擎的反汇编输出。虽然这对于 JavaScript 开发者来说可能没什么用（或不可操作），但我发现它在向他人讲解 WebAssembly 时非常有用。（这是 WebAssembly 是低级的证明！）

二进制浏览器可以帮助您了解 WebAssembly 代码在二进制级别上的表示方式。

生成调用图绘制函数（包括导入和导出）之间的调用者/被调用者关系，以帮助您了解 WebAssembly 模块中包含的内容。

WebAssembly Studio 中的一些功能需要托管的后端服务（编译），但其他许多功能直接在浏览器中运行。 Binaryen、Wabt、Capstone.js 都被编译为 WebAssembly 并在浏览器中运行。这带来的额外好处是，我们可以更容易地扩展，减少服务器上的负载。

为了体验 WebAssembly 的魔力，请右键单击 main.c 并选择

…没错，Clang Format 也被编译为 WebAssembly，在本地运行，效果很好。

交互式嵌入

现在可以使用 embed.ly 嵌入 WebAssembly Studio 项目的交互式嵌入，这是一个用于在各种 Web 平台（包括 medium.com）中嵌入交互式内容的系统。您只需将 Fork 项目的链接粘贴到您的 medium.com 文章中

下一步

在接下来的几个月里，我们将

为 C/C++/Rust 项目添加更好的支持。对于 C/C++ 应用程序，我们目前仅使用 LLVM 后端，但我们也希望使用该后端添加对 Emscripten 的支持，以便您可以使用 SDL 和 OpenGL 等 API。对于 Rust，我们希望支持 Cargo。
继续添加新功能并将其他工具集成到 WebAssembly Studio 中。
使用熟悉的工具，使下载和本地构建 WebAssembly Studio 项目成为可能。
改进 UX、错误报告以及一般的性能优化。

想要了解更多信息或更多地参与该项目？请在 WebAssembly Studio GitHub 代码库中分享您的反馈，提交问题并添加功能请求。如果您想更多地参与 WebAssembly，查看主代码库，详细了解该项目及其基础架构。

更多 Michael Bebenita 的文章…

21 条评论

Chris Sells

这看起来很棒！您是否计划支持其他语言？例如 Kotlin？或者使其可插拔，以便其他人可以添加他们喜欢的语言？

2018 年 4 月 11 日下午 10:24
1. Michael Bebenita
  
  我们计划使其可插拔，因此 Kotlin 或任何其他编译为 WebAssembly 的语言都可以在 IDE 中托管。
  
  2018 年 4 月 11 日下午 11:23
  1. Muzafar
    
    能够编写 Kotlin 会很不错。我尝试过他们的 wasm 集成。也很不错。
    
    2018 年 4 月 12 日上午 7:24
    1. Michael Bebenita
      
      为更多语言添加支持将很棒。我们现在专注于使 C/C++/Rust 正常工作，但非常乐意协助贡献者添加对 Kotlin 的支持。
      
      2018 年 4 月 12 日上午 8:49
Christophe Coevoet

最后一段中 WebAssembly Studio github 代码库的链接是错误的。它指向您的 fork（我们无法提交问题），而不是主代码库。

2018 年 4 月 11 日下午 10:39
1. Michael Bebenita
  
  已修复，感谢！
  
  2018 年 4 月 11 日下午 12:22
Zachary Carter

很想看到 Nim 与 Rust 一起支持。对 Emscripten 支持有点困惑，因为我读到 - LLVM、Rust、Emscripten 在服务器端运行 - 在这里：https://github.com/wasdk/WebAssemblyStudio

如果 Emscripten 支持已经存在 - 那么 Nim 支持应该是可能的。

如果没有，我将不得不自己想办法在 fork 上实现 :)

2018 年 4 月 11 日下午 11:32
1. Michael Bebenita
  
  IDE 的工作方式是，您可以插入自己的编译器（托管在服务器上或在浏览器中本地运行）。如果您创建了一个模板（https://github.com/wasdk/WebAssemblyStudio/tree/master/templates）并提交 PR，我们将很乐意将其包含为可用的语言之一。我想您可能还想为 Nim 源文件添加 Monaco 编辑器支持。很乐意帮助您将其集成。
  
  2018 年 4 月 11 日下午 11:56
David Ross

这看起来很棒！

是否计划允许上传编译的 .wasm 文件以供检查？这看起来对于分析大型现有 WASM 项目的编译输出的调用图和 WebAssembly 文本非常有用。

2018 年 4 月 11 日下午 11:48
1. Michael Bebenita
  
  是的，右键单击左侧并上传您的 .wasm 文件。
  
  2018 年 4 月 11 日下午 11:50
Jeff Nelson

您的 Web Assembler 实现是否尝试防止硬件层攻击（如 RowHammer），还是将其留给主机处理？

2018 年 4 月 11 日下午 12:00
1. Michael Bebenita
  
  这留给主机处理。如果你好奇地想了解 Firefox 如何将其编译为 x86，请右键单击文件并查看基线 JIT 和优化编译器的 Firefox x86 代码。
  
  2018 年 4 月 11 日下午 12:04
jens

这看起来很有趣，但对我来说，如果它是 vscode 扩展而不是从头开始的另一个 IDE（一个大词），它会更有价值。我需要代码折叠、智能感知、语法高亮、重构，以及对 Rust 或 C/C++ 的非常好的支持，而所有这些功能都已在 vscode 或 intellij 中提供。

因此，将 5% 用于更好的 wasm 支持添加到现有 IDE 中，而不是将 95% 的 IDE 功能添加到 wasm 工具中，似乎更合适。

不想太苛刻。可能它对于简单地玩玩（比如 codepen 或 jsfiddle）来说是个不错的工具，但对于生产力和现实世界的 wasm 程序，我想人们会使用其他工具。也许我只是觉得在这种情况下使用 IDE 这个词有点奇怪：）

2018 年 4 月 11 日下午 1:40
1. Michael Bebenita
  
  我同意你的观点，为了提高生产力，开发人员应该使用本地 IDE 和得到良好支持的命令行工具，例如 Emscripten、Binaryen、rustc 等。WebAssembly.Studio 首先是一个 fiddler，其次是一个 IDE，这就是我们选择这条路线的原因。我完全同意我们应该将一些功能迁移到 VSCode（和其他 IDE）扩展中。
  
  2018 年 4 月 12 日上午 8:40
Leviathan Jeanis

会发布一个基于 electron 的版本吗？这看起来很棒，但我讨厌使用在浏览器中运行的 IDE。

2018 年 4 月 12 日上午 7:15
1. Michael Bebenita
  
  我们没有计划制作基于 Electron 的版本。WebAssembly.Studio 主要是一个学习工具，为了能够轻松地与他人共享项目，我们希望它在浏览器中运行。但是，它是一个开源项目，所以如果有人有兴趣和时间，他们可以将其打包成一个 Electron 应用程序，但我认为将时间花在将一些功能迁移到 VSCode 扩展中会更好。
  
  2018 年 4 月 12 日上午 8:45
Josh Yates

太棒了！团队很棒的工作。

2018 年 4 月 12 日上午 8:21
Dennis van Leeuwen

这太令人兴奋了。就像调用图。

2018 年 4 月 12 日上午 8:40
Nilesh

很棒的文章。：）

2018 年 4 月 12 日上午 8:52
Samuel

好消息：）你们辛苦了！

2018 年 4 月 12 日上午 10:03
Kesus Kim

我无法想象这会是真的，太棒了 =）

2018 年 4 月 12 日下午 5:25

这篇文章的评论已关闭。

Hacks

By Michael Bebenita

快速入门

功能概述

C/C++/Rust 支持

可编辑的编译器工件

易于访问的工具

交互式嵌入

下一步

关于 Michael Bebenita

21 条评论

WebAssembly Studio 预览

By Michael Bebenita

快速入门

功能概述

C/C++/Rust 支持

可编辑的编译器工件

易于访问的工具

交互式嵌入

下一步

关于 Michael Bebenita

发现 Web 开发的优秀资源

感谢您！ 请检查您的收件箱以确认您的订阅。

感谢您！请检查您的收件箱以确认您的订阅。