[2026/10/1]

[WEB Tool] WASM Inspector v1.1 — .wasm の中身をバイト単位で覗くツール使い方ガイド

概要

WASM Inspector は、.wasm ファイルの中身をブラウザだけで覗けるツールです。

中身を、WAT（WebAssembly のテキスト形式）、hex（生のバイト列）、セクション構造の 3 つの見方で同時に表示します。どこにカーソルを乗せても、他の 2 つの対応する場所が光ります。WAT の命令にカーソルを乗せればその命令がファイルの何バイト目にあるかが分かり、hex のバイトにカーソルを乗せればそのバイトが「どの関数の、どの命令の、どの部分か」が分かります。

-g 付きでビルドした .wasm なら、DWARF（デバッグ情報）を読んで、WAT の間に元のソースコードの行を表示することもできます。

パーサーと逆アセンブラは自作で、外部ライブラリは使っていません。インストール不要で、ファイルはサーバーに送信されません。

WASM Inspector

WASM Inspector // PROTOCOL.LAIN

.wasm の中身をバイト単位で覗く。WAT・hex・セクション構造の連動表示、サイズの内訳と機能判定、DWARF による元ソースの行まで。ブラウザ完結。

lain-lab.com

スタートメニューから起動

トップページのスタートメニューからも起動できます。

WebAssembly

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine.

webassembly.org

スクリーンショット

WASM Inspector — WAT・hex・ソースの連動

WASM Inspector — STATS（サイズの内訳・機能判定・オペコード頻度）

WASM Inspector — HELP / 命令リファレンス

操作動画

ツールの特徴

ブラウザ完結: インストール不要。ファイルはブラウザの中だけで解析し、サーバーには送信しません。
3 方向の連動: WAT・hex・セクション構造のどこにカーソルを乗せても、他の 2 つの対応する場所が光ります。
命令とバイトの対応: 命令ごとに、オペコードの部分と即値（命令に付く数値）の部分を区別して表示します。
読みやすい WAT: 関数名、ローカル変数名、データ領域の文字列を、分かる範囲で数字の代わりに表示します。
サイズの内訳と機能判定: どのセクション・どの関数が重いのか、SIMD やスレッドなどの機能を実際に使っているのかを調べます。
元ソースの表示: DWARF（-g 付きビルドのデバッグ情報）があれば、WAT の間に元のソースコードの行を挟んで表示します。
命令の意味: カーソルを乗せた命令の意味とスタック効果をステータスバーに表示し、全 540 命令のリファレンスページへ飛べます。
大きなファイルにも対応: 表示は見えている部分だけを描くので、数 MB の .wasm でも重くなりません。

対応形式

項目	対応
ファイル	WebAssembly コアモジュール（`.wasm`、バージョン 1）
命令	MVP、符号拡張、飽和変換、バルクメモリ、参照型、SIMD / relaxed SIMD、スレッド・アトミック、末尾呼び出し、例外処理（旧仕様 / exnref 版）、Typed Function References
メモリ	Memory64、Multi-Memory
カスタムセクション	`name`（関数名・ローカル変数名など）、`producers`、`target_features`、`sourceMappingURL`、DWARF の `.debug_line`（v2〜v5）
ソースファイル	任意のテキストファイル（`.c` / `.cpp` / `.rs` など、DWARF に書かれたファイル名で照合）

未対応のものは「注意事項」を見てください。

使い方

1. .wasm を読み込む

次のどれかで読み込みます。

方法	操作
ドロップ	`.wasm` をページのどこかにドロップします
ファイル選択	左上の枠をクリックしてファイルを選びます。ソースファイルも一緒に選べます
URL	左上の URL 欄にアドレスを入れて LOAD。同じサイト内のファイルか、CORS が許可されたファイルに限ります
サンプル	「▶ SAMPLE MODULE」で、C で書いて `-g` 付きでビルドしたサンプル（4.6KB）とそのソースを読み込みます

初めて使うときは、サンプルから始めるのがおすすめです。関数名と DWARF が入っているので、全部の機能を試せます。

