V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
ves
V2EX  ›  JavaScript

如何使用 VSCode 开发 UserScripts?

  •  
  •   ves · 2021-07-13 22:07:21 +08:00 · 1727 次点击
    这是一个创建于 393 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    12 条回复    2021-07-15 11:59:36 +08:00
    smallthing
        1
    smallthing  
       2021-07-14 00:54:43 +08:00   ❤️ 1
    有 edge 浏览器插件 直接在里面运行和调试
    Trim21
        2
    Trim21  
       2021-07-14 06:53:05 +08:00 via Android   ❤️ 2
    https://github.com/Trim21/webpack-userscript-template

    然后加 debugger,用浏览器的 devtool 调试
    sikong31
        3
    sikong31  
       2021-07-14 08:20:38 +08:00
    tampermonkey 的脚本在 Chrome 里可以调试 打个断点就行了
    wdssmq
        4
    wdssmq  
       2021-07-14 11:03:56 +08:00
    给 js 所在目录开个 web 服务,,浏览器打开就能被识别然后安装(虽然不太清楚,好像需要 .user.js 后缀??)

    ysc3839
        5
    ysc3839  
       2021-07-14 11:28:38 +08:00 via Android
    @wdssmq 看你的截图是 Tampermonkey 的功能,不是浏览器的功能。
    muzuiget
        6
    muzuiget  
       2021-07-14 13:13:16 +08:00
    你会 JS,直接写扩展就是了,扩展本来就有 Content Scripts 的概念,用油猴纯多此一举,直接用浏览器调试。

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

    除非代码是别人写的,用了油猴私有 API,即 GM_ 开头那些,如果是自己重头写,别折腾油猴了,按扩展来写就是。
    ves
        7
    ves  
    OP
       2021-07-14 16:14:04 +08:00
    @smallthing 但这样编辑与运行就分开了
    ves
        8
    ves  
    OP
       2021-07-14 16:16:28 +08:00
    @muzuiget 我更想要的是一个好的开发方案,按扩展写,那有没有好的方案?
    ves
        9
    ves  
    OP
       2021-07-14 16:16:53 +08:00
    @Trim21 感谢,来看看怎么用
    ves
        10
    ves  
    OP
       2021-07-14 22:18:59 +08:00
    @Trim21 这 edge 里调试不怎么好使啊,有点抽象
    ysc3839
        11
    ysc3839  
       2021-07-15 02:48:22 +08:00 via Android
    @ves 写扩展的话可能会更简单,因为浏览器可以加载未打包的扩展,改了代码可以快速生效。
    muzuiget
        12
    muzuiget  
       2021-07-15 11:59:36 +08:00
    @ves 还要什么方案,打开扩展开发者模式,选择扩展文件夹,改了代码,就点一下刷新就行了。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4161 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 58ms · UTC 07:48 · PVG 15:48 · LAX 00:48 · JFK 03:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.