背景

最近在学习前端相关的知识，刚好又碰到了一个小需求需要用到油猴插件。油猴（Tampermonkey）脚本可以极大地提升我们对网页的定制化能力。

本地开发这些脚本时，我需要频繁地复制粘贴代码到油猴插件编辑器中进行调试显得非常低效。

本文将介绍如何通过 HTTP 服务器高效地开发和调试油猴脚本。

效果

使用 HTTP 服务器

通过使用 HTTP 服务器，我们可以避免文件访问权限的问题，并且可以在任意操作系统上进行开发。以下是具体步骤：

使用 Node.js 和 http-server 模块：

1. 安装 http-server：

npm install -g http-server

2. 启动 HTTP 服务器：

http-server /Users/mark/MyProjects/confluence-float-toc

例如：

http-server /path/to/your/project

3. 更新你的油猴脚本以使用 HTTP URL：

// ==UserScript==
// @name         Confluence Floating TOC
// @namespace    http://tampermonkey.net/
// @version      2.2
// @description  在 Confluence 文章页面上浮动展示文章目录，并支持展开和折叠功能
// @author       mkdir700
// @match        https://*.atlassian.net/wiki/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';
    var script = document.createElement('script');
    script.src = 'http://localhost:8080/main.js?timestamp=' + new Date().getTime();
    document.head.appendChild(script);
})();

这里不适用 @require 的原因是该标签通常用于静态 URL，仅会被 Tampermonkey 加载一次，而我们希望的是每次页面加载都重新加载一次 JS 脚本。

检查浏览器控制台

在目标网页上按 F12 或 Ctrl+Shift+I 打开开发者工具，检查控制台是否有任何错误信息。