2. 画面の構成

場所	内容
左	読み込み、ファイル情報、セクション一覧、関数一覧
中央	2 つのタブ（WAT / STATS）
右	hex（ファイル全体のバイト列）
右下	ステータスバー（カーソルを乗せた場所の情報）と色の凡例

3. 上部のバー

項目	内容
WAT / STATS	中央の表示を切り替えます
GOTO	オフセット・関数番号・関数名を入れて Enter で移動します（後述）
SRC	元ソースの行の表示のオン / オフ。DWARF がないファイルでは押せません
COPY WAT	いま表示している WAT をクリップボードにコピーします
? HELP	操作方法のヘルプを開きます
◧	左パネルの表示 / 非表示

GOTO 欄には次の書き方ができます。

入力	移動先
`0x1a2b` または `1a2b`	そのオフセット（16 進）にあるバイトを含む命令やエントリ
`#12`	12 番の関数
`$main`	名前が `main` の関数（完全一致がなければ前方一致）

4. 左パネル

FILE INFO には、ファイルの概要が出ます。

項目	内容
Size	ファイルサイズ
Sections	セクションの数
Types	関数の型の数
Imports	外部（JS 側）から受け取る関数・メモリなどの数
Functions	モジュール内で定義している関数の数
Exports	外部に公開している関数などの数
Memory	線形メモリのサイズ（ページ数。1 ページ = 64KiB）
Data	data セグメントの数と合計サイズ
Names	name セクションに名前がある関数の数
DWARF	デバッグ情報のセクションの数とサイズ
Line table / Sources	DWARF の行テーブルの版と行数、ソースファイルの読み込み状況（✓ は読み込み済み）
Language / Processed by	producers セクションに書かれた言語とビルドツール
Scan	全関数をスキャンした命令の総数

SECTIONS は、セクションの一覧です。バーはファイル全体に対するサイズの割合です。カーソルを乗せると hex でその範囲が光り、クリックするとそのセクションを開きます。

FUNCTIONS は、関数の一覧です。何も入力していないときは、サイズの大きい順に 100 個を表示します。検索欄には名前の一部か #番号 を入れます。Enter で先頭の候補を開きます。

5. WAT タブ

WAT は、MODULE → セクション → 関数の順に開いていく階層表示です。上のパンくず（MODULE › code › func[2] fib）で、いまどこを見ているかが分かります。パンくずをクリックすると、その階層に戻ります。

階層	表示
MODULE	セクションの一覧（位置・サイズ・割合・項目数）。行をクリックするとそのセクションを開きます
セクション	そのセクションの中身を 1 項目 1 行で表示します。関数に関係する行（code / export / function など）は、クリックするとその関数を開きます
関数	関数の本体を WAT で表示します。`block` / `loop` / `if` の中は字下げされます

左端の数字は、その行のバイトオフセット（16 進）です。

関数の WAT では、命令の種類ごとに色が付きます。

色	命令の種類	例
オレンジ	制御	`block` `loop` `if` `br` `return`
ピンク	関数呼び出し	`call` `call_indirect`
黄緑	変数	`local.get` `global.set`
青	メモリ	`i32.load` `i32.store` `memory.copy`
白	定数	`i32.const`
灰色	演算	`i32.add` `i32.lt_s`
水色	SIMD	`v128.load` `i32x4.add`
黄色	アトミック	`i32.atomic.rmw.add`
青緑	元ソースの行（DWARF）	`;; sample.c:30 │ if (n < 2) return n;`

数字だけでは分かりにくいところは、分かる範囲で置き換えて表示します。

関数番号は、name セクションや import / export の名前で表示します（call $fib）
ローカル変数も、name セクションに名前があれば名前で表示します（local.get $n）
i32.const の値が data セグメントの中を指していれば、その位置の文字列を横に出します（i32.const 1036 ;; "PROTOCOL.LAIN"）

操作は次のとおりです。

