如何使用 VSCode 开发 UserScripts？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1230 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

VSCode

API

调试

运行

12 条回复 • 2021-07-15 11:59:36 +08:00

smallthing

2021-07-14 00:54:43 +08:00

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

Trim21

2021-07-14 06:53:05 +08:00 via Android

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

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

sikong31

2021-07-14 08:20:38 +08:00

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

wdssmq

2021-07-14 11:03:56 +08:00

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

ysc3839

2021-07-14 11:28:38 +08:00 via Android

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

muzuiget

2021-07-14 13:13:16 +08:00

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

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

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

ves

2021-07-14 16:14:04 +08:00

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

ves

2021-07-14 16:16:28 +08:00

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

ves

2021-07-14 16:16:53 +08:00

@Trim21 感谢，来看看怎么用

ves

2021-07-14 22:18:59 +08:00

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

ysc3839

2021-07-15 02:48:22 +08:00 via Android

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

muzuiget

2021-07-15 11:59:36 +08:00

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