谷歌浏览器（Chrome）安装WASM调试工具

原创已于 2022-07-14 11:27:07 修改 · 4.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#chrome #前端

于 2022-07-14 11:26:10 首次发布

wasm 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何利用Chrome的C/C++ DevTools Support (DWARF) 插件进行WebAssembly程序的调试。首先，需要确保Chrome版本在93以上并安装调试插件。接着，配置Chrome的开发者工具，启用WebAssembly DWARF支持。然后，创建一个C程序，用Debug模式编译并转换为WASM格式。在HTML中引入WASM文件并设置跨域策略。最后，通过Chrome打开HTML文件并使用开发者工具进行调试。调试过程中可能遇到跨域问题，需解决以继续调试。

一、调试工具

这里主要是介绍C/C++的调试工具，其它类似。工具要求必须是版本号93以上的Chrome，所以如果版本较低的可以升级一下自己的谷歌浏览器。首先打开：
https://chrome.google.com/webstore/detail/cc%20%20-devtools-support-dwa/pdcpmagijalfljmkmjngeonclgbbannbx
会出现下面的界面：

在这里插入图片描述

点击右侧的安装按钮即可将开发插件C/C++ DevTools Support (DWARF)安装到谷歌的浏览器中，如果版本低，则右面的按钮会显示“不兼容此版本”，并告诉你最低版本是多少。

二、配置调试

打开谷歌浏览器，F12键进入代码开发者模式，点击“设置”就是那个小齿轮的图标，然后在上面点击“experiments”,并勾选如下图的“WebAssembly debug：Enable DWARF support”选项。

在这里插入图片描述

三、引入程序

编译相关程序，注意，必须是Debug模式，也就是说，在gcc中需要-g这个编译选项。先搞一个C程序，最简单的：

#include<stdio.h>
int square(int a) {
   return a*a;
}

在前面提到的WASM Exlporer中编译此程序，并下载到本地。
再写一个html文件：

<!doctype html> 

   
      <meta charset="utf-8"> 
      <title>WebAssembly Test</title> 
      <style> 
         div { 
            font-size : 30px; text-align : center; color:orange; 
         } 
      </style> 
    
    
      <div id="textcontent"></div> 
      <script> 
         let square; 
         fetch("test.wasm").then(bytes => bytes.arrayBuffer()) 
            .then(mod => WebAssembly.compile(mod)) 
            .then(module => {return new WebAssembly.Instance(module) }) 
            .then(instance => {  
            square = instance.exports.square(13);
            console.log("The square of 13 = " +square);           
            document.getElementById("textcontent").innerHTML = "The square of 13 = " +square; 
         }); 
      </script>

使用Chrome打开此文件，进入开发调试模式即可。
这时可能会出现“Access to fetch at ‘file:///C:/Users/dell/Desktop/test.wasm’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https”，需要处理跨域问题。网上有多种解决方式，选一个熟悉的即可。