操作	動作
行にカーソルを乗せる	対応するバイトが hex でオレンジに光ります。命令なら、オペコードの部分が濃く、即値の部分が薄く光ります
行をクリック	緑で選択して固定します。ステータスバーの内容も、この行で固定されます
`call` / `global.get` などの行をダブルクリック	呼び出し先の関数、またはグローバル変数の定義に移動します
◀ ボタン / `Backspace`	前の画面に戻ります
Shift + ホイール	横スクロール（長い行用）

6. HEX

ファイル全体のバイト列です。左が 16 進、右が ASCII（文字として読めるバイト）です。パネルの幅に合わせて、1 行 16 バイトか 8 バイトで表示します。

文字の色は、そのバイトが属するセクションの種類です（凡例は右下）。code セクションの中は、関数ごとに明暗が交互になるので、関数の境目が hex のままでも見えます。セクションの先頭（ID とサイズ）は白です。

表示	意味
オレンジの背景	カーソルを乗せている命令・項目の範囲（濃い部分がオペコード）
緑の背景	選択中の命令・項目、または開いているセクション・関数の範囲
白い枠	カーソルの下にあるバイト

操作	動作
バイトにカーソルを乗せる	そのバイトが何に属するかをステータスバーに表示し、WAT の対応する行がオレンジに光ります
バイトをクリック	そのバイトを含む命令・項目まで WAT で移動して選択します

7. ステータスバー

右下のステータスバーには、カーソルを乗せた場所（または選択した行）の情報が出ます。

OFFSET 0x000116 (278)  BYTE 0x80  RANGE 0x000112–0x000118 6B = op 1 + imm 5
code › func[2] fib › call $fib
call [引数…] → [戻り値…]  関数を呼ぶ。引数をスタックから取り、戻り値を積む  REF↗
SRC sample.c:31:10  return fib(n - 1) + fib(n - 2);

行	内容
1 行目	カーソルの下のバイト（位置と値）、その命令の範囲。`op 1 + imm 5` は、オペコード 1 バイトと即値 5 バイトでできているという意味
2 行目	そのバイトの所属（セクション › 関数 › 命令）
3 行目	命令の意味とスタック効果。`REF↗` で命令リファレンスの該当行を開きます
4 行目	元ソースのファイル・行・列と、その行の中身（DWARF があるとき）

スタック効果の [i32 i32] → [i32] は、「i32 を 2 つ取り出して、i32 を 1 つ積む」という意味です。WebAssembly はスタックマシンなので、何を取り出して何を積むかが分かれば、命令の働きはだいたい分かります。

WAT の行をクリックすると、ステータスバーの内容がその行で固定されます。ほかの場所にカーソルを乗せている間はそちらを表示し、外れると固定した内容に戻ります。REF↗ を押しに行くときは、先に行をクリックしてください。

8. STATS タブ

ファイルの「重さの内訳」を表示します。

項目	内容
FILE / CODE / DATA / CUSTOM	ファイルサイズと、code・data・custom セクションが占める割合
SECTION SIZE	セクションごとのサイズ（大きい順）。クリックするとそのセクションを開きます
FEATURES	使っている機能。緑が使っている機能です
PRODUCERS	ビルドに使った言語・コンパイラ・ツール（producers セクションがあるとき）
LARGEST FUNCTIONS	サイズの大きい関数の上位 30。クリックするとその関数を開きます
OPCODE HISTOGRAM	出現回数の多い命令の上位 30
IMPORTS BY MODULE	import をモジュール名ごとに集計したもの

FEATURES は、全関数の命令をスキャンして、実際に使われている命令から判定しています。大きなファイルでは、読み込みの直後はスキャン中の割合が表示され、終わると結果が出ます。

target_features（ビルド時に有効にしていた機能）が書かれているファイルでは、その内容も下に表示します。こちらは「有効にしていた」というだけで、実際に使ったとは限りません。

9. 元ソースの表示（DWARF）

-g 付きでビルドした .wasm には、命令と元ソースの行の対応表（DWARF の .debug_line）が入っています。これがあると、関数の WAT の間に元ソースの行が挟まります。

