vscode+react+OpenCascade.js的js调试。

vscode+react+OpenCascade.js的js调试。 1、我的需求2、各个平台的说明2.1、OpenCascade.js平台说明2.2、Emscripten平台说明2.3、node.js平台 3、安装OpenCascade.js平台3.1、安装node.js平台3.2、 安装Emscripten平台3.3、安装OpenCascade.js平台 4、编译运行sample5、在vscode中实现调试运行，可以打断点5.1 怎样调试。5.2 报错"pwa-msedge"，没有这个类型5.3 报错无法启动浏览器 参考文章：

1、我的需求

我需要在react平台上面显示运行 OpenCascade.js三维编辑渲染平台，在vscode中运行，且可以分布调试。
由于本人常年接触C++，第一次应用js和react平台。所以这里记录的比较细。
都是我的学习笔记。作为以后查找方法。
欢迎大佬们帮看看有没有错误，欢迎萌新们咱们可以互相探讨。
我调试通过了，运行可以用，估计流程没有错误。好像有点忘记了。赶快写下来。

编译工具是VScode version 1.67.1。
浏览器：Chrome 版本 101.0.4951.67（正式版本） （64 位）。
OpenCascade.js平台 版本 2.0.0-beta.4259931。
emsdk 版本 3.1.0。

2、各个平台的说明 2.1、OpenCascade.js平台说明

下面是从OpenCascade.js平台说明文档中翻译整理的（感谢Google翻译）。链接如下：
https://dev.opencascade.org/project/opencascadejs

1、使用Emscripten SDK构建WebAssembly模块，为Open CASCADE Technology框架提供JavaScript语言绑定。
2、Emscirpten是一套基于LLVM构建的编译器工具链，通过该工具链我们可以将基于C/C++语言编写的传统应用程序源代码编译成asm.js或者WebAssembly模块等，可以供Web浏览器使用。
Emscirpten应用在 Linux, Windows, or Mac上。
3、不是OCCT的分支。相反，JavaScript和OCCT之间的所有绑定都是由构建系统自动生成的。
因此，OpenCascade。js将与母项目保持同步，无需手动对账。
4、目标是尽可能多地暴露API表面，并通过NPM以开发人员友好的方式，将生成的库发送出去。
因此，生成的NPM包的文件大小相当大，对于许多基于浏览器的应用程序来说可能太大。
因此，它提供了一种创建“自定义构建”的简单方法，只公开特定项目所需的部分API，从而显著缩小库的大小。

2.2、Emscripten平台说明

Emscripten 是一个完整的 WebAssembly开源编译器工具链。使用 Emscripten，您可以：

将 C 和 C++ 代码或任何其他使用 LLVM 的语言编译到 WebAssembly 中，并在 Web、Node.js 或其他 wasm 运行时上运行它。将其他语言的 C/C++运行时编译到 WebAssembly 中，然后以间接方式运行其他语言的代码（例如，对于Python和 Lua已经这样做了 ）。

详细情况请看下面链接：
https://emcc.zcopy.site/docs/introducing_emscripten/about_emscripten/

2.3、node.js平台

Emscripten平台好像不是必须的。但是我的项目在node.js里。所以先安装了。

3、安装OpenCascade.js平台 3.1、安装node.js平台

下载链接，http://nodejs.cn/download/
然后看看这个blog，很好的！nodejs安装和环境配置

3.2、 安装Emscripten平台

在Git中下载，我选的是3.1.0，下载Zip就可以。链接如下：

https://github.com/emscripten-core/emsdk/tree/3.1.0

解压缩Zip包，根据下面的readme.md，还有参考其它网页，逐步实验。
打开“命令提示符”(“cmd”)，将提示符目录更改到上面解压的Zip的文件夹。
依次使用如下命令：

//1安装
emsdk install --global latest
//2激活
emsdk activate latest
//3应用环境变量
emsdk_env.bat

//4验证
// 如果全局用不了，就手动添加一下环境变量
//(我的是：C:\web\WebAssemblyTest\01\emsdk)，
//然后每次要用的话就先应用一下环境变量 emsdk_env.bat ， 这样也可以全局使用
emcc -v  

//帮助
emsdk help
//应用上面help查到的命令
emsdk list
//安装其中的工具（可选择）
//emsdk install llvm-git-main-64bit

更加详细的说明，我另外写了一个blog。链接如下：
Emscripten在Windows10下的安装和配置

3.3、安装OpenCascade.js平台

下载链接如下：
https://github.com/donalffons/opencascade.js
安装命令如下：

npm install opencascade.js@beta

4、编译运行sample

在OpenCascade.js的官网找到一个sample文件夹。直接把文件夹拖到vscode中，就显示项目了。
快捷键 Ctrl + ` 打开终端“Terminal”。
在终端命令行键入如下命令安装：

npm i

会有一会儿安装进度条。在文件夹下生成node_modules文件夹，里面有几百兆的文件。

npm run start

启动服务器，d出浏览器，运行显示sample。
关闭浏览器后，终端里面server还是启动状态。
在终端中，Ctrl+c 关闭server。

5、在vscode中实现调试运行，可以打断点

在debugger页面，创建配置JSON文件launch.json，添加文件内容

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

官网位置：Configure the debugger

5.1 怎样调试。

1、在终端启动服务器

npm run build

可以关闭启动服务器时候，打开的网页，也可以不关。（这里真的正确吗？打开一个网页？）

2、在debugger中，选择对应的JSON配置，调试运行（或按F5键）。
这时会打开一个新的浏览器。断点也会起作用，会出现下图的步进的工具栏。

5.2 报错"pwa-msedge"，没有这个类型

 "type": "pwa-msedge",

上这行会报错，没有这个类型。从node.js平台的测试程序开始调试。安装了Debugger for Java扩展插件。
然后，再测试这个项目，上面的报错就没有了。

vscode怎么安装npm扩展组件

5.3 报错无法启动浏览器

Unable to launch browser:“Unable to find an installation of the browser on your system. Try installing it,or providing an absolute path to the browser in the “runtimeExecutable” in your launch.json.”

报错中处理方法写的很明白。
找不到浏览器，在JSON文件中添加"runtimeExecutable"属性，指定浏览器位置。

修改后的JSON配置文件如下：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Launch Chrome",
        "request": "launch",
        "type": "pwa-chrome",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceFolder}",
        "runtimeExecutable": "C:\Program Files\Google\Chrome\Application\chrome.exe"
      }
    ]
  }

参考文章：

https://blog.csdn.net/qq_40732336/article/details/120253542
https://www.cnblogs.com/fxw1/p/15137724.html
https://blog.csdn.net/u013035708/article/details/78032015
https://emcc.zcopy.site/docs/getting_started/downloads/

https://code.visualstudio.com/docs/nodejs/nodejs-debugging
https://code.visualstudio.com/docs/editor/debugging
https://code.visualstudio.com/docs/nodejs/nodejs-tutorial