WebGPU：如何在浏览器中查看编译后的WGSL着色器指令？

无需手动下载或构建Dawn/Tint，直接用Chrome自带的开发者工具就能查看编译后的指令：

• 打开DevTools（快捷键F12或Ctrl+Shift+I），切换到GPU面板
• 在左侧导航栏找到WebGPU分类，展开后选择你的WebGPU应用实例
• 点击对应的着色器模块，可查看三类核心内容：
  • 原始WGSL代码
  • Tint编译生成的SPIR-V中间代码（支持反汇编为可读文本）
  • 最终发送给GPU的二进制指令（部分硬件可反汇编为汇编代码）

如果需要更详细的编译过程日志，可通过Chrome启动参数开启：

• 关闭所有Chrome窗口，在命令行执行：chrome --enable-logging --log-level=0 --v=1
• 启动后运行WebGPU应用，日志会包含Tint的优化细节（比如循环展开、函数内联的执行情况）

• Edge：基于Chromium内核，和Chrome的操作完全一致，通过DevTools的GPU面板即可查看WebGPU编译指令
• Firefox：目前WebGPU工具链仍在完善中，DevTools暂无专门的着色器查看面板。可通过环境变量开启日志获取编译信息：
  • Windows：关闭Firefox后执行set MOZ_LOG=WebGPU:5
  • Linux/macOS：关闭Firefox后执行export MOZ_LOG=WebGPU:5
  • 启动Firefox并运行应用，日志会输出编译相关内容，但可读性不如Chrome的GPU面板

通过编译后的代码对比，可定位新手常见的低效问题：

• 循环展开：对比原始WGSL和编译后的代码，如果循环被拆分为重复的指令块，说明编译器自动做了展开；若未展开，可能是循环次数不固定或编译器判定展开无收益
• 函数内联：查看编译后的代码是否保留函数调用指令，若函数体被直接嵌入调用处，说明已完成内联；若仍有调用，可检查函数是否符合内联条件（比如函数体过大）
• 冗余类型转换：如果编译后的代码中出现频繁的无意义类型转换（如f32转i32再转回f32），说明原始WGSL的类型处理存在冗余

另外，结合Chrome DevTools的Performance面板录制GPU运行过程，可定位耗时较高的着色器，再配合GPU面板的编译代码分析瓶颈。

内容的提问来源于stack exchange，提问作者Engineer