Version: latest

本地调试

自定义 JS/CSS 每次上传或替换文件后都需要重新审核，直接在线上反复修改、上传效率很低。推荐先在本地用 whistle 把本地文件注入到腾讯问卷页面中调试，确认无误后再上传。

本地调试的好处：

无需上传、无需审核：修改本地文件后刷新页面即可看到效果；
无需开启自定义域名：可以直接在 wj.qq.com 下调试，不影响团队线上的配置；
可以断点调试：注入的代码可以在浏览器开发者工具中打断点、查看报错。

原理

whistle 是一个基于 Node.js 的跨平台抓包调试代理工具。浏览器的请求经过 whistle 代理时，whistle 可以按规则修改响应内容：

jsPrepend：把本地 JS 文件的内容包裹成 <script> 标签，插入到 HTML 页面的最前面；
cssPrepend：把本地 CSS 文件的内容包裹成 <style> 标签，插入到 HTML 页面的最前面。

注入的代码会在页面其他内容之前执行，与线上自定义 JS「在 <head> 中、页面渲染前同步执行」的时机一致，因此本地调试通过的代码，上传后的表现也基本一致。

安装 whistle

1. 安装 Node.js

whistle 依赖 Node.js，请先到 Node.js 官网下载安装 LTS 版本。安装完成后在终端中执行以下命令，能输出版本号即表示安装成功：

node -v

2. 安装 whistle

npm install -g whistle

安装完成后执行以下命令，能输出版本号即表示安装成功：

w2 -V

3. 启动 whistle

w2 start

启动成功后，在浏览器中打开 http://127.0.0.1:8899 即可进入 whistle 的管理界面。

常用命令：

命令	说明
`w2 start`	启动 whistle
`w2 restart`	重启 whistle
`w2 stop`	停止 whistle
`w2 status`	查看运行状态

4. 配置代理

需要让浏览器的请求经过 whistle（默认地址 127.0.0.1:8899），以下两种方式任选其一：

设置系统代理：执行 w2 proxy 即可把系统代理设置为 whistle，调试结束后执行 w2 proxy off 关闭；
使用浏览器插件：在 Chrome / Edge 中安装 SwitchyOmega 等代理插件，新建一个 HTTP 代理，地址填 127.0.0.1，端口填 8899，调试时切换到该代理即可。这种方式只影响当前浏览器。

5. 安装 HTTPS 根证书

腾讯问卷全站使用 HTTPS，whistle 需要安装并信任根证书后才能修改 HTTPS 页面的内容。

执行以下命令自动安装并信任根证书：

w2 ca

如果自动安装失败，也可以手动安装：

在 whistle 管理界面顶部点击「HTTPS」，扫码或点击「Download RootCA」下载根证书；
安装并信任证书：
- macOS：双击证书，在「钥匙串访问」中找到名为 whistle 的证书，双击打开，在「信任」中将「使用此证书时」设置为「始终信任」；
- Windows：双击证书 →「安装证书」，存储位置选择「受信任的根证书颁发机构」；
回到「HTTPS」弹窗，确认已勾选「Capture TUNNEL CONNECTs」。

提示

也可以执行 w2 start --init，在启动的同时自动配置系统代理并安装根证书。

配置规则

在本地新建一个目录（如 ~/wj-custom），把要调试的 JS/CSS 文件放进去；
打开 whistle 管理界面，进入左侧「Rules」，点击「Create」新建一个规则分组（如 wj-custom）；
在分组中填写规则，按 Ctrl + S（macOS 为 Cmd + S）保存，并确认该分组处于启用状态（分组名前有勾选标记）。

调试 JS

whistle 规则

# 把本地 JS 注入到腾讯问卷的投放页
https://wj.qq.com/deliver/ jsPrepend:///Users/yourname/wj-custom/deliver-link-title.js includeFilter://resH:content-type=/html/i

规则由三部分组成：

部分	说明
`https://wj.qq.com/deliver/`	匹配的页面地址，匹配所有以该地址开头的请求
`jsPrepend:///Users/yourname/...`	注入的本地文件路径，`jsPrepend://` 后直接拼接文件的绝对路径
`includeFilter://resH:content-type=/html/i`	只对响应类型为 HTML 的请求生效

注意

jsPrepend 同时会对 JS 文件的响应生效（把代码插入到 JS 文件的开头），因此务必加上 includeFilter://resH:content-type=/html/i，只注入到 HTML 页面中，否则同一段代码可能会被执行多次。

Windows 路径：写成 jsPrepend://D:/wj-custom/deliver-link-title.js；
作用于所有页面：把匹配地址改为域名，如 wj.qq.com jsPrepend://...，与线上「所有页面都会加载」的表现一致；
在自定义域名下调试：把 wj.qq.com 替换为团队的自定义域名即可。

调试 CSS

whistle 规则

# 把本地 CSS 注入到腾讯问卷的所有页面
wj.qq.com cssPrepend:///Users/yourname/wj-custom/brand.css includeFilter://resH:content-type=/html/i

cssPrepend 注入的样式位于页面最前面，腾讯问卷自身的样式在其之后加载，与线上的样式优先级表现一致。如果本地调试时样式没有生效，通常是选择器优先级不够，参考 CSS 编写建议提高优先级即可。

调试示例

以 JS 示例「修改链接分享页标题」为例：

把示例代码保存为 ~/wj-custom/deliver-link-title.js；
在 whistle 中添加调试 JS 中的规则，并把文件路径替换为你本地的实际路径；
确认浏览器代理已指向 whistle，登录腾讯问卷，打开任意问卷的「投放 → 链接分享」页（https://wj.qq.com/deliver/link?sid=...）；
页面标题由「问卷链接与二维码」变为「链接分享」，说明注入成功。

whistle 中配置 jsPrepend 规则

确认是否注入成功

如果页面没有变化，可以按以下方式排查：

查看 whistle 抓包：在 whistle 管理界面的「Network」中找到 /deliver/link 的请求，右侧「Overview」中的「Rules」会显示命中的规则；「Response」中可以看到页面最前面多了一段 <script>。如果没有命中规则，检查代理与规则分组是否启用、匹配地址是否正确；
查看浏览器控制台：按 F12 打开开发者工具，查看「Console」中是否有报错。如果有语法错误，整段代码都不会执行。

断点调试

在代码中需要调试的位置加上 debugger;，保存后刷新页面，打开开发者工具时浏览器会自动在该处暂停，可以逐行执行并查看变量：

function renameTitle() {
  debugger;
  // ...
}

也可以在开发者工具「Sources」面板中找到注入的内联脚本，直接点击行号添加断点。

修改后生效

whistle 每次请求都会重新读取本地文件，修改并保存文件后刷新页面即可看到最新效果，无需重启 whistle。

调试完成后

确认代码在浏览器兼容性要求的各浏览器中都能正常运行后，按 JS 使用步骤上传；
在 whistle 中取消勾选该规则分组；
如果使用的是系统代理，执行 w2 proxy off 关闭，避免影响其他网络访问。

注意

如果在自定义域名下调试，而团队已经上线并开启了同一份代码，本地注入的代码和线上下发的代码会同时执行。建议在 wj.qq.com 下调试，或先在 JS/CSS 配置中关闭对应的线上配置。

原理​

安装 whistle​

1. 安装 Node.js​

2. 安装 whistle​

3. 启动 whistle​

4. 配置代理​

5. 安装 HTTPS 根证书​

配置规则​

调试 JS​

调试 CSS​

调试示例​

确认是否注入成功​

断点调试​

修改后生效​

调试完成后​

原理