;; sample.c:30  │ if (n < 2) return n;
i32.lt_s
br_if 1
;; sample.c:31  │ return fib(n - 1) + fib(n - 2);
i32.add
call $fib

DWARF に入っているのはファイル名と行番号だけで、ソースの中身は入っていません。行の中身まで出すには、.wasm を読み込んだ後に、元のソースファイルをドロップしてください。ファイル名で照合します。.wasm と一緒に選んでも、複数のソースファイルをまとめてドロップしても構いません。

操作	動作
`SRC` ボタン / `S` キー	元ソースの行の表示を切り替えます
ソースファイルをドロップ	行の中身を表示します。FILE INFO の Sources に ✓ が付きます

ビルド方法の例です。

ツール	オプション
clang	`--target=wasm32 -g`
Emscripten	`emcc -g`
Rust	`Cargo.toml` の `[profile]` で `debug = true`

DWARF に入るファイルのパスは、ビルドしたマシンの絶対パスになります。公開する .wasm に -g を付けるときは、clang なら -ffile-prefix-map=$PWD=. を付けて、パスを置き換えておくのがおすすめです。

10. 命令リファレンス

全 540 命令の一覧ページです。ステータスバーの REF↗、またはヘルプの最後のリンクから開けます。

WASM Instruction Reference // PROTOCOL.LAIN

WebAssembly の全 540 命令の一覧。オペコードのバイト列、即値、スタック効果、説明。検索とグループで絞り込み。

lain-lab.com

列	内容
OPCODE	オペコードのバイト列。`FC` / `FD` / `FE` で始まるものは、2 バイト目以降が LEB128 で書かれたサブオペコード
命令	命令名（色は WAT と同じ種類分け）
即値	命令の後ろに付く値の種類（関数番号、ラベル、memarg など）
スタック効果	何を取り出して、何を積むか
説明	命令の働き

上の検索欄では、命令名・説明・オペコードで絞り込めます（例: i32.add、ゼロ拡張、FD AE）。スペースで区切ると AND 検索になります。右のボタンで、制御・メモリ・SIMD などのグループに絞り込めます。/ キーで検索欄に移動します。

11. キーボード

キー	動作
`?`	ヘルプ
`G`	GOTO 欄へ
`/`	関数検索欄へ
`[` / `]`	前 / 次の関数
`Backspace` / `Alt` + `←`	戻る
`T`	WAT と STATS を切り替え
`S`	元ソースの行の表示を切り替え
`L`	左パネルの表示を切り替え
`Esc`	選択を解除 / 入力欄から抜ける / ヘルプを閉じる

WAT をクリックしてフォーカスしているときは、次のキーも使えます。

キー	動作
`↑` `↓` `PgUp` `PgDn` `Home` `End`	選択行を移動（hex も追従）
`Enter`	選択行を開く（一覧なら中へ、`call` なら呼び出し先へ）
`←` `→`	横スクロール

入力欄にカーソルがあるときは、ショートカットは効きません。

12. 狭い画面で使うとき

画面の幅に合わせて、左パネルと hex の幅が自動で縮みます。幅が 900px 以下のときは左パネルが隠れるので、◧ ボタンか L キーで重ねて表示してください。何も読み込んでいないときは、最初から表示されています。

注意事項

ファイルはブラウザの中だけで解析します。サーバーへの送信や保存は一切しません。
ページを閉じたり再読み込みしたりすると、読み込んだ内容は失われます。
次のものには対応していません。
- GC proposal（0xFB で始まる命令と、再帰型などの型定義）。その関数は途中まで表示し、以降はデコードできない旨を表示します
- Component Model 形式のファイル（コアモジュールのみ対応）
- DWARF の変数の位置や型の情報（行番号の対応のみ）
浮動小数点の定数は 10 進で表示します。wasm2wat は 16 進表記（0x1p+4 など）で出しますが、値は同じです。
「COPY WAT」は、いま開いている画面（MODULE・セクション・関数のどれか）の内容をコピーします。モジュール全体の WAT が欲しいときは wasm2wat を使ってください。

