Sublime Text 不能直接编译、调试或运行 WebAssembly,仅可作为编辑器配合 wasm-pack、浏览器 DevTools 等外部工具链完成 Rust+Wasm 开发全流程。

Sublime Text 本身不支持 WebAssembly 编译或调试——它没有内置的构建系统集成、无法加载 Source Map、也不提供任何 Wasm 字节码或 Rust 源码级断点能力。你不能在 Sublime Text 里像 VSCode 那样点击 lib.rs 文件打断点,然后单步进入 wasm 函数。
wasm-pack build 在 Sublime Text 中执行但不生效
很多人尝试用 Sublime Text 的 Build System(如 Tools → Build System → New Build System)配置 wasm-pack build --target web --debug,结果发现:终端输出成功,pkg/ 目录生成了,但浏览器打开后 DevTools 里找不到 src/lib.rs,或者断点灰色不可用。
- 根本原因不是命令没跑,而是 Sublime Text 不会自动启动 HTTP 服务,也不会注入
sourceMappingURL到 JS 中——而浏览器只认这个 URL 才能加载 .map 文件 -
--debug参数必须显式加上,否则wasm-pack默认走--release,生成的.wasm和.js都不含源映射信息 - 即使你手动用 Python 起了个
python -m http.server,若 index.html 中 JS 是通过import init, { add } from './pkg/xxx.js'加载的,仍需确保服务器返回正确的 MIME 类型(application/wasm),否则 Chrome 会静默失败
Rust + Wasm 调试必须依赖浏览器 DevTools
Sublime Text 没有调试协议桥接能力,所有真实调试行为都发生在 Chrome 或 Firefox 的 Sources 面板中。你写的 debugger; 或 console.log! 只会在浏览器控制台输出,不会触发 Sublime Text 的任何响应。
-
debugger;插入 Rust 代码无效 —— Rust 编译后是 wasm 字节码,不支持原生 debugger 语句;真正起作用的是 JS glue 层里的debugger,或你在 JS 调用处加断点 -
println!在浏览器中默认不输出到 console —— 必须启用console_error_panic_hookcrate,并在main或init函数开头调用set_panic_hook() - 想看到变量值?只能靠
console.log(&format!("{:?}", my_struct))+wasm_bindgen导出字符串,再由 JS 打印
Sublime Text 唯一可行的轻量开发流
如果你坚持用 Sublime Text 写 Rust + Wasm,唯一可落地的流程是把它当纯编辑器,所有构建、服务、调试全部交给外部工具链协同完成:
- 编辑时用
Rust Enhanced插件(非官方,但支持语法高亮、cargo check快捷键、跳转定义) - 保存后自动运行构建:用
subl-build+ 自定义 shell script 触发wasm-pack build --target web --debug --out-dir pkg-debug,避免覆盖生产包 - 用独立终端起
live-server --port=8080 --no-browser(npm 包),确保它服务index.html所在目录,且能正确返回.wasm文件 - 调试全靠 Chrome:打开
http://localhost:8080→ F12 → Sources → 左侧树展开 localhost → 找src/lib.rs(不是pkg/xxx.wasm)→ 点击行号设断点
关键细节容易被忽略:Chrome 的 Sources 面板里,lib.rs 文件只有在 pkg/xxx.js 中包含有效的 //# sourceMappingURL=xxx.js.map,且该 .map 文件里 sources 字段指向正确的相对路径(如 ../src/lib.rs),才能显示出来。任何路径错位都会导致“文件未找到”。


















