用开发服务器调试主题

开发主题时，可以让 foobar2000 从 Vite 这类开发服务器加载页面，而不是从模板文件夹加载，这样文件一保存，改动就出现在窗口里。完整的搭建过程见构建第一个主题。

让 foobar2000 指向开发服务器

1. 启动开发服务器，记下它的地址，例如 http://localhost:5173。
2. 打开 File → Preferences → Display → WebView2 UI 下的 开发者 页。
3. 勾选 使用开发服务器（HMR 热重载），在 URL 框里填入地址。地址必须以 http:// 或 https:// 开头并带主机名。
4. 按 应用。

主窗口和跟随全局模板的面板立即重新加载，不用重启。指定了自己模板或 URL 的面板，下一次加载页面时同样从开发服务器加载。弹出窗口打开同一服务器上的 <服务器>/<页面>.html。

宿主信任它从这个地址加载的页面，所以 fb2k.invoke() 和 SDK 在开发服务器的页面里照常可用。信任按协议、主机和端口精确匹配：换了端口的页面，或者填的是 localhost 而页面在 127.0.0.1 上，都不能调用宿主。见哪些页面能调用 API。

页面或脚本也能用 fb.ui.setDevServerConfig({ useDevServer, devServerUrl })（宿主方法 window.setDevServerConfig）修改这两项设置。设置会保存下来，但要到下一次加载页面时才生效。

出现的还是原来的主题

foobar2000 连不上开发服务器时，会改为加载已安装的模板。确认开发服务器还在运行，并且监听的正是你填的地址（Vite 配置了 strictPort: true 时端口被占就会直接失败，不会换端口），然后重新加载：再按一次 应用，或重启 foobar2000。

打开开发者工具

• 在同一页勾选 启用开发者工具 (F12)。WebView 创建时才读取这项设置，改动后要重启 foobar2000。打开之后，无论用不用开发服务器，在任何 WebView 里按 F12 都能打开开发者工具。
• 主窗口从开发服务器加载页面时，会自动打开开发者工具。
• 面板可以在自己的配置对话框里单独启用开发者工具，不用重启，见把页面放进面板。

没有「检查」右键菜单项；页面自己的右键处理照常生效。

回到已安装的模板

取消勾选 使用开发服务器（HMR 热重载），按 应用。要保留正在开发的主题，就构建它，再把输出复制进模板，见安装主题。

供自动化用的远程调试

同一页的 CDP 远程调试 让 WebView 在本机端口（默认 9222）上提供 Chrome DevTools Protocol，MCP 服务器就靠它工作。重启后生效，见 MCP 配置指南。