よくある質問 (FAQ)

Q. 関数名が (no name) ばかりで読めません
A. 関数名は name セクションから取っています。リリースビルドの多くは、サイズを減らすために name セクションを削っているので、名前が分かるのは import / export の関数だけになります。中身を読みたいときは、デバッグビルド（-g 付き）の .wasm を使ってください。

Q. SRC ボタンが押せません
A. DWARF の行テーブル（.debug_line）が入っていないファイルです。-g 付きでビルドすると入ります。FILE INFO の DWARF が none になっていないかを確認してください。

Q. ソースの行番号は出るのに、中身が出ません
A. DWARF には、ファイル名と行番号しか入っていません。元のソースファイルをドロップしてください。ファイル名（パスを除いた部分）が DWARF に書かれたものと一致すれば表示されます。

Q. 1 行の C の処理の一部が、前の行の側に入って見えます
A. 表示の不具合ではありません。DWARF の行の区切りは「この命令から、この行の処理が始まる」という形なので、コンパイラが行の境目をどの命令に置くかで、値を積む命令などが前の行の側に入ることがあります。最適化したビルドでは、ループの先頭に戻るときに行番号が前の行に戻ることもあります。

Q. call 2 なのに、命令が 6 バイトもあります
A. 関数番号の 2 が、82 80 80 80 00 のように 5 バイトに水増しされて書かれています。LEB128 は、続きのバイトがあることを示すビットを立てて、値を変えずに長くすることができます。リンカがあとから番号を書き換えられるように 5 バイト固定の場所を確保した跡で、リンカが詰め直しをしない設定（デバッグ情報付きのビルドなど）だとそのまま残ります。

Q. URL から読み込めません
A. 別のサイトのファイルは、そのサイトが CORS を許可していないと、ブラウザの制限で読み込めません。ファイルをダウンロードしてから、ドロップしてください。

Q. FEATURES と target_features の内容が違います
A. FEATURES は、実際に使われている命令から判定しています。target_features は、ビルド時に有効にしていた機能の一覧で、有効にしていても使われていないことがあります。

Q. 読み込もうとすると「Component Model（コンポーネント）形式は未対応です」と出ます
A. WASI 0.2 などで使われるコンポーネント形式のファイルです。現在はコアモジュールにだけ対応しています。

技術記事

実装の詳細は、技術記事にまとめています。

[Astro] #159 WASM Inspector — .wasmの中身をバイト単位で覗く（WAT・hex・DWARFソース行の3方向連動）

自前のWASMパーサーと逆アセンブラ、JSでのLEB128、wabtとの全命令突き合わせ、DWARF .debug_lineの状態機械、clang -O1の最適化の観察、540命令の説明をルールで生成する方法まで。

lain-lab.com

更新履歴

バージョン	日付	内容
v1.0.0	2026/10/1	初回公開（WAT・hex・セクション構造の連動、STATS、命令リファレンス）
v1.1.0	2026/10/1	DWARF の行テーブルによる元ソースの行の表示、C のサンプル（DWARF 入り）、HELP とショートカット、狭い画面への対応

クレジット

本ツールは、外部ライブラリを使わずに作っています。

パーサー / 逆アセンブラ / DWARF 行テーブルの読み込み / UI — 自作
サンプル（sample.wasm）— clang 18（LLVM）でビルド

検証には次のツールを使いました（ページには含まれていません）。

WABT（The WebAssembly Binary Toolkit） — Apache License 2.0
LLVM / clang / llvm-dwarfdump — Apache License 2.0 with LLVM Exception

命令の仕様は WebAssembly Core Specification、DWARF の行テーブルは DWARF Debugging Information Format（Version 4 / 5）を参照しています。

WebAssembly Specification

WebAssembly Core Specification

webassembly.github.io

GitHub - WebAssembly/wabt: The WebAssembly Binary Toolkit

The WebAssembly Binary Toolkit

github.com