Laya踩坑003_所谓的vsCode调试/f5调试

Posted 2023-05-07

参考技术A 是的，我又来了，很明显，只黑不洗白。

今天喷的是“vscode调试/′f5调试”的功能，emm...妙就妙在“喷”字。

事实证明，这玩意暂时跑不起来。（可能是我太弱智，反正照着官方文档没能配起来。）

官方文档【VSCode中断点调试】

https://ldc2.layabox.com/doc/?nav=zh-ts-3-0-9#%E4%B8%89%E3%80%81VSCode%E4%B8%AD%E6%96%AD%E7%82%B9%E8%B0%83%E8%AF%95

1. 安装Debugger for Chrome插件，略过。

2. 调试环境安装好之后，也不能断点。因为还需要打开“sourceMap”功能。（官方文档： https://ldc2.layabox.com/doc/?nav=zh-ts-3-0-7 ）

3. 看吧，看完是不是懵逼了？是不是找不到对应文件？

3-1. 文档没跟你说文件根目录在哪，其实就是按照项目根目录而已，小坑小坑，后面才刺激。

3-2. 官方文档第二步：修改 .laya/launch.json

找到"sourceMaps": false, 修改为 "sourceMaps": true,

这里不是.laya/launch.json，是.vscode/launch.json。又一个坑。

4. 官方文档第三步：修改 src/tsconfig.json

又找不到了吧？

文档提及到，需要“module模式TS项目（实验版 ）”，实验版！！！哎嘿嘿~这是创建项目的时候就设置的。

这是我两个不同项目的对比图，只有这样才能找到tsconfig.json文件。

5. 你真棒~磕磕碰碰的，你还耐心的看到现在。

不过很遗憾的告诉你，跑不起来。当你配完，运行起来的时候：

提示找不到bin目录下的laya.js文件，至此我是没法找到这个文件哪来的。后面有空继续踩坑吧~

如果有大佬知道怎么操作，麻烦留个印。感激不尽~！

typescript安装及踩坑指南-vscode调试

1首先node.js官网下载版本，windows是msi文件

一步一步安装
有一步是automatically install the necessary tools可以把对号勾上。
然后输入node -v查看版本号
npm -v查看npm版本号

2.安装typescript，全局安装

npm install typescript -g

安装好后查看typescript版本号：

tsc -v

3安装vs code

官网安装即可
创建文件main.ts
写入

let hello = "hello world"
console.log(hello)

打开vscode的terminal命令行
输入tsc main.ts
就会生成main.js文件
node main.js
就会输出“hello world"

4坑，出现问题及解决办法

4.1 node，tsc，npm在vscode中全部不生效

无法将“tsc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。”问题解决

解决办法：
右键vscode->点击属性->兼容性->勾选以管理员权限运行。
重新打开vscode即可

4.2 无法加载文件tsc.ps1

PS C:\\Users\\he> tsc main.ts
tsc : 无法加载文件 C:\\Users\\he\\AppData\\Roaming\\npm\\tsc.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 abou 
+ ~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

解决办法：
windows下运行*.ps1脚本（powershell的脚本）的时候，需要设置执行权限
以管理员权限打开 PowerShell, 输入如下命令：

set-executionpolicy remotesigned