油猴脚本本地调试

1,724 阅读1分钟

今日掘友分油猴插件的代码越来越多,超过了上千行,导致调试变得十分麻烦。

调试方式的演进之路:

  1. 直接在油猴脚本的编辑器中编辑,这种方式只适合代码行数较少的情况。
  2. 随着代码量越来越多需要模块化开发,因此开始在外部编辑器使用模块化开发,并使用rollup这类打包工具,然后将打包后的文件内容拷贝到油猴编辑器中。这一步也是十分繁琐。
  3. 打包时,同时将代码发布到npm,然后使用第三方cdn(cdn.jsdelivr.net)加载最新版本。油猴中无需写任何代码,只需使用@requre https://cdn.jsdelivr.net/npm/jinrijueyoufen。但是存在cdn缓存问题,本地调试还是很麻烦。
  4. 本地调试时,油猴中引入本地文件;稳定后再发布新版本。

刷新cdn缓存

当发布新的版本时,需要刷新cdn缓存。

访问https://purge.jsdelivr.net/npm/jinrijueyoufen进行缓存更新。需要注意的是,缓存更新是有节流设置的,不能频繁更新。

油猴引入本地脚本设置

  1. 使用@require file:///User/用户名/file/to/path
  2. 必须设置油猴插件可以访问本地文件,否则执行上一句时会无效,并提示无法访问本地文件。

image.png

image.png

在浏览器扩展程序中找到tampermonkey(篡改猴),点击详情,然后打开允许访问文件网址