如何使用 VSCode 开发 UserScripts？

[ves]

vscode 内置提供了几种调试方法，但都存在一点小问题，也是我不太会用。

vscode 调试时要求运行一个服务器，在此之上来 debug js 。而运行服务器不能只有 js，需要放置一个 html 。

vscode 还提供一种 node 的方式来运行调试 js，很方便，但不能使用浏览器 API 。

预期最好的结果是最后这种，能在 vscode 里直接运行调试单文件 js，又能使用浏览器 API 。可以的话，greasyfork 中提供的 API 也能有一个补全提示就更好了。

[smallthing]

有 edge 浏览器插件 直接在里面运行和调试

[Trim21]

https://github.com/Trim21/webpack-userscript-template

然后加 debugger，用浏览器的 devtool 调试

[sikong31]

tampermonkey 的脚本在 Chrome 里可以调试 打个断点就行了

[wdssmq]

给 js 所在目录开个 web 服务，，浏览器打开就能被识别然后安装（虽然不太清楚，好像需要 .user.js 后缀？？）

[ysc3839]

@wdssmq 看你的截图是 Tampermonkey 的功能，不是浏览器的功能。

[muzuiget]

你会 JS，直接写扩展就是了，扩展本来就有 Content Scripts 的概念，用油猴纯多此一举，直接用浏览器调试。

油猴扩展无非就是绕过浏览器官方商店审核，申请所有扩展权限然后再建一个商店，就像明明一个网页直接能用 Safari 打开，非得用微信小程序打开。

除非代码是别人写的，用了油猴私有 API，即 GM_ 开头那些，如果是自己重头写，别折腾油猴了，按扩展来写就是。

[ves]

@smallthing 但这样编辑与运行就分开了

[ves]

@muzuiget 我更想要的是一个好的开发方案，按扩展写，那有没有好的方案？

[ves]

@Trim21 感谢，来看看怎么用

[ves]

@Trim21 这 edge 里调试不怎么好使啊，有点抽象

[ysc3839]

@ves 写扩展的话可能会更简单，因为浏览器可以加载未打包的扩展，改了代码可以快速生效。

[muzuiget]

@ves 还要什么方案，打开扩展开发者模式，选择扩展文件夹，改了代码，就点一下刷新就行了。