vscode+react+OpenCascade.js的js调试。
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
启动服务器，弹出浏览器，运行显示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}"
}
]
}
5.1 怎样调试。
1、在终端启动服务器
npm run build
可以关闭启动服务器时候，打开的网页，也可以不关。（这里真的正确吗？打开一个网页？）
2、在debugger中，选择对应的JSON配置，调试运行（或按F5键）。
这时会打开一个新的浏览器。断点也会起作用，会出现下图的步进的工具栏。
5.2 报错"pwa-msedge"，没有这个类型
"type": "pwa-msedge",
上这行会报错，没有这个类型。从node.js平台的测试程序开始调试。安装了Debugger for Java扩展插件。
然后，再测试这个项目，上面的报错就没有了